loadonce:true 不会重新加载 jqgrid

Question

我是使用 jqgrid 的新手。

在新页面加载时，网格会正确加载数据库中的数据。之后由于 loadonce: true 网格没有从数据库中重新加载数据以进行添加/编辑/删除。

我的应用组合是JSP、Servlet、MySQL

我有一个带有以下设置的网格

jQuery("#userList").jqGrid({
                    url: '<%=request.getContextPath()%>/userJqGrid?q=1&action=fetchData&userCookie=<%= encodedCookie%>',
                    datatype: 'xml',
                    mtype: 'GET',
                    colNames:['<%= userProp.getProperty(userColNames[0])%>',
                              '<%= userProp.getProperty(userColNames[1])%>',
                              '<%= userProp.getProperty(userColNames[2])%>',
                              '<%= userProp.getProperty(userColNames[3])%>',
                              '<%= userProp.getProperty(userColNames[4])%>',
                              '<%= userProp.getProperty(userColNames[5])%>'
],
                    colModel:[
                        {name:'<%= userColNames[0]%>',index:'<%= userColNames[0]%>',
                            width:120,sortable:true,editable:true,editrules:{required:true},formoptions:{rowpos:1, elmprefix:'*'}},
                        {name:'<%= userColNames[1]%>',index:'<%= userColNames[1]%>',
                            width:130,sortable:true,editable:true},
                        {name:'<%= userColNames[2]%>',index:'<%= userColNames[2]%>',
                            width:100,sortable:true,editable:true,editrules:{required:true},formoptions:{rowpos:3, elmprefix:'*'}},
                        {name:'<%= userColNames[3]%>',index:'<%= userColNames[3]%>',
                            width:180,sortable:true,editable:true,editrules:{email:true,required:true},formoptions:{rowpos:4, elmprefix:'*'}},
                        {name:'<%= userColNames[4]%>',index:'<%= userColNames[4]%>', 
                            width:100,sortable:true,editable:true},
                        {name:'<%= userColNames[5]%>',index:'<%= userColNames[5]%>', 
                            width:100,sortable:true,editable:true},
                    ],
                    pager: '#pager1',
                    rowNum:50,
                    height:'auto',
                    //rowList:[10,20,30],
                    loadonce: true,
                    sortname:'<%= userColNames[0]%>',
                    viewrecords: true,
                    editurl:'<%=request.getContextPath()%>/userJqGrid?q=1&action=addData&userCookie=<%= encodedCookie%>',
                    caption: 'User Grid',
                    ondblClickRow: function(rowid) {
                       $("#userList").jqGrid('editGridRow',rowid, userEditParam);
                        return;
                    }
                 });
$("#userList").jqGrid('navGrid',"#pager1",{add:true,edit:true,del:true});
$("#userList").jqGrid('gridResize', { minWidth: 450, minHeight: 150});

我尝试添加以下代码以重新加载

$("#userList").jqGrid('setGridParam',{datatype:xml}).trigger('reloadGrid')

有人可以帮忙吗？

对我有用的解决方案

$("#userList").jqGrid('navGrid',"#pager1",{add:true,edit:true,del:true,refresh:true,

beforeRefresh: function() {
   $("#userList").jqGrid('setGridParam',{datatype:xml}).trigger('reloadGrid');
}},
{
  afterSubmit: processAddEdit,
       closeAfterAdd:true,
       closeAfterEdit:true
},{
  aftersubmit:processAddEdit,
       closeAfterAdd:true,
       closeAfterEdit:true
});

function processAddEdit() {
  $("#userList").jqGrid('setGridParam',{datatype:xml}).trigger('reloadGrid');
  return[true,'']; //no error
}

Answer 1

正确的是datatype:'xml' 而不是datatype:xml。所以代码就像

$("#userList").jqGrid('setGridParam', {datatype:'xml'})
              .trigger('reloadGrid', [{page:1}]);

