自动化 jqGrid 过滤器

问题描述 投票:0回答:1

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

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

-> 我可以在会话 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');

注意:“clearFilter”和“addFilter”是我添加到 jqGrid 的扩展函数,用于简化在网格上添加和删除过滤器。 此时它们完全按照预期工作。

正如您在最后三行代码中看到的,我尝试使用内置函数,以及直接查找按钮,甚至只是强制刷新整个网格。 无论哪种方式,网格都不会尝试获取新数据(我正在使用 Fiddler 来监视它)。

我在尝试强制网格重新加载新过滤器时做错了什么?

而且,如果您知道怎么做,您能给我一些关于如何使网格的初始负载尊重这些过滤器的指导吗?

蒂亚

托尼

这是完整的网格配置(减去额外的列和一些 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 });
javascript jquery jqgrid
1个回答
4
投票

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

1)我想你使用jqGrid的服务器端

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

以下三个旧答案:this(在单值搜索的情况下)和this(在高级搜索带有附加参数stringResult:true

的工具栏搜索
)将为您提供足够的信息关于设置搜索过滤器并重新加载与新过滤器相对应的网格。 另一个答案展示了如何清除不再需要的搜索过滤器。

第一次使用过滤器加载网格是另一个问题。它可以非常容易地实现。您应该只使用

datatype:"local"
而不是您真正需要的
datatype:"json"
datatype:"xml"
。在这种情况下,jqGrid 的
url
参数将在第一次加载时被忽略,并且 jqGrid 不会向服务器发送请求。然后您根据需要设置过滤器,然后才使用
$("#youGridId").trigger("reloadGrid");

为什么

reloadGrid
在您的情况下不起作用,我无法确切知道,但我想您没有设置 jqGrid 的
search:true
参数,该参数经常与 jqGrid 的
_search
属性混淆
postData
参数(参见此处)。

© www.soinside.com 2019 - 2024. All rights reserved.