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

本文介绍了在剑道网格中，我可以使用函数动态设置列属性吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I've got some code here where I am trying to set a background color of a cell based on the value of the data item: 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 本身的标记.如果支持，我想使用一个函数来返回属性.

I realize I could do this with a template, but that would require an extra html element, since you can't change the markup of the td itself. I'd like to use a function to return attributes if that is supported.

推荐答案

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

You said you don't want to use templates, but I think you were talking about column templates.

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

You can change the markup of the td itself by using a row template:

<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>

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

For the loop to work, you need to bind your template to the grid though:

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

(演示)

或者，您也可以创建这样的属性:

As an alternative, you could also create attributes like this:

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

这样做的好处是不使用行模板，但您必须对逻辑使用模板语法.

This would have the advantage of not using the row template, but you'd have to use the template syntax for the logic.

(演示)

这篇关于在剑道网格中，我可以使用函数动态设置列属性吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！