首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >我需要中小企业帮助自动化的jqGrid过滤器,请

我需要中小企业帮助自动化的jqGrid过滤器,请
EN

Stack Overflow用户
提问于 2011-02-10 04:02:54
回答 1查看 4.7K关注 0票数 5

简而言之,我需要做的就是在jqGrid加载时自动对其应用一组排序条件和数据过滤器。其意图是用户将从大约10个预先填充的过滤器开始,然后,如果他们愿意,他们可以改变这些过滤器或排序,以他们认为合适的方式。

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

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

-> I可以使用预定义的搜索筛选器加载搜索对话框。在网格加载之后,我可以打开模式对话框并看到适当的过滤器,如果我单击"Find“,相应的数据将发送到服务器,并将正确的结果返回到屏幕。

现在最让我头疼的事情,我想,是最简单的部分,但我想不起来了。我似乎不能做以下任何一件事:

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

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

因为我今天可以手动点击"find“按钮,并且它起作用了,所以我认为"B”将是一个很好的下一步。因此,在我的gridComplete函数中,我有以下代码:

代码语言:javascript
复制
    $('#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
        {}
    );

根据要求,下面是我为add/clear filter准备的代码:

代码语言:javascript
复制
/*
    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 });
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-02-10 05:00:05

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

1)我假设您使用jqGrid的服务器端datatype参数,如'json‘或'xml’。2)没有使用loadonce:true参数。一般来说,如果可以从具有loadonce:true的网格重新加载服务器,但在这种情况下,您必须将datatype参数的值重置为初始值(从值'json‘或’xml‘中选择一个)。

以下三个老答案:this (在single value searching的情况下)和this (在advanced searchingthe toolbar searching的情况下,带有额外的参数stringResult:true)将为您提供关于设置搜索筛选器和重新加载与新筛选器对应的网格的足够信息。Another answer展示了如何在不再需要搜索筛选器时将其清除。

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

我不能确切地知道为什么reloadGrid在您的情况下不能工作,但我猜您没有设置jqGrid的search:true参数,它经常与postData参数的_search属性混淆(请参阅here)。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4949837

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档