javascript - 如何使用 Kendo 网格获取数据绑定(bind)功能

Question

我正在尝试根据单元格值满足的条件自定义网格单元格的样式。在剑道文档中，我找到了一个 example这个怎么做。该示例使用数据绑定(bind)函数扩展网格。我已经根据我的需要调整了 Dojo 页面上的代码，并且它可以完美地工作。但是，当我尝试使用数据绑定(bind)函数扩展我的网格时，我找不到正确的语法/位置来插入该函数。

这是我的数据绑定(bind)函数:

                dataBound: function(e) {
                // get the index of the cell
                var columns = e.sender.columns;
                var columnIndex = this.wrapper.find(".k-grid-header [data-field=" + "Frachtkonsens" + "]").index();

                // iterate the table rows and apply custom row and cell styling
                var rows = e.sender.tbody.children();
                for (var j = 0; j < rows.length; j++) {
                    var row = $(rows[j]);
                    var dataItem = e.sender.dataItem(row);

                    var value = dataItem.get("Frachtkonsens");
                    var max = dataItem.get("Mengenschwelle");
                    //var min = dataItem.get("Min");


                    var cell = row.children().eq(columnIndex);
                    cell.addClass(checkValue(value, max));
                }
            }

这是javascript:

<script type="text/javascript">

    function checkvalue(value, max) {
        if (max > 0) {
            if (value > max){
                return "critical";
            }
        }
    }

    $(function() {

        var konsenseGrid = $("#parameters-grid").kendoGrid({
            dataSource: someData,
            scrollable: true,
            sortable: true,
            pageable: { refresh: true },
            selectable: "row",
            resizable: true,
            height: 430,
            editable: true,
            toolbar: [{ text: "", template: kendo.template($("#add-parameter-template").html()) }, { text: "", template: kendo.template($("#update-parameter-template").html()) }],
            columns: [
                {
                    field: "Parameter",
                    title: "Parameter",
                    width: "160px"
                },
                {
                    field: "Max",
                    title: "Max",
                    width: "55px",
                    format: "{0:n}",
                    editor: numberEditor

                },
                {
                    field: "Frachtkonsens",
                    title: "Frachtkonsens",
                    width: "70px",
                    format: "{0:n1}",
                    editor: numberEditor
                },
                {
                    command:
                    ["edit", "destroy"],
                    title: "&nbsp;",
                    width: "200px"
                }

        ],
        });

    });

这是我想要应用于满足条件的单元格的样式:

    .critical {
    font-weight: bold;
    color: #f00;
}

如果有人可以帮助我，请!问候马努

Answer 1

您应该将 dataBound 与顶级配置属性一起放置，并提供相应的处理函数，例如:

 $(function() {
    var konsenseGrid = $("#parameters-grid").kendoGrid({
        dataSource: {
          data: [{'Parameter': 'a', Max: 5, Frachtkonsens: 10, Mengenschwelle: 5}, {'Parameter': 'b', Max: 1, Frachtkonsens: 1, Mengenschwelle: 3}]
        },
        dataBound: function(e) {
            // get the index of the cell
            var columns = e.sender.columns;
            var columnIndex = this.wrapper.find(".k-grid-header [data-field='Frachtkonsens']").index();

            // iterate the table rows and apply custom row and cell styling
            var rows = e.sender.tbody.children();
            for (var j = 0; j < rows.length; j++) {
                var row = $(rows[j]);
                var dataItem = e.sender.dataItem(row);

                var value = dataItem.get("Frachtkonsens");
                var max = dataItem.get("Mengenschwelle");
                //var min = dataItem.get("Min");


                var cell = row.children().eq(columnIndex);
                cell.addClass(checkValue(value, max));
            }
        },
        scrollable: true,
...

Example