我需要帮助自动化jqGrid过滤器

时间:2011-02-09 20:02:54

标签: javascript jquery jqgrid

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

到目前为止,有很多Google,试验和错误以及汗水,我有以下工作:

- >我可以加载/保存排序列&在会话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 });

1 个答案:

答案 0 :(得分:4)

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

1)我认为您使用jqGrid的服务器端datatype参数,如'json'或'xml'。 2)您不使用loadonce:true参数。通常,如果可以从具有loadonce:true的网格重新加载服务器,但是在这种情况下,您必须将datatype参数的值重置为初始值(一个来自值'json'或' XML')。

以下三个旧答案:this(如果是single value searching)和this(如果是advanced searchingthe toolbar searching则附加参数{{ 1}})将为您提供有关设置搜索过滤器和重新加载网格的足够信息对应于新过滤器。 Another answer显示了如果不再需要搜索过滤器的清除方法。

第一次使用过滤器加载网格是另一个问题。它可以很容易实现。您应该使用stringResult:true代替您真正需要的datatype:"local"datatype:"json"。在第一次加载时,jqGrid的datatype:"xml"参数将被忽略,而jqGrid不向服务器发送请求。然后根据需要设置过滤器,然后使用url

$("#youGridId").trigger("reloadGrid");在你的情况下不起作用的原因我不能确切地知道,但我想你没有设置jqGrid的reloadGrid参数,这个参数经常与search:true参数的_search属性(请参阅here)。