在剑道网格中，我可以使用函数动态设置列属性吗？答案

【问题标题】：In a kendo grid, can I set column attributes dynamically with a function?在剑道网格中，我可以使用函数动态设置列属性吗？
【发布时间】：2015-02-28 16:34:22
【问题描述】：

我在这里有一些代码，我试图根据数据项的值设置单元格的背景颜色：http://dojo.telerik.com/@solidus-flux/eHaMu

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
</head>
<body>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    title: "Name",
    attributes: function(e) {
      return {
        "class": "table-cell",
        style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green"
      };
    }
    //attributes: {
      //"class": "table-cell",
      //style: "text-align: right; font-size: 14px"
    //}
  } ],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
</script>
</body>
</html>

我意识到我可以使用模板来执行此操作，但这需要一个额外的 html 元素，因为您无法更改 td 本身的标记。如果支持的话，我想使用一个函数来返回属性。

【问题讨论】：

标签： javascript kendo-ui kendo-grid kendo-template

【解决方案1】：

你说你不想使用模板，但我认为你在谈论列模板。

您可以使用行模板更改 td 本身的标记：

<script id="template" type="text/x-kendo-template">
    <tr data-uid="#= uid #">
      # this.columns.forEach(function(col) { 
          var val = data[col.field],
          css,
          style = ''
          cClasses = ''; 
          if (typeof col.attributes === 'function') {
              css = col.attributes(data); 
              cClasses = css["class"];
              style = css.style
          } 
      #         
          <td class='#= cClasses #' style='#= style #'>
            #= data[col.field] #
          </td>
      # }) #
    </tr>
</script>

要使循环正常工作，您需要将模板绑定到网格：

var grid = $("#grid").kendoGrid({
    columns: [{
        field: "name",
        title: "Name",
        attributes: function (e) {
            return {
                "class": "table-cell",
                style: e.name == "Jane Doe" ? 
                       "background-color: red" : "background-color: green"
            };
        }
    }, {
        field: "title",
        title: "Title"
    }],
    dataSource: [{name: "Jane Doe", title: "Dr. Dr."}, 
                 {name: "John Doe", title: "Senior Citizen"}]
}).data("kendoGrid");

var template = kendo.template($("#template").html()).bind(grid);
grid.setOptions({
    rowTemplate: template
});

(demo)

作为替代方案，您还可以创建如下属性：

{
    field: "name",
    title: "Name",
    attributes: { 
        "class": "# if(data.name === 'Jane Doe') { # red # } else { # green # } #" 
    }
},

这将具有不使用行模板的优点，但您必须使用模板语法进行逻辑。

(demo)

【讨论】：

如果 attributes 属性不支持函数，那么这会让我尽可能接近。
既然你这么说，你可以在属性中使用函数，只要你不介意模板分隔符（并且必须将其写成字符串）

【解决方案2】：

请尝试以下代码 sn-p。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
    <style>
        .greenBG {
            background-color:green;
        }
        .redBG {
            background-color:red;
        }
    </style>
</head>
<body>

    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            columns: [{
                field: "name",
                title: "Name",
                attributes: function (e) {
                    return {
                        "class": "table-cell",
                        style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green"
                    };
                }
            }],
            dataSource: [{ name: "Jane Doe" }, { name: "John Doe" }],
            dataBound: function () {
                dataView = this.dataSource.view();
                for (var i = 0; i < dataView.length; i++) {
                    if (dataView[i].name === "Jane Doe") {
                        var uid = dataView[i].uid;
                        $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("greenBG");
                    }
                    else {
                        var uid = dataView[i].uid;
                        $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("redBG");
                    }
                }
            }
        });
    </script>
</body>
</html>

【讨论】：

我得到了类似的东西：$("td").each(function () { if ($(this).text() === "Jane Doe") { $(this).addClass("good"); } }); 但我希望没有循环。只是功能的一个属性。

【解决方案3】：

在角剑道回调中不起作用

使用这个

attributes: {
                    "ng-confirm-message": "{{this.dataItem.is_active ? \'Are you sure deactive ?\' :  \'Are you sure active ?\'}}",
                    "confirmed-click": "vm.inlineSubmit(this.dataItem.toJSON() ,true)"
                }

【讨论】：

【解决方案4】：

对于 Kendo-JQuery。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [{
    field: "name",
    headerAttributes: {
      "class": "table-header-cell",
      style: "text-align: right; font-size: 14px"
    }
  }]
});
</script>

还有这个 Kendo-MVC

.Columns(columns =>
                {
                    columns.Bound(c => c.ActiveReason).Title("ActiveReason").HeaderHtmlAttributes(new { @class = "table-header-cell" });
})

【讨论】：

【解决方案5】：

几年后，但是...... 属性功能对我来说根本不起作用，甚至没有被击中，看起来很漂亮但不起作用（如果函数是，为什么需要手动切换类提供来做这项工作？似乎有些奇怪）。

我根据其他字段值制作可编辑单元格，但我还需要更改样式

1) 在要注入 css 类的字段上添加验证，

//Your other fields configuration
field:"dependentField",
attributes:
{
    "class": "# if(data.ImportantField!==true) { # nonEditableCellStyle # } else { # editableCellStyle # }# ",
}
//Your other fields configuration

2) 绑定grid change事件，检查某个重要字段是否有变化，如果是控制其他单元格样式的字段就调用刷新方法

var _kendoGrid = $('#myGrid').data("kendoGrid");

_kendoGrid.dataSource.bind("change", function (e) {
    if (e.action === "itemchange") {
        if (e.field === "ImportantField") {
            _kendoGrid.refresh();
        }
    }
});

refresh 方法将再次呈现您的网格，这意味着您的函数 weather 是模板或属性函数（同样，这对我来说根本不起作用）将运行并在这种情况下应用正确的样式或类.

【讨论】：