如何在Kendo Grid模板中动态访问列名 [英] How to access column name dynamically in Kendo Grid template

问题描述

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

I need to access the column name dynamically in Kendo Grid template.

代码:

    $("#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;
          }
        }
    }
  ]
});

在列->模板"中，我需要通过变量访问列，而不是对其进行硬编码.我怎样才能做到这一点?因为在现实生活中，我将把动态列填充到dataSource中，并且将在for循环内构造columns数组.请帮忙.

Here inside the "columns -> template", I need to access the column thru variable instead of hardcoding it. How can I do that? Because in real life I will be having dynamic columns populated into dataSource and I will construct the columns array inside the for loop. Please help.

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

Please access this JSBIN: http://jsbin.com/egoneWe/1/edit

推荐答案

据我了解，您可以使用以下方法构建columns数组:

From what I understand, you build the columns array using something like:

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

对吗?问题是您想对几个(所有)列使用相同的模板功能，而不必重写许多列.

Right? And the problem is that you want to use the same template function for several (all) columns instead of having to rewrite many.

如果是这样，您可以做的是:

If so, what you can do is:

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的名称.

What I use in the columns array (columns definition for the Grid) is a function that receives two arguments: the dataItem for the row and the field's name being edited.

然后，将template函数定义为:

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

您的修改后的代码在这里: http://jsbin.com/egoneWe/3/edit

And your modified code is here : http://jsbin.com/egoneWe/3/edit

因此，尽管我无法猜出列名，但我可以使用列启动器来解决问题.

So, despite I cannot guess the column name, I can do the trick using the columns initiator.

这篇关于如何在Kendo Grid模板中动态访问列名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！