如何使用 JQuery 在 Kendo Ui Grid 上刷新“页脚”

Question

我设置了Kendo Ui Grid和footer，footer会得到总价，但是总是拿不到最后的数据。 希望有人可以帮助修复它。 我尝试 $("#Grid").data("kendoGrid").refresh(); 但它对我不起作用。

剑道格子套装

数据源

    var AddGriddataSource = new kendo.data.DataSource({
    data: [],
    schema: {
        model: {
            fields: { 
                id: 'No',                
                Name: { editable: false, nullable: false },
                txtStockNum: { editable: false, nullable: false },
                txtReturnNum: { editable: true, nullable: false },
                txtPricetax: { editable: false, nullable: false },
                txtPriceNum1: { editable: false, nullable: false }
            }
        } // end of model
    },  // end of schema
    aggregate: [{ field: "txtPriceNum", aggregate: "sum" }, { field: "txtPriceNum1", aggregate: "sum" }],
});

细胞

    var AddGridCells = [
    { field: "Name", title: "Name", width: "20px" },
    { field: "StockNum", title: "Stock", width: "20px" },
    { field: "txtReturnNum", title: "txtReturnNum", width: "100px", template: '<input id = "Del" class="returnDel" type="button" value="▼" style="margin: -1px" /><input id="Txt_test1" class="returnTxtBox" type="textbox" value= #=txtReturnNum# style="margin: 2px" /><input id = "plus" class="returnPlus" type="button" value="▲" style="margin: -1px" />' },       
    { field: "txtPrice", title: "txtPrice", width: "20px", hidden: true },
    { field: "txtPricetax", title: "txtPricetax", width: "20px", format: "{0:n3}" },
    { field: "txtPriceNum", title: "Total", width: "20px", footerTemplate: "#= kendo.toString(sum, '0.000')#", hidden: true },
    { field: "txtPriceNum1", title: "Total", width: "30px", footerTemplate: "<span id='footerPlaceholder'>#= kendo.toString(sum, '0.000')#</span>", format: "{0:n3}" },
    { command: [{ text: "X", click: DelchooseDetails }], title: " ", width: "10px" },
];

和

$("#AddGrid").kendoGrid({
            dataSource: AddGriddataSource,
            selectable: "row",
            scrollable: false,
            columns: AddGridCells,
            change: numberInput,
            pageable: {
                buttonCount: 3,
                messages: GridPageMsg
            },
            height: '100%',
            editable: true
        }).data("kendoGrid");

jQuery 待办事项

$(document).on('click', '.returnPlus', function (e) {
 
    if (nowStatus != 0) {
        return;
    }
    var ds2 = $("#AddGrid").data("kendoGrid").dataSource;
    var row = $(this).closest("tr"),
        grid = $("#AddGrid").data("kendoGrid"),
        dataItem = grid.dataItem(row);
    debugger;
    ds2.fetch(function () {
        dataItem.txtReturnNum = dataItem.txtReturnNum - (-1);
        dataItem.txtPriceNum = dataItem.txtReturnNum * dataItem.txtPrice;
        dataItem.txtPriceNum1 = mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax);
    })
    $("#AddGrid").data("kendoGrid").refresh();
    return;
});


$(document).on('click', '.returnDel', function (e) {
    if (nowStatus != 0) {
        return;
    }
    var ds2 = $("#AddGrid").data("kendoGrid").dataSource;
    var row = $(this).closest("tr"),
        grid = $("#AddGrid").data("kendoGrid"),
        dataItem = grid.dataItem(row);
    debugger;
    ds2.fetch(function () {
        dataItem.txtReturnNum = dataItem.txtReturnNum - (1);
        dataItem.txtPriceNum = dataItem.txtReturnNum * dataItem.txtPrice;
        dataItem.txtPriceNum1 = mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax);
    })       
    $("#AddGrid").data("kendoGrid").refresh();
    return;
});

我不确定如果我没有正确描述，所以我录制视频https://imgur.com/mePv5qI

我该怎么做才会正确

Answer 1

你为什么使用fetch() ？ 似乎您不需要它，因为您没有从 api 更新数据。 你只是更新本地数据，对吧？ 所以删除它并直接更改dataItem ：

var row = $(this).closest("tr"),
    grid = $("#AddGrid").data("kendoGrid"),
    dataItem = grid.dataItem(row);

dataItem.txtReturnNum = dataItem.txtReturnNum - (-1);
dataItem.txtPriceNum = dataItem.txtReturnNum * dataItem.txtPrice;
dataItem.txtPriceNum1 = mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax);

$("#AddGrid").data("kendoGrid").refresh();

或者

var row = $(this).closest("tr"),
    grid = $("#AddGrid").data("kendoGrid"),
    dataItem = grid.dataItem(row);

dataItem.set('txtReturnNum', dataItem.txtReturnNum - (-1));
dataItem.set('txtPriceNum', dataItem.txtReturnNum * dataItem.txtPrice);
dataItem.set('txtPriceNum1', mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax));