关于 jqGrid 列标题过滤器和高级过滤对话框的两个相关问题 [英] Two related questions on jqGrid column header filters and the advanced filtering dialog

查看:27
本文介绍了关于 jqGrid 列标题过滤器和高级过滤对话框的两个相关问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

第一个问题 - 有没有人将当前列标题过滤器设置传达给高级过滤器的解决方案?

例如,用户可以过滤冰淇淋名称"列,输入部分名称,例如巧克力",然后过滤到巧克力爆炸"、黑巧克力"等.- 伟大的.打开高级过滤器并让包含‘巧克力’"列过滤器自动填充到高级过滤器中会更好.我认识到另一个方向(有人可以对同一列的两个值进行 AND 或 OR 运算,例如巧克力"或焦糖")会出现问题,但在另一个方向上,这似乎是可能的.也许这只是我缺少的网格设置.有人解决了吗?

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

解决方案

我觉得你的问题很有趣,所以我准备了 定义 4.13.1 或更高版本.它包含 filterToolbar 的新默认选项 loadFilterDefaults: true,它刷新过滤器工具栏的值和过滤器操作(如果 searchOperators: true 选项 filterToolbar ised) 如果 postData.filterssearch: true 被设置(过滤器被应用).免费 jqGrid 在 jqGridAfterLoadComplete 上刷新过滤器工具栏(如果设置了 loadFilterDefaults: true)或者如果事件 jqGridRefreshFilterValues 被显式触发.

In developing my first ASP.NET MVC 3 app using the jqGrid to display some data, I'm using the column header filters and also allowing for the advanced filter toolbar filtering to be done. Independently these things work pretty well.

First question - Has anyone a solution for communicating the current column header filter settings to the advanced filters?

As an example, a user can filter on the "Ice Cream Name" column, entering a partial name, e.g., "Chocolate", and it'll filter down to "Chocolate Explosion", "Dark Chocolate", etc. - great. What would be nice would be to open the advanced filter and have that "contains 'Chocolate'" column filter automatically populated in the advanced filter. I recognize that the other direction (where someone could AND or OR two values for the same column, e.g. 'Chocolate' OR 'Caramel') becomes problematic but in the other direction, it seems like it might be possible. Perhaps this is just a setting of the grid I'm missing. Anyone solved this?

Second question - I currently can do some filtering with the column header filters, show some result set in the grid and then go into the advanced filter dialog and set up a different filter. That will display the correct results but the column header filters are not cleared, giving the impression that the filtering is not working. How can I reset those column header filters after the use clicks the "Find" button on the dialog?

解决方案

I find your question very interesting, so I prepared the demo which demonstrate how one can combine Advanced Searching dialog and Toolbar Searching in one grid.

One important, but simple trick is the usage of recreateFilter: true. Per default the searching dialog will be created once and then will be only hide or show. As the result the postData.filters parameter will be not refreshed. After setting recreateFilter: true the problem with filling of the advanced searching dialog with the values from the searching toolbar will be solved. I personally set the default searching options as the following

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

Now to more complex part of the solution is the function refreshSerchingToolbar which I wrote. The function is not so simple, but it's simply in use:

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

The last parameter is the same parameter which you used as defaultSearch property of the searching toolbar method filterToolbar (the default value is 'bw', but I personally prefer to use 'cn' and set jqGrid parameter ignoreCase: true).

If you fill the advanced searching dialog of the demo with the following field

and click the "Find" button, you will have the following grid:

(I marked the 'Total' column as non-searchable with respect of search: false to show only that all works correctly in the case also)

One can see that all fields of the searching toolbar excepting "Amount" are filled with the values from the searching dialog. The field are not filled because we used "grater or equal" operation instead of "equal". The function refreshSerchingToolbar fills only the elements of the searching toolbar which can be produced by the

Just as a reminder I should mention that in case of the usage of Filter Toolbar it is very important to define searchoptions.sopt options of the colModel. For all non-string column contains (dates, numbers, selects, int, currency) it is extremely important to have 'eq' as the first element of the sopt array. See here and here for details.

If you change the filter of the Advanced Dialog to the following

you will have as expected

At the end I include the code of the refreshSerchingToolbar function:

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);
                            }
                        }
                    }
                }
            }
        }
    };

UPDATED: The above code is no more needed in case of usage free jqGrid 4.13.1 or higher. It contains the new default option loadFilterDefaults: true of the filterToolbar, which refreshes the values of the filter toolbar and the filter operations (if searchOperators: true option of filterToolbar is ised) if postData.filters and search: true are set (the filter is applied). Free jqGrid refreshes the filter toolbar on jqGridAfterLoadComplete (if loadFilterDefaults: true are set) or if the event jqGridRefreshFilterValues are explicitly triggered.

这篇关于关于 jqGrid 列标题过滤器和高级过滤对话框的两个相关问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