jqGrid和搜索过滤器.重新填充数据的最佳方法 [英] jqGrid and search filter. Best way to repopulate data

问题描述

我已经使用jqGrid很长时间了，但是从没有深入研究性能细节.
我不使用内置的jqGrid搜索表单，因为我更喜欢拥有自己的工具栏，用户可以在其中输入一些他/她想要过滤的数据.

I've been playing with jqGrid for quite a long time now but never gone deeper into details about performance.
I don't use the built-in jqGrid search form cause I prefer to have my own toolbar where the user inputs some data he/she wants to filter.

我一直将网格包装在一个函数中

I've always wrapped my grid in a function:

$(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).我想知道这是否是最好的方法，还是可能存在一些性能/内存问题?

and unloaded it (GridUnload) before recreating it. I was wondering if this is the best way to do it or there might be some performance/memory issues?

推荐答案

在示例中使用GridUnload()并不是最佳方法.我会按照以下方式重写您的代码

The usage of GridUnload() in the example is not the best way. I would rewrite you code as following

$(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的属性，我在GridUnload()中描述了myGrid.trigger('reloadGrid');.在所有网格重新加载的情况下(例如在排序或分页时)，将使用$("#Filter1")和$("#Filter2")控件中的当前值.网格本身不会被破坏和重新创建.取而代之的是，只会重新加载网格数据.关于reloadGrid的其他附加参数，请参见此处.

In the code I use the idea of usage functions as the property of postData which I described here. One can reduce the 'click' handle to the myGrid.trigger('reloadGrid');. In the case at all grid reloading (for example at the sorting or paging) will be used the current values from the $("#Filter1") and $("#Filter2") controls. The grid itself will be not destroyed and recreated. instead of that only the grid data will be reloaded. About different additional parameters of reloadGrid see here.

从pager: $('#MyPager')到pager: '#MyPager'的小变化，我想发表一点评论.如果您查看 jqGrid源代码你会发现

Small change from pager: $('#MyPager') to pager: '#MyPager' I want a little comment. If you look at the jqGrid source code you will find

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

因此，如果您以$('#MyPager')形式使用pager参数，则if将被规范化"为'#MyPager'.读完此书后，我仅使用pager: '#MyPager'语法.

So if you use pager parameter in the form $('#MyPager') if will be "normalized" to '#MyPager'. After I read this I use only pager: '#MyPager' syntax.

这篇关于jqGrid和搜索过滤器.重新填充数据的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！