如何在不刷新的情况下更新剑道网格聚合答案

【问题标题】：How to update Kendo grid aggregates without refreshing如何在不刷新的情况下更新剑道网格聚合
【发布时间】：2015-03-03 17:01:23
【问题描述】：

我正在处理带有远程数据的剑道网格，目前在更新网格时，我使用 dataItem.set() 方法手动将网格与数据同步。这工作正常，但不幸的是页脚中的聚合没有刷新。它们仅在调用 dataSource.fetch() 时刷新，这会使应用程序挂起大约 10 秒。然而，用户想要更多类似 excel 的响应能力，他们所做的每一项更改都会立即反映在总数中，但也会保留到数据库中。这可以使用剑道api吗？还是我必须使用 jQuery 手动执行此操作？

编辑：看起来没有内置方法，所以我使用 jQuery 手动修复。

编辑 2：这是我使用的代码，进行了一些概括并去掉了一些特定于应用程序的怪癖。

剑道网格配置：

$(gridId).kendoGrid({
    columns: [
        {
            field: fieldToUpdate,
            editor: customEditor,
            //add 'data-field' attribute to footer/group footer
            footerAttributes: { 'data-field': fieldToUpdate },
            groupFooterAttributes: { 'data-field': fieldToUpdate }
        },
        //other fields...
    ],
    //other config...
});

自定义编辑器：

function customEditor(data) {
    //store original and new value
    //append textbox
    //call custom update passing td and data w/ original/new values
}

查找受影响的聚合单元：

//Gets all affected aggregate cells after an update
function getTotalsCells($container, updatedField) {
    var groups = $('#grid').data('kendoGrid').dataSource.group(),
        $totals = $('.k-footer-template>td[data-field="' + updatedField + '"]'),
        $row = $container.parent('tr');
    for (var i = 0; i < groups.length; i++) {
        var $groupTotal = $row.nextAll('.k-group-footer')
                              .eq(i)
                              .find('[data-field="..."]');
        $totals = $totals.add($groupTotal);
    }
    return $totals;
}

更新总计

$.fn.updateTotal = function (delta) {
    this.each(function () {
        var $container = $(this);
        var origTotal = parseFloat($container.text() || 0);
        var total = origTotal + delta;
        $container.text(total);
    });
};

自定义更新：

function updateGrid($container, data) {
    var difference, field;
    //get difference and updatedField
    var $totals = getTotalsCells($container);
    $totals.updateTotal(difference);
}

我觉得必须有更好的方法来做到这一点，但聚合模型似乎没有更新。

【问题讨论】：

你有一个例子说明你是如何用 jQuery 手动修复它的吗？
用示例代码编辑了我的问题。
感谢您的示例。我的做法有点不同。看我的回答。
聚合在一个可观察的集合上，不是吗？需要手动更新可观察事物的聚合，这让我感到很奇怪。如果它不更新依赖它的东西，那么让它可观察有什么意义？

标签： javascript jquery kendo-ui kendo-grid

【解决方案1】：

我的解决方案是定义一个手动计算结果并从页脚模板中调用它的函数。每当刷新网格时，页脚也会更新。

客户端模板：#: sumDebits() #

function sumDebits() {
    var $grid = $('#GridId');
    var kendo = $grid.data().kendoGrid;
    var data = kendo.dataSource.data();
    var total = 0;

    for (var i = 0; i < data.length; i++) {
        var debit = parseFloat(data[i].Form.debit);

        if (debit == NaN) {
            debit = 0;
        }

        total = total + debit;
    }

    return total;
}

【讨论】：

【解决方案2】：

我遇到了几乎类似的问题。我有一个 KendoGrid，我只需要刷新行（更新 HTML 和数据）并在模式关闭后更新 groupFooterTemplateand 和 footerTemplate（它有我需要更新到网格的编辑单元格）。我有“@progress/kendo-ui”：“^2019.2.626”。我知道这是使用集，但在这个版本中，集更新了所有内容。

下面是您更新 groupFooterTemplate 和 ,footerTemplate , Html(row) 的代码，并且在没有完全刷新网格的情况下更新 excel。

let grid = $('#grid').getKendoGrid(); // Kendo Grid
let dataItem = grid.dataItem(tr); // tr: JQuery (selected Row)
let index= grid.items().index(grid.select()); // or the selected Row

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. You can update all properties like below or just set one property.
dataItem.dirty = true;
let rowItem = grid.dataSource.at(index);
for (let [key, value] of Object.entries(dataItem )) {
    rowItem.set(key, value); //

}

【讨论】：

【解决方案3】：

var grid = $("#gridName").data('kendoGrid'); 
var aggregateSum = grid.dataSource._aggregateResult;
//below code give you current aggregate value. 
var sum = aggregateSum.<your_aggregate_columnname_here>.sum; 
//assuming my Grid Column name is 'Amount' 
var sum = aggregateSum.Amount.sum;

要在不刷新页面或不获取datasource 的情况下更改聚合值，请按照以下步骤操作

// Set the current aggregate value to 0
aggregateSum.<your_aggregate_columnname_here>.sum = 0; 
//  i.e. aggregateSum.Amount.sum = 0;

// Loop trough Grid data row by row
var gridData = grid.dataSource.data();
for (var i = 0; i < gridData.length; i++) {
    var dataRow = gridData[i];
   // to set the aggregate sum value
   aggregateSum.Amount.sum += value;
   // to set the cell value for that particular row
   dataRow.set(ColumnName, value);
}

注意：确保在更新总和后最后调用Set() 函数。如果您在设置聚合总和之前调用 Set 函数，您将无法看到最后一次迭代的变化，因为这些变化只会在 set() 函数被执行后反映

【讨论】：