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

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

问题描述

在使用的jqGrid显示一些数据开发我的第一个ASP.NET MVC 3应用程序,我使用的列标题过滤器和还允许高级过滤器工具栏上的过滤工作要做。这些独立工作的事情pretty很好。

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?

作为一个例子,一个用户可以过滤在冰淇淋名称一栏,输入部分名称,如巧克力,它会渗透到巧克力爆炸,巧克力等。 - 伟大的。什么是好的会打开先进的过滤器,并有含有'巧克力'栏过滤器高级过滤器自动填充。我承认,其他方向(如果有人可以AND或OR为同一列,例如'巧克力'或'佳美'两个值)成为问题,但在其他方向,现在看来似乎是可能的。也许这只是我缺少电网的设置。任何人都解决了这个?

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?

第二个问题 - 我现在可以做一些过滤的列标题过滤器,表现出一定的结果定格,然后进入高级过滤器对话框,设置不同的过滤器。这将显示正确的结果,但列标题过滤器不会被清除,从而使得滤波不正常的IM pression。我怎么能重置这些列标题过滤器的使用点击查找按钮关闭对话框后?

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?

推荐答案

我觉得你的问题很有意思,所以我prepared的演示其中演示了如何可以结合的高级搜索对话和工具栏搜索在一个网格。

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.

一个重要的,但简单的技巧就是 recreateFilter的用法:真正的。每默认情况下,搜索对话框将被创建一次,然后将只隐藏或显示。作为结果的 postData.filters 参数将不会刷新。设置完成后 recreateFilter:真正的已用搜索工具栏的数值先进的搜索对话框填充的问题将得到解决。我个人设置默认搜索选项,如下

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

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

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

最后一个参数是你作为 defaultSearch 搜索工具栏的方法财产 filterToolbar 相同的参数(默认值是'体重',但我个人preFER使用'CN',并设置参数的jqGrid IGNORECASE:真正的

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).

如果您填写与演示以下字段

,并单击查找按钮,您将有以下电网:

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)

可以看出,搜索工具栏的所有领域除外金额填充有来自搜索对话框的值。现场没有填写,因为我们使用了刨丝器或等于的操作,而不是平等。功能 refreshSerchingToolbar 填充只能由生产的搜索工具栏的元素

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

正如提醒我要指出,在的使用的情况下,过滤器工具栏是非常重要的定义 searchoptions.sopt在 colModel 选项。对于所有非字符串列包含(日期,数字,选择,INT,货币),是以有'情商'作为第一要素非常重要的 SOPT 阵列。见<一href=\"http://stackoverflow.com/questions/5499995/jqgrid-search-in-the-middle-by-default/5537856#5537856\">here和<一个href=\"http://stackoverflow.com/questions/4762645/jqgrid-filter-or-search-by-date-not-working-client-side/4767495#4767495\">here了解详情。

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

您将有预期

最后我包括 refreshSerchingToolbar 函数的code:

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

更新时间::以上code没有更多需要使用的情况下的免费的jqGrid 的4.13.1或更高。它包含了新的默认选项 loadFilterDefaults:真正的 filterToolbar ,它刷新过滤器工具栏的值的和过滤器操作的(如 searchOperators:真正的的选项 filterToolbar 是ISED)如果 postData.filters 搜索:真正的设置(过滤器被应用)。免费的jqGrid刷新上 jqGridAfterLoadComplete 过滤器工具栏(如 loadFilterDefaults:真正的设置),或者如果事件 jqGridRefreshFilterValues​​ 明确地触发。

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天全站免登陆