0
我正在使用Kendo UI;特别是与网格组件。有没有人知道一种技术可以让我根据行中的数据来设置行的样式?如何将基于标准的样式应用到Kendo UI网格?
例如,如果其中一列的值是负值,我会用红色文本设置该行的样式。
我对如何自己做一些想法,但我希望有人已经解决了这个问题。
我正在使用Kendo UI;特别是与网格组件。有没有人知道一种技术可以让我根据行中的数据来设置行的样式?如何将基于标准的样式应用到Kendo UI网格?
例如,如果其中一列的值是负值,我会用红色文本设置该行的样式。
我对如何自己做一些想法,但我希望有人已经解决了这个问题。
下面的代码是最终解决方案:
var ApplyTestStyles = function() {
//Get a reference to our data grid
var grid = $("#grid").data("kendoGrid");
//Get grid data
var gridData = grid._data;
//iterate the data items based on data length
for (var i = 0; i < gridData.length; i++) {
//grab the current grid data item
var current = gridData[i];
//the css selector used to find the given data items html table row
var rowSelector = ">tr:nth-child(" + (i + 1) + ")";
//Grab a reference to the corrosponding data row
var row = grid.tbody.find(rowSelector);
//apply criteria based styles
//TODO: refactor this logic into criteria based style providersf
if (current.Nav <= 670) {
row.addClass("Negative");
}
else if (current.Nav >= 670) {
row.addClass("Positive");
}
}
};
我结束了遍历数据后页面加载,然后应用特定的样式。
只需用JavaScript阅读值。然后取决于该值是否定的,零或正的,或者根本不是数字,而是设置不同的样式。