将 CSS 样式分配给 SlickGrid 行
Assigning CSS Style to SlickGrid Row
我有一个向用户显示有限数量数据的 slickgrid。如果隐藏列中有数据,我希望该行加粗。我没有使用数据视图,因此 getItemMetadata 函数不可用。我已经从另一个 SO post:
试过了
var selectedRow = gridB.getSelectedRows();
item["Filter"] = filter;
var obj = {};
obj[selectedRow]={Name:"highlight"};
gridB.setCellCssStyles("highlight",obj);
gridB.updateRow(item);
gridB.invalidateRow(selectedRow);
gridB.render();
但它什么也没做。然后我从另一个 post:
尝试了这个
var selectedRow = gridB.getSelectedRows();
var item = gridB.getDataItem(selectedRow);
item["Filter"] = filter;
var modifiedCells = {};
modifiedCells[selectedRow][1] = "highlight";
gridB.setCellCssStyles("highlighted", modifiedCells);
gridB.updateRow(item);
gridB.invalidateRow(selectedRow);
gridB.render();
刚刚抛出错误。
不使用数据视图时如何实现?
getItemMetadata(index)
函数不仅在 Dataview 中可用,它还是传递给 grid constructor 的 data
接口的一部分。考虑因素是,如果您要使用数据视图,则需要容纳它。
<link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<style>
.alternate_row {
background: #A8A8A8;
}
</style>
<div id="myGrid" style="width:600px;height:500px;"></div>
<script>
var grid;
var data = [];
var columns = [{
id: "server",
name: "Server",
field: "server",
width: 180
}];
for (var i = 0; i < 2; i++) {
columns.push({
id: "id" + i,
name: "Id" + i,
field: i
});
}
var options = {
editable: false,
enableCellNavigation: true
};
$(function () {
for (var i = 0; i < 5; i++) {
var d = (data[i] = {});
if (0 == i % 2) {
d.hiddenColumn = '1'
}
d.server = "Server " + i;
for (var j = 0; j < columns.length; j++) {
d[j] = Math.round(Math.random() * 100);
}
}
data.getItemMetadata = function (row) {
return data[row].hiddenColumn ? {
cssClasses: 'alternate_row'
} : {}
}
grid = new Slick.Grid("#myGrid", data, columns, options);
});
</script>
我有一个向用户显示有限数量数据的 slickgrid。如果隐藏列中有数据,我希望该行加粗。我没有使用数据视图,因此 getItemMetadata 函数不可用。我已经从另一个 SO post:
试过了var selectedRow = gridB.getSelectedRows();
item["Filter"] = filter;
var obj = {};
obj[selectedRow]={Name:"highlight"};
gridB.setCellCssStyles("highlight",obj);
gridB.updateRow(item);
gridB.invalidateRow(selectedRow);
gridB.render();
但它什么也没做。然后我从另一个 post:
尝试了这个var selectedRow = gridB.getSelectedRows();
var item = gridB.getDataItem(selectedRow);
item["Filter"] = filter;
var modifiedCells = {};
modifiedCells[selectedRow][1] = "highlight";
gridB.setCellCssStyles("highlighted", modifiedCells);
gridB.updateRow(item);
gridB.invalidateRow(selectedRow);
gridB.render();
刚刚抛出错误。
不使用数据视图时如何实现?
getItemMetadata(index)
函数不仅在 Dataview 中可用,它还是传递给 grid constructor 的 data
接口的一部分。考虑因素是,如果您要使用数据视图,则需要容纳它。
<link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<style>
.alternate_row {
background: #A8A8A8;
}
</style>
<div id="myGrid" style="width:600px;height:500px;"></div>
<script>
var grid;
var data = [];
var columns = [{
id: "server",
name: "Server",
field: "server",
width: 180
}];
for (var i = 0; i < 2; i++) {
columns.push({
id: "id" + i,
name: "Id" + i,
field: i
});
}
var options = {
editable: false,
enableCellNavigation: true
};
$(function () {
for (var i = 0; i < 5; i++) {
var d = (data[i] = {});
if (0 == i % 2) {
d.hiddenColumn = '1'
}
d.server = "Server " + i;
for (var j = 0; j < columns.length; j++) {
d[j] = Math.round(Math.random() * 100);
}
}
data.getItemMetadata = function (row) {
return data[row].hiddenColumn ? {
cssClasses: 'alternate_row'
} : {}
}
grid = new Slick.Grid("#myGrid", data, columns, options);
});
</script>