如何在Kendo Grid模板中动态访问列名

时间:2013-09-27 20:27:37

标签: kendo-ui kendo-grid

我需要在Kendo Grid模板中动态访问列名。

代码:

    $("#grid").kendoGrid({
  dataSource: [
     { Quantity: 2 , Amount: 650},
    { Quantity: 0, Amount: 0 },
    { Quantity: 1, Amount: 500 },   
    { Quantity: 4, Amount: 1047 }
  ],
  sortable: true,
  columns: [
    {
      field: "Quantity",
      template: function (dataItem) {
          if (dataItem.Quantity == '0') {
            return "--";
          } else {
            return dataItem.Quantity;
          }
        }
    },

    {
      field: "Amount",
      template: function (dataItem) {
          if (dataItem.Amount == '0') {
            return "--";
          } else {
            return dataItem.Amount;
          }
        }
    }
  ]
});

在“columns - > template”中,我需要通过变量访问列而不是硬编码。我怎样才能做到这一点?因为在现实生活中我将填充到dataSource中的动态列,我将在for循环中构造columns数组。请帮忙。

请访问此JSBIN:http://jsbin.com/egoneWe/1/edit

1 个答案:

答案 0 :(得分:3)

据我所知,您使用以下内容构建columns数组:

var Definition = [
    { field: "Quantity" },
    { field: "Amount" }
];

var columns = [];
$.each(Definition, function (idx, item) {
    columns.push({
        field   : item.field,
        template: function (dataItem) {
            ...;
        }
    })
});

$("#grid").kendoGrid({
    dataSource: data,
    sortable  : true,
    columns   : columns
});

右?问题是你想为几个(所有)列使用相同的模板函数,而不是必须重写许多。

如果是这样,你可以做的是:

var Definition = [
    { field: "Quantity" },
    { field: "Amount" }
];
var columns = [];
$.each(Definition, function (idx, item) {
    columns.push({
        field   : item.field,
        template: function (dataItem) {
            return commonTemplateFunction(dataItem, item.field);
        }
    })
});

我在columns数组中使用的内容(网格的列定义)是一个接收两个参数的函数:行的dataItem和编辑的field名称

然后,我将template函数定义为:

function commonTemplateFunction(dataItem, field) {
    if (dataItem[field] == '0') {
        return "--";
    } else {
        return dataItem[field];
    }
}

您修改后的代码位于:http://jsbin.com/egoneWe/3/edit

所以,尽管我无法猜测列名,但我可以使用列启动器来完成这个技巧。