如何使用 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));