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

Question

我有一个需要编辑的 Jqgrid。我已成功配置网格以在编辑后保存数据，但问题是当保存数据时，网格不会使用数据库中存在的数据进行刷新。例如，版本字段由应用程序后端自动更新，但是在编辑完成后它不会刷新，而是显示旧值。我努力了 提交后 完成后

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

完成保存（编辑）后，更新的数据（即整个页面）将返回到 Jqgrid（以 json 格式）。这里的问题是显示旧数据以及如何在编辑后显示这些更新的数据。

更新：我发现当我通过弹出框进行编辑时，会执行 afterSubmit。然而，编辑是通过允许编辑表格本身的数据的格式选项进行的。现在，当在不使用弹出窗口的情况下从网格本身编辑和保存数据时，我希望触发 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});       


}

Answer 1

我做了以下强制网格重新加载：

.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
                    }
                }       
               );

Answer 2

在完成所有编辑过程后，尝试使用新数据重新加载 jqGrid，如下所示：

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