2

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

ここで、「列 -> テンプレート」内で、変数をハードコーディングするのではなく、変数を介して列にアクセスする必要があります。どうやってやるの？実際には、動的列を dataSource に入力し、for ループ内で列配列を構築するためです。助けてください。

この JSBIN にアクセスしてください: http://jsbin.com/egoneWe/1/edit

4

1 に答える 1

4

私が理解していることから、次の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配列 (グリッドの列定義) で使用するのは、2 つの引数を受け取る関数です:dataItem行の とfield編集中の の名前です。

次に、template関数を次のように定義します。

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

変更したコードは次のとおりです: http://jsbin.com/egoneWe/3/edit

したがって、列名を推測することはできませんが、列イニシエーターを使用してトリックを行うことができます。

于 2013-09-27T22:30:24.253 に答える