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

Posted 2023-05-07

【中文标题】如何使用 JQuery 在 Kendo Ui Grid 上刷新“页脚”

【英文标题】：How can I refresh "footer" on Kendo Ui Grid using JQuery

【发布时间】：2021-09-16 01:31:51

【问题描述】：

我设置了 Kendo Ui 网格和页脚， 页脚将获得总价， 但它总是无法获得最后的数据。 希望有人可以帮助解决它。 我尝试 $("#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

我该怎么做才会正确

【参考方案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));