自定义Kendo UI网格页脚 - 动态更新

Question

我需要在Kendo UI Grid页脚模板中显示自定义计算.内置聚合不适用于业务需求.我找到了一种方法,使用下面显示的代码片段显示页脚模板中函数的结果.这段代码的关键点是:

1. 已定义自定义计算函数(名为calc).
2. footerTemplate中存在对自定义计算函数的引用(即footerTemplate:"Total:#= window.calc()#").

---

function calc() {
  // assume this to be dynamically determined  
  var field = "Value";

  // assume this to be dynamically determined
  var dataSource = window.ds;

  // some custom calc logic
  var newValue = 0;

  $.each(dataSource.data(), function(index, model) {
      newValue += model.get(field);
  });

  return newValue;
}

$(document).ready(function() {
    window.ds = new kendo.data.DataSource({
      data: [
        {Name:"One", Value:1},
        {Name:"Two", Value:1},
        {Name:"Three", Value:1},
        {Name:"Four", Value:1},
        {Name:"Five", Value:1}
      ],
      pageSize: 10,
      schema: {
        id: "Name",
        fields: {
          Name: { type: "string"},
          Value: { type: "number"}
        }                      
      }
    });

    $("#grid").kendoGrid({
        dataSource: window.ds,
        scrollable: false,
        pageable: true,
        editable: true,
        columns: [
          { field: "Name", title: "Name" },
          { field: "Value", title: "Value", 
           footerTemplate: "Total: #=window.calc()#" }
        ]
    });
});

我正在努力的问题是,当用户更改列中的一个值时,需要即时更新计算值.这似乎不是在Kendo UI Grid API中实现这一点的直接方式.

到目前为止我所做的是向Grid添加一个保存处理程序,它调用Grid的refresh方法.

    $("#grid").kendoGrid({
        dataSource: window.ds,
        scrollable: false,
        pageable: true,
        editable: true,
        columns: [
          { field: "Name", title: "Name" },
          { field: "Value", title: "Value", 
           footerTemplate: "Total: #=window.calc()#" }
        ],
        save: function (e) {
          e.sender.refresh();
        }
    });

这是有效的(页脚值在用户更改列中的值后立即更新),但它有一个缺点.更改值然后单击列中的另一个单元格时,新单击的单元格不会立即进入编辑模式(此功能显然是通过调用refresh方法而短路).然后用户必须再次单击该单元格以使其进入编辑模式(哎呀!).

http://trykendoui.telerik.com/oVEV/4上有一个代码的工作示例.

到目前为止,我所拥有的解决方案并不理想.有谁知道这个问题更优雅的解决方案？

Answer 1

试试这个......用这个替换你的页脚模板:

footerTemplate: "Total:<span id='myId'> #=window.calc()#</span>"

请注意我如何将带有ID的span元素放入其中？这样可以在需要时轻松更改和更新总计.我给了它一个idmyId

现在我想你想要在每个单元格编辑后更新总数(并不一定在保存网格时).每次成功编辑单元格时,change都会在kendo dataSource上触发该事件.因此,在更改事件中重新开始重新计算.您的数据源现在看起来像这样:

window.ds = new kendo.data.DataSource({
     data: [
         //omitted code...
     ],
     pageSize: 10,
     schema: {
         //omitted code...               
     },
     change: function(e){
          var total = window.calc();
          $("#myId").html(total.toString());
     }
});

无需在网格上调用那种难看的刷新;).这是您修改后的样本.