如何将基于条件的样式应用于剑道 UI 网格

How to apply criteria based styles to a Kendo UI grid?

本文关键字：应用于 样式 网格 UI 条件 于条件      更新时间：2023-09-26

我正在使用Kendo UI;特别是网格组件。有没有人知道一种技术可以让我根据行中的数据设置行的样式？

例如，如果其中一列的值为负数，我将用红色文本设置该行的样式。

我对如何自己做有一些想法，但我希望有人已经解决了这个问题。

只需使用 JavaScript 读取值。然后，根据值是负数、零还是正数，或者根本不是数字，您可以设置不同的样式。

以下代码是最终解决方案： 

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");
        }
    }
};

我最终迭代了数据发布页面加载，然后应用了特定的样式。

相关文章：