kendo-ui - 自定义剑道 UI 网格页脚 - 动态更新

Question

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

已定义自定义计算函数(名为 calc)。

对自定义计算函数的引用存在于 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 元素放入其中？这使得在需要时可以轻松更改和更新总数。我给它的 ID 是 myId
现在我认为您希望在每次编辑单元格后更新该总数(不一定在您保存网格时)。每次成功编辑单元格时， change在剑道数据源上触发事件。所以在 change 事件中启动重新计算。您的数据源现在看起来像这样:

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

无需在网格上调用那个丑陋的刷新 ;) 。这是您的 revised sample .