应该可以。 reloadGrid的附加参数说明见here。

已更新：我希望从您的 cmets 中知道您在实施中遇到的问题。如果我现在理解你是正确的，你希望导航栏上的“重新加载网格”按钮从服务器重新加载网格。为此，您应该使用您的实现重新定义标准的“重新加载网格”按钮，该按钮执行我在答案中包含的代码（见上文）。因此，您应该使用refresh: false 作为navGrid 选项来删除标准的“重新加载网格”按钮，然后使用navButtonAdd 添加看起来与标准按钮完全相同的新按钮，并具有您的自定义实现或onClickButton 事件：

var myGrid = $('#userList');
myGrid.jqGrid({
    datatype: 'xml',
    loadonce: true,
    pager: '#pager1',
    // ... other parameters which you use
});
myGrid.jqGrid('navGrid', '#pager1', {refresh: false});
myGrid.jqGrid(
    'navButtonAdd',
    '#pager1',
    {
        caption: "",
        buttonicon: "ui-icon-refresh",
        title: $.jgrid.nav.refreshtitle,
        onClickButton: function () {
            $(this).jqGrid('setGridParam', {datatype:'xml'});
            $(this).trigger('reloadGrid', [{page:1}]);
        }
    }
);

更新 2：要在添加和编辑操作后强制重新加载网格，您可以使用 afterSubmit 事件，该事件将在接收到成功的服务器响应之后调用，但在 reloadGrid 之前由jqGrid。

myGrid.jqGrid('navGrid', '#pager1', {refresh: false},
    { // Edit options
        afterSubmit: function () {
            $(this).jqGrid('setGridParam', {datatype:'xml'});
            return [true,'']; // no error
        }
    },
    { // Add options
        afterSubmit: function () {
            $(this).jqGrid('setGridParam', {datatype:'xml'});
            return [true,'',false]; // no error and no new rowid
        }
    },
    { // Delete options
        afterSubmit: function () {
            $(this).jqGrid('setGridParam', {datatype:'xml'});
            return [true,'']; // no error
        }
    }
);

我不确定在编辑和删除操作之后是否真的需要从服务器重新加载网格，但是如果服务器没有在服务器响应中返回新 id，则可能需要在添加操作之后重新加载。您可以设置 reloadAfterSubmit: false 并在服务器响应中返回新的 id。有关详细信息，请参阅 this 和 this 答案。

Answer 2

谢谢，

        $("#list1").jqGrid('navGrid', '#pager1', {refresh: false},
{ // Edit options
    afterSubmit: function () {$(this).jqGrid('setGridParam', {datatype:'xml'});
        return [true,'']; // no error
    }
},
{ // Add options
    afterSubmit: function () {
        $(this).jqGrid('setGridParam', {datatype:'xml'});
        return [true,'',false]; // no error and no new rowid
    }
},
{ // Delete options
    afterSubmit: function () {
        $(this).jqGrid('setGridParam', {datatype:'xml'});
        return [true,'']; // no error
    }
});  jQuery("#list1").jqGrid('navGrid','#pager1',{edit:true,add:true,del:true,view:false},{url: "product.php" },{closeAfterEdit: true,closeAfterAdd: true});
       jQuery("#list1").jqGrid('gridResize',{minWidth:350,maxWidth:850,minHeight:80, maxHeight:350}).trigger('reloadGrid');
       $('#list1').jqGrid('setGridParam', {datatype:'xml'});
       $('#list1').trigger('reloadGrid', [{page:1}]);

为我工作。再次非常感谢。

Answer 3

{
    // edit options
    zIndex: 100,
    url: '/User/Edit',
    closeOnEscape: true,
    closeAfterEdit: true,
    recreateForm: true,

    afterComplete: function (response) {
        if (response.responseText) {
            $("#userGrid").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
        }
    }
}

为我工作：

逻辑是我们在调用返回到 JqGrid 后再次重新加载网格......试试它的工作原理