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

Question

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

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 的刷新方法。

    $("#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

现在我认为您希望在每次编辑单元格后更新该总数（不一定在保存网格时）。每次成功编辑单元格时，都会在 kendo 数据源上触发 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。

Answer 2

提供了很好的解决方案，我都试过了。但我认为用 set 你可以拥有一切。如果您设置网格的对象项，则将调用页脚模板。这将更新 Grid 和 HTML 以及 Excel 中的数据。

let grid = $('#grid').getKendoGrid(); // Kendo Grid
let dataItem = grid.dataItem(tr); // tr: JQuery (selected Row) get Item
let index= grid.items().index(grid.select()); // Selected Row get Row Index in DataSource of the Grid
let rowItem = grid.dataSource.at(index);

dataItem = data.length > 0 && data.length === 1 ? data : dataItem; // data is the new item with the same properties as the item datasource of the Grid.
dataItem.dirty = true;
// You can update all properties with the below code or just one it depends what you want to do. Aggregate functions will be called and Groupfooter and footer also.
for (let [key, value] of Object.entries(dataItem )) {
    rowItem.set(key, value); //

}