javascript - 我需要 sme 帮助自动化 jqGrid 过滤器，拜托

Question

好吧，简而言之，我需要做的是在 jqGrid 加载时自动应用一组排序标准和数据过滤器。其目的是用户将从大约 10 个预填充的过滤器开始，然后，如果他们选择，他们可以更改这些过滤器或他们认为合适的排序。

到目前为止，经过大量 Google 搜索、反复试验和汗水，我完成了以下工作:

-> 我可以在 session cookie 中加载/保存排序列和排序顺序。

-> 我可以使用预定义的搜索过滤器加载搜索对话框。网格加载后，我可以打开模态对话框并查看适当的过滤器，如果我单击“查找”，适当的数据将发布到服务器并将正确的结果返回到屏幕。

我认为，现在困扰我的是最简单的部分，但我却忽略了它。我似乎无法执行以下任一操作:

( A ) 理想的情况是，如果我可以将这些过滤器附加到网格，并且它在初始加载之前发布数据，以便只有一次到服务器的行程。

( B ) 可行的解决方案虽然不太理想，但网格首先加载未过滤数据的第一页，然后应用过滤器并重新查询服务器以获取过滤后的数据。

因为我今天可以手动单击“查找”按钮并且它有效，所以我认为“B”将是一个很好的下一步。因此，在我的 gridComplete 函数中，我有以下代码:

    $('#AccountGrid').clearFilter({gridName:'AccountGrid', pagerName:'AccountPager'});
    $('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:1, op:'ne'});
    $('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:3, op:'ne'});
    // $('#fbox_AccountGrid').searchFilter().search();
    // $('#fbox_AccountGrid .ui-search').click();
    $('#AccountGrid').trigger('reloadGrid');

NOTE: "clearFilter" and "addFilter" are extension functions I have added to jqGrid to simplify adding and removing filters on the grid.  They work exactly as desired at this point.

As you can see with those last three lines of code, I have tried using the built-in function, as well as going after the find button directly and even just forcing the entire grid to refresh.  Either way, there is no attempt by the grid to go get new data (I am using Fiddler to watch for it).

What am I doing wrong in trying to force the grid to reload with the new filters?

And, if you know how, can you give me some direction on how to get the initial load of the grid to respect these filters?

TIA

Tony


Here is the full grid configuration (minus the extra columns and some colModel "cruft"):


    jQuery('#AccountGrid').jqGrid({
        url: '<my URL>',
        width: 950,
        height: 330,
        shrinkToFit: 'true',
        datatype: 'json',
        mtype: 'POST',
        multiselect: true,
        multiboxonly: true,
        multiselectWidth: 20,
        colNames: [
            'Account ID'
        ],
        colModel: [
            { name: 'AccountID', index: 'AccountID', sortable: false, hidden:false, search:true }
        ],
        gridComplete: function () {
            // add the search criteria to the grid
            if (initialLoad == true){
                $('#AccountGrid').clearFilter({gridName:'AccountGrid', pagerName:'AccountPager'});
                $('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:1, op:'ne'});
                $('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:3, op:'ne'});
                // $('#fbox_AccountGrid').searchFilter().search();
                // $('#fbox_AccountGrid .ui-search').click();
                $('#AccountGrid').trigger('reloadGrid');
                initialLoad = false;
            }
        },
        jsonReader: {
            repeatitems: false,
            id: 'AccountID'
        },
        pager: jQuery('#AccountPager'),
        rowNum: 50,
        rowList: [10, 15, 25, 50, 75, 100],
        onSortCol : function (sortname, indexColumn, sortorder){
            $.cookie('AccountGrid_sortname', sortname);
            $.cookie('AccountGrid_sortorder'  , sortorder);
        },
        sortname : $.cookie('AccountGrid_sortname') ? $.cookie('AccountGrid_sortname') : 'AccountID',
        sortorder: $.cookie('AccountGrid_sortorder') ? $.cookie('AccountGrid_sortorder') : 'asc',
        viewrecords: true,
        imgpath: ''
    });

    $('#AccountGrid').jqGrid('navGrid','#AccountPager', 
        { view: false, add: false, edit: true, del: false,
          alertcap:'No Account Selected',
          alerttext: 'Please select an Account from the grid before performing this operation.',
          editfunc: showAccountEditDialog },
        {}, // default settings for edit
        {}, // default settings for add
        {}, // delete
        {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
        {}
    );

并且，根据要求，这是我用于添加/清除过滤器的代码:

/*
    This is a grid extension function that will insert a new filter criteria
    on the specified grid with the provided field, operation & data values
*/
(function ($) {
    jQuery.jgrid.addSearchFilter =
    {
        // get/set the parameters
        addFilter: function (options) {
            var grid = $(this);
            // get offset values or assign defaults
            var settings = $.extend({
                gridName: '',
                field: '',
                data: '',
                op: ''
            }, options || {});
            // get the column model object from the grid that matches the provided name
            var colModel = grid.getGridParam('colModel');
            var column;
            for (var i = 0; i < colModel.length; i++) {
                if (colModel[i].name == options.field){
                    column = colModel[i];
                    break;
                }
            }
            colModel = null;
            if (column){
                // if the last filter has a value, we need to create a new one and not overwrite the existing ones
                if ($('#fbox_' + options.gridName + ' .sf .data input').last().val()){
                    $('#fbox_' + options.gridName).searchFilter().add();
                }
                // assign the selections to the search dialog
                $('#fbox_' + options.gridName + ' .sf .fields select.field').last().val(column.index).change();
                $('#fbox_' + options.gridName + ' .sf .data input').last().val(options.data);
                $('#fbox_' + options.gridName + ' .sf .ops select.default').last().val(options.op).change();
            }
        }
    }
})(jQuery);
jQuery.fn.extend({ addFilter: jQuery.jgrid.addSearchFilter.addFilter });

/*
    This is a grid extension function that will clear & reset the filter criteria
*/
(function ($) {
    jQuery.jgrid.clearSearchFilter =
    {
        // get/set the parameters
        clearFilter: function (options) {
            var grid = $(this);
            // get offset values or assign defaults
            var settings = $.extend({
                gridName: '',
                pagerName: ''
            }, options || {});
            // clear the filters and "pop" the dialog to force the HTML rendering
            $('#fbox_' + options.gridName).searchFilter().reset();
            $('#' + options.pagerName + ' .ui-icon-search').click();
            $('#fbox_' + options.gridName).searchFilter().close();
        }
    }
})(jQuery);
jQuery.fn.extend({ clearFilter: jQuery.jgrid.clearSearchFilter.clearFilter });

Answer 1

首先，因为您没有发布定义 jqGrid 的代码，所以我自己做了一些假设。我尝试基于您问题中的间接信息。

1) 我假设您使用 jqGrid 的服务器端 datatype 参数，例如“json”或“xml”。2) 你不使用 loadonce:true 参数。一般来说，如果可以使服务器从具有 loadonce:true 的网格重新加载，但在这种情况下，您必须将 datatype 参数的值重置为初始值(一个来自值“json”或“xml”)。

以下三个旧答案:this(在 single value searching 的情况下)和 this(在 advanced searching 或 the toolbar searching 的情况下带有附加参数 stringResult:true)将为您提供有关设置搜索过滤器和重新加载网格对应于新过滤器。 Another answer 展示了如何清除不再需要的搜索过滤器。

首次使用过滤器加载网格是另一个问题。它可以很容易地实现。您应该只使用 datatype:"local" 而不是您真正需要的 datatype:"json" 或 datatype:"xml" 。在这种情况下，jqGrid 的 url 参数将在第一次加载时被忽略，并且 jqGrid 不会向服务器发送请求。然后根据需要设置过滤器，然后才使用 $("#youGridId").trigger("reloadGrid");

reloadGrid 在你的情况下不起作用的原因我无法确切知道，但我想你没有设置 search:true 参数人们经常将 jqGrid 与 postData 参数的 _search 属性混淆(参见 here)。