Перезагрузка jqgrid не происходит с loadonce:true

Я новичок в использовании 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
}

person Natraj    schedule 15.08.2011    source источник


Ответы (3)


Правильно datatype:'xml', а не datatype:xml. Итак, код вроде

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

должно сработать. См. здесь описание дополнительных параметров reloadGrid.

ОБНОВЛЕНО: Из ваших комментариев я надеюсь, что знаю, где у вас проблемы с реализацией. Если я правильно понял, теперь вы хотите, чтобы кнопка «Обновить сетку» на панели навигации перезагружала сетку с сервера. Для этого вы должны переопределить стандартную кнопку «Обновить сетку» в своей реализации, которая выполняет код, который я включил в свой ответ (см. Выше). Таким образом, вы должны использовать 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
        }
    }
);

Я не уверен, что перезагрузка сетки с сервера действительно требуется после операций редактирования и удаления в целом, но перезагрузка после операции добавления может понадобиться, если сервер не возвращает новый идентификатор в ответе сервера. Вы можете установить reloadAfterSubmit: false и вернуть новый идентификатор в ответе сервера. См. это и это отвечает за подробности.

person Oleg    schedule 15.08.2011
comment
Спасибо за быстрый ответ. Мы попробовали ваше решение, но перезагрузка все равно не запускается. Я добавил ваш код после $(#userList).jqGrid('gridResize', { minWidth: 450, minHeight: 150}); - person Natraj; 15.08.2011
comment
@ user862755: Извините, но я не понимаю, почему вы помещаете «reloadGrid» после «gridResize». Сетка имеет уже datatype: 'xml' в определении. Таким образом, jqGrid попытается заполнить сетку соответствующим Ajax-вызовом url. Если вы просто разместите вызов 'reloadGrid' во время ожидающего запроса ajax, перезагрузка будет отменена. Не могли бы вы сначала объяснить, почему и когда вам нужно перезагрузить сетку? - person Oleg; 15.08.2011
comment
Я хочу иметь сортировку и навигацию на стороне клиента, поэтому я установил «reloadOnce» как true. Кроме того, я буду добавлять/изменять/удалять запись, используя встроенную функциональность сетки. Что я хочу показать в сетке, когда они сохраняются в базе данных. - person Natraj; 16.08.2011
comment
Извините, мой последний комментарий мог дать вам неверную информацию. У меня уже работает кнопка перезагрузки. Я хочу, чтобы данные автоматически обновлялись в сетке после добавления/изменения/удаления, чего в настоящее время не происходит. - person Natraj; 16.08.2011
comment
Спасибо за ваше решение, оно сработало, но нам потребовалось несколько изменений. Я добавил решение. Еще раз спасибо, олег, вы только что спасли профессиональную жизнь 2 людям. - person Natraj; 19.08.2011
comment
Я использовал его, и это сработало, но, похоже, перезагрузка не обновляет данные формы, которые упоминаются в formIds, вместо этого он просто повторно отправляет данные, которые он отправил ранее. Пожалуйста, помогите здесь. - person coding_idiot; 12.07.2012
comment
@XCoder: я не уверен, что правильно вас понял, но если вы имеете в виду «Добавить/редактировать/удалить формы», то проблема обновления может быть решена с помощью опции recreateForm: true редактирования формы. См. здесь, здесьи т.д. - person Oleg; 12.07.2012

{
    // 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.... попробуйте, это работает

person Akhil Sharma    schedule 12.02.2016
comment
Это должно быть помечено как правильный ответ - person reaz; 04.03.2021

Спасибо,

        $("#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}]);

работает для меня еще раз большое спасибо.

person Swati Pisal    schedule 25.12.2013