jqGrid и поисковый фильтр.Лучший способ пополнить данные

Question

Я давно играю с jqGrid, но никогда не углублялся в детали о производительности.
Я не использую встроенную форму поиска jqGrid, потому что предпочитаю иметь собственную панель инструментов, где пользователь вводит некоторые данные, которые он / она хочет отфильтровать.

Я всегда оборачивал свою сетку в функцию:

$(document).ready(function () {

    var myGrid = jQuery("#MyGrid");

    $("#cmdSearch").bind('click', function (e) {
        myGrid.GridUnload();
        LoadMyGrid($("#Filter1").val(), $("#Filter2").val())
    });

    function LoadMyGrid(param1, param2) {
        myGrid.jqGrid({
            url: 'myUrl',
            postData: { Param1: param1, Param2: param2 },
            datatype: 'json',
            mtype: 'POST',
            colNames: ['Column1', 'Column2'],
            colModel: [
                       { name: 'colum1', index: 'colum1', sortable: true, width: 100 },
                       { name: 'colum2', index: 'colum2', sortable: true, width: 100 }
                      ],
            pager: $('#MyPager'),
            rowList: [10, 50, 100],
            rowNum: 10,
            viewrecords: false,
            shrinkToFit: false,
            rownumbers: true,
            hidegrid: false,
            emptyrecords: "No records."
        });
    }
}); 

и выгрузил его (GridUnload) перед повторным созданием. Мне было интересно, если это лучший способ сделать это или могут быть некоторые проблемы с производительностью / памятью?

Answer 1

Использование GridUnload() в примере не лучший способ.Я бы переписал ваш код следующим образом

$(document).ready(function () {
    var myGrid = jQuery("#MyGrid");

    myGrid.jqGrid({
        url: 'myUrl',
        postData: {
            Param1: function() { return $("#Filter1").val(); },
            Param2: function() { return $("#Filter2").val(); }
        },
        datatype: 'json',
        mtype: 'POST',
        colNames: ['Column1', 'Column2'],
        colModel: [
            { name: 'colum1', index: 'colum1', sortable: true, width: 100 },
            { name: 'colum2', index: 'colum2', sortable: true, width: 100 }
        ],
        pager: '#MyPager',
        rowList: [10, 50, 100],
        rowNum: 10,
        viewrecords: false,
        shrinkToFit: false,
        rownumbers: true,
        hidegrid: false,
        emptyrecords: "No records."
    });

    $("#cmdSearch").click(function() {
        myGrid.trigger('reloadGrid',[{page:1}]);
    });
});

В коде я использую идею использования функций как свойство postData, которое я описал здесь .Можно уменьшить ручку «щелчка» до myGrid.trigger('reloadGrid');.В случае при любой перезагрузке сетки (например, при сортировке или подкачке страниц) будут использоваться текущие значения из элементов управления $("#Filter1") и $("#Filter2").Сама сетка не будет разрушена и воссоздана.вместо этого будут загружены только данные сетки.О различных дополнительных параметрах reloadGrid см. здесь .

Небольшое изменение от pager: $('#MyPager') до pager: '#MyPager' Я хочу небольшой комментарий.Если вы посмотрите на исходный код jqGrid , вы найдете

if(typeof ts.p.pager == "string") {if(ts.p.pager.substr(0,1) !="#") {
    ts.p.pager = "#"+ts.p.pager;}
} else { ts.p.pager = "#"+ $(ts.p.pager).attr("id");}

Так что если вы используете параметр pager в форме $('#MyPager'), если он будет "нормализован" до '#MyPager».После прочтения я использую только синтаксис pager: '#MyPager'.