javascript - 将新列插入 Kendo Datagrid

Question

我得到的列是我的剑道网格中的数量和总价。然后我想将计算列添加到我的数据网格中。例如:

    $("#gridcolumnadd").click(function (e) {
    //1.add new column code Column Name is "Price For per kg" 
    //2.Set Column type is number
    //3.Set Column aggregate is sum for footerTemplate
    //4.add calculated values ex:(Totalprice/quantity) to "Price For per kg" with using for loop row count.
    //redraw datagrid 

});

可以在剑道数据网格中制作吗？**

---

注意
我想先创建数据网格，然后添加新列及其计算。这就是“我只写按钮点击”的原因

**例如;它不起作用

var raw = grid.dataSource.data();
  var length = raw.length;//if ı have many data . I can use For Loop
  raw[0].new="Test"; //I think one data we have it
  grid.columns.push({ field: "new" });
  grid.dataSource.data(raw);

Answer 1

一些提示:

1. 您应该 show 而不是添加列和 hide一列，否则你将不得不破坏当前的网格并创建一个新的(相当昂贵)。
2. 从一开始就创建它。您的模型中可能有实际上不是来自服务器的字段，或者您可以有不在模型中的字段。你应该决定。
3. 不明白Set Column aggregate is sum for footerTemplate 是什么意思。据我了解，您想定义一个列的聚合，因此您应该查看 columns.aggregate .
4. 这是一个可编辑的网格吗？如果不是，我建议您在使用 dataBound 从服务器接收数据时计算它。事件处理程序甚至使用 DataSource schema.parse

让我们看看这是如何组合在一起的...

这是我的原始架构:

schema: {
    model: {
        id: "ProductID",
        fields: {
            ProductID: { type: "number" },
            ProductName: { type : "text" },
            UnitPrice: { type: "number" },
            UnitsInStock: { type: "number" }
        }
    },
    ...

首先是添加 Total，它等于 UnitPrice 乘以 UnitsInStock，我将在其中使用 parse.

schema: {
    model: {
        id: "ProductID",
        fields: {
            ProductID: { type: "number" },
            ProductName: { type : "text" },
            UnitPrice: { type: "number" },
            UnitsInStock: { type: "number" },
            Total: { type: "total" }
        }
    },
    parse : function (d) {
        $.each(d, function(idx, elem) {
            elem.Total = elem.UnitPrice * elem.UnitsInStock;
        })
        return d;
    }
},

如您所见，我添加了一个额外的字段 Total，然后在 parse 中迭代计算每条记录的总数。

接下来是定义一个聚合来计算所有接收到的数据的总数。

aggregate: [ 
    { field: "Total", aggregate: "sum" }
]

就这么简单!

现在让我们定义网格的列:

columns: [
    { field: "ProductName", title : "Name" },
    { field: "UnitPrice", title: "Price" },
    { field: "UnitsInStock", title:"Units" },
    { 
        field: "Total", 
        title:"Total", 
        hidden: true, 
        aggregates: [ "sum" ],
        footerTemplate: "#= sum #"
    }
]

这里重要的是 Total 列，其中:* 我定义为(最初)hidden 使用 hidden: true。* 我还定义了一个 aggregate，即 sum。* 最后我定义了一个用于打印它的模板。

最后，我不需要重绘网格，调用columnShow就足够了...

$("#gridcolumnadd").click(function (e) {
    $("#grid").data("kendoGrid").columnShow(3);
});

所有这些都在这里:http://jsfiddle.net/OnaBai/63mg9/