Question

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

哪个不起作用。我还在其中放置了一个警报，以验证函数是否已被调用，但警报也未显示。另外我将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');

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

2 个答案: