JQGrid使用服务器编辑后的更新数据刷新数据

JQGrid refresh data with updated data from server ater edit

本文关键字:数据 更新 刷新 编辑 服务器 JQGrid      更新时间:2023-09-26

我有一个Jqgrid,它需要编辑。我已经成功地将网格配置为在编辑后保存数据,但问题是,当保存数据时,网格不会用数据库中的数据刷新。例如,版本字段由应用程序后端自动更新,但编辑完成后不会刷新,而是显示旧值。我试过了afterSubmit完成后

但没有起作用。我还在其中放置了一个警报,以验证是否调用了该函数,但警报也没有显示。此外,我将loadonce设置为false,将reloadaftersubmit设置为true,但这也不起作用。我认为问题可能是我没有正确配置编辑,或者把上面提到的参数放在了错误的位置。

保存(编辑)完成后,更新的数据(即整个页面)将返回到Jqgrid(作为json)。这里的问题是显示旧数据,以及编辑后如何显示更新后的数据。

更新:我发现当我通过弹出框进行编辑时,会执行afterSubmit。然而,编辑是通过formatoptions进行的,formatoptions允许编辑表本身中的数据。现在,当数据在不使用弹出窗口的情况下从网格本身编辑和保存时,我希望触发afterSubmit来刷新表。我应该把我的afterSubmit放在哪里/我如何做到这一点。

/**
 * Initialize and Draw JQGrid
 * @return
 */
function drawFOMJQGrid(){
    var lastsel2;
    jQuery("#tblGrid").jqGrid({     
        height: 180, 
        width:990,
        datatype: "json", 
        colNames:['','Hotel','Outlet','Major Group','Item Group','Version'], 
        jsonReader : {
              root: "regDetails", 
              page: "page",
              total: "total",
              records: "records",   
              repeatitems: false
        },
        colModel:[ 
            {name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}},
            {name:'hotelName',index:'hotelName',align:"left",width:30,resizable:false}, 
            {name:'majorGroupName',index:'majorGroupName',align:"left", width:20,resizable:false}, 
            {name:'itemGroupName',index:'itemGroupName', width:30,align:"left",resizable:false},
            {name:'version',index:'version', width:20,align:"right",resizable:false,editable:true,hidden: false}

        ],
        onSelectRow: function(id){
        },
        /*afterSubmit : function(response, postdata){
                        alert("AAAA");
        },  
        afterComplete : function(response, postdata){
                        alert("AAAA2");
        },  */              
        //rowList:[10,20,30], 
        rowNum:5,   
        pager: '#divGridPg', 
        sortname: 'hotelName', 
        viewrecords: true, 
        sortorder: "outletName",
        gridview: true, 
        bgiframe: true,
        autoOpen: false,
        caption: 'POS Item Pricing',
        forceFit: false,
        loadtext: 'Loading ...',
        sortable: true,
        loadonce: false,
        editurl:  "itemPricingSave.action", //"/js/itemPricing/server.js",          
        datatype: "json"


    }); 

    $("#tblGrid")[0].addJSONData(regGridJSONData);
    $("#tblGrid").setGridParam({datatype: 'json'});
    jQuery("#tblGrid").jqGrid('navGrid','#divGridPg',{edit:true,add:false,del:false,reloadAfterSubmit:true});       

}
/**
 * Initialize and Draw JQGrid
 * @return
 */
function drawFOMJQGrid(){
    var lastsel2;
    jQuery("#tblGrid").jqGrid({     
        height: 180, 
        width:990,
        datatype: "json", 
        colNames:['','Hotel','Outlet','Major Group','Item Group','Version'], 
        jsonReader : {
              root: "regDetails", 
              page: "page",
              total: "total",
              records: "records",   
              repeatitems: false
        },
        colModel:[ 
            {name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}},
            {name:'hotelName',index:'hotelName',align:"left",width:30,resizable:false}, 
            {name:'majorGroupName',index:'majorGroupName',align:"left", width:20,resizable:false}, 
            {name:'itemGroupName',index:'itemGroupName', width:30,align:"left",resizable:false},
            {name:'version',index:'version', width:20,align:"right",resizable:false,editable:true,hidden: false}

        ],
        onSelectRow: function(id){
        },
        /*afterSubmit : function(response, postdata){
                        alert("AAAA");
        },  
        afterComplete : function(response, postdata){
                        alert("AAAA2");
        },  */              
        //rowList:[10,20,30], 
        rowNum:5,   
        pager: '#divGridPg', 
        sortname: 'hotelName', 
        viewrecords: true, 
        sortorder: "outletName",
        gridview: true, 
        bgiframe: true,
        autoOpen: false,
        caption: 'POS Item Pricing',
        forceFit: false,
        loadtext: 'Loading ...',
        sortable: true,
        loadonce: false,
        editurl:  "itemPricingSave.action", //"/js/itemPricing/server.js",          
        datatype: "json"


    }); 

    $("#tblGrid")[0].addJSONData(regGridJSONData);
    $("#tblGrid").setGridParam({datatype: 'json'});
    jQuery("#tblGrid").jqGrid('navGrid','#divGridPg',{edit:true,add:false,del:false,reloadAfterSubmit:true});       

}

我执行了以下操作来强制重新加载网格:

.navGrid('#pager',
                    {edit:true,
                    add: true, 
                    del:true,refresh:false},
              { // edit options
                    afterSubmit: function() {
                        comptes[0].clearToolbar();
                        comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
                          return [true,'',false]; // no error and no new rowid
                         }
                }, 
                { // add options
                     afterSubmit: function() {
                            comptes[0].clearToolbar();
                            comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
                        return [true,'']; // no error
                    }
                } ,
                { // delete options
                     afterSubmit: function() {
                            comptes[0].clearToolbar();
                            comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
                        return [true,'']; // no error
                    }
                }       
               );

在完成以下所有编辑过程后,尝试用新数据重新加载jqGrid:

jQuery("#grid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');