关于jqGrid列标题过滤器和高级过滤对话框的两个相关问题

Question

在使用jqGrid开发我的第一个ASP.NET MVC 3应用程序来显示一些数据时,我正在使用列标题过滤器,并且还允许完成高级过滤器工具栏过滤.独立地这些东西工作得很好.

第一个问题 -有没有人能够将当前列标题过滤器设置传达给高级过滤器？

例如,用户可以过滤"冰淇淋名称"列,输入部分名称,例如"巧克力",它将过滤到"巧克力爆炸","黑巧克力"等 - 很棒.最好的方法是打开高级过滤器,并在高级过滤器中自动填充"包含'巧克力'"列过滤器.我认识到另一个方向(有人可以对同一列进行AND或OR两个值,例如'Chocolate'Or'Carramel')成为问题,但在另一个方向上,似乎有可能.也许这只是我缺少的网格设置.有人解决了吗？

第二个问题 -我目前可以使用列标题过滤器进行一些过滤,在网格中显示一些结果集,然后进入高级过滤器对话框并设置不同的过滤器.这将显示正确的结果,但不清除列标题过滤器,给人的印象是过滤不起作用.如何在用户单击对话框上的"查找"按钮后重置这些列标题过滤器？

Answer 1

我发现你的问题非常有趣,所以我准备了演示,演示了如何在一个网格中组合高级搜索对话框和工具栏搜索.

一个重要但简单的技巧是使用recreateFilter: true.默认情况下,搜索对话框将创建一次,然后将仅隐藏或显示.结果,postData.filters参数将不会刷新.在设置recreateFilter: true填充高级搜索对话框的问题后,将解决搜索工具栏中的值.我个人设置默认搜索选项如下

$.extend(
    $.jgrid.search,
    {
        multipleSearch: true,
        multipleGroup: true,
        recreateFilter: true,
        overlay: 0
    }
);

现在解决方案的更复杂部分是refreshSerchingToolbar我写的功能.功能不是那么简单,但它只是在使用:

loadComplete: function () {
    refreshSerchingToolbar($(this), 'cn');
}

最后一个参数是您用作defaultSearch搜索工具栏方法属性的相同参数filterToolbar(默认值为'bw',但我个人更喜欢使用'cn'并设置jqGrid参数ignoreCase: true).

如果使用以下字段填充演示的高级搜索对话框

然后单击"查找"按钮,您将拥有以下网格:

(我将'Total'列标记为不可搜索的,search: false只显示所有内容都正常工作)

可以看到搜索工具栏的除"金额"之外的所有字段都填充了搜索对话框中的值.该字段未填充,因为我们使用"更大或相等"操作而不是"相等".该函数refreshSerchingToolbar仅填充搜索工具栏中可由其生成的元素

作为提醒我应该提一下,如果使用过滤器工具栏,定义的searchoptions.sopt选项非常重要colModel.对于所有非字符串列包含(日期,数字,选择,整数,货币),将'eq'作为sopt数组的第一个元素是非常重要的.见这里和这里的细节.

如果将"高级对话框"的过滤器更改为以下内容

你会有所期望的

最后我包含了refreshSerchingToolbar函数的代码:

var getColumnIndex = function (grid, columnIndex) {
        var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
        for (; i < l; i += 1) {
            if ((cm[i].index || cm[i].name) === columnIndex) {
                return i; // return the colModel index
            }
        }
        return -1;
    },
    refreshSerchingToolbar = function ($grid, myDefaultSearch) {
        var postData = $grid.jqGrid('getGridParam', 'postData'), filters, i, l,
            rules, rule, iCol, cm = $grid.jqGrid('getGridParam', 'colModel'),
            cmi, control, tagName;

        for (i = 0, l = cm.length; i < l; i += 1) {
            control = $("#gs_" + $.jgrid.jqID(cm[i].name));
            if (control.length > 0) {
                tagName = control[0].tagName.toUpperCase();
                if (tagName === "SELECT") { // && cmi.stype === "select"
                    control.find("option[value='']")
                        .attr('selected', 'selected');
                } else if (tagName === "INPUT") {
                    control.val('');
                }
            }
        }

        if (typeof (postData.filters) === "string" &&
                typeof ($grid[0].ftoolbar) === "boolean" && $grid[0].ftoolbar) {

            filters = $.parseJSON(postData.filters);
            if (filters && filters.groupOp === "AND" && typeof (filters.groups) === "undefined") {
                // only in case of advance searching without grouping we import filters in the
                // searching toolbar
                rules = filters.rules;
                for (i = 0, l = rules.length; i < l; i += 1) {
                    rule = rules[i];
                    iCol = getColumnIndex($grid, rule.field);
                    cmi = cm[iCol];
                    control = $("#gs_" + $.jgrid.jqID(cmi.name));
                    if (iCol >= 0 && control.length > 0) {
                        tagName = control[0].tagName.toUpperCase();
                        if (((typeof (cmi.searchoptions) === "undefined" ||
                              typeof (cmi.searchoptions.sopt) === "undefined")
                             && rule.op === myDefaultSearch) ||
                                (typeof (cmi.searchoptions) === "object" &&
                                    $.isArray(cmi.searchoptions.sopt) &&
                                    cmi.searchoptions.sopt[0] === rule.op)) {

                            if (tagName === "SELECT") { // && cmi.stype === "select"
                                control.find("option[value='" + $.jgrid.jqID(rule.data) + "']")
                                    .attr('selected', 'selected');
                            } else if (tagName === "INPUT") {
                                control.val(rule.data);
                            }
                        }
                    }
                }
            }
        }
    };

更新:在免费使用jqGrid 4.13.1或更高版本的情况下,不再需要上面的代码.它包含了新的默认选项loadFilterDefaults: true的filterToolbar,这刷新过滤器工具栏的价值观和过滤操作(如果searchOperators: true的选项filterToolbar是ISED)如果postData.filters和search: true设置(过滤器被应用).自由jqGrid刷新过滤器工具栏jqGridAfterLoadComplete(如果loadFilterDefaults: true已设置)或是否jqGridRefreshFilterValues显式触发事件.