【问题标题】:Two related questions on jqGrid column header filters and the advanced filtering dialog关于 jqGrid 列标题过滤器和高级过滤对话框的两个相关问题
【发布时间】:2011-10-16 01:26:47
【问题描述】:

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

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

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

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

【问题讨论】:

    标签: asp.net-mvc jqgrid


    【解决方案1】:

    我觉得你的问题很有趣,所以我准备了the demo,它演示了如何将Advanced Searching 对话框和Toolbar Searching 组合在一个网格中。

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

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

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

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

    最后一个参数和你使用的搜索工具栏方法filterToolbardefaultSearch属性相同的参数(默认值为'bw',但我个人更喜欢使用'cn'并设置jqGrid参数@987654342 @)。

    如果您在the demo 的高级搜索对话框中填写以下字段

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

    (我将search: false 的“总计”列标记为不可搜索,仅表明在这种情况下所有工作也正常)

    可以看到搜索工具栏上除“金额”之外的所有字段都填充了搜索对话框中的值。该字段未填写,因为我们使用了“grater or equal”操作而不是“equal”。函数refreshSerchingToolbar 只填充搜索工具栏的元素,这些元素可以由

    提醒一下,在使用Filter Toolbar 的情况下,定义colModelsearchoptions.sopt 选项非常重要。对于所有包含(日期、数字、选择、int、货币)的非字符串列,将“eq”作为sopt 数组的第一个元素非常重要。详情请参阅herehere

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

    你会如愿以偿

    最后我包含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);
                                }
                            }
                        }
                    }
                }
            }
        };
    

    更新:如果使用free jqGrid 4.13.1 或更高版本,则不再需要上述代码。它包含filterToolbar 的新默认选项loadFilterDefaults: true,它刷新过滤器工具栏的值和过滤器操作(如果filterToolbarsearchOperators: true 选项被选中)如果@987654353 @ 和 search: true 已设置(应用过滤器)。 Free jqGrid 刷新jqGridAfterLoadComplete 上的过滤器工具栏(如果设置了loadFilterDefaults: true)或者如果事件jqGridRefreshFilterValues 被显式触发。

    【讨论】:

    • @itsmatt:这是你需要的吗?
    • 说得非常透彻,奥列格 - 我感谢您的深度回复!
    • 我在使用日期过滤时遇到的一个复杂问题是,我可能想要过滤月份级别,并且到目前为止已经通过使用 GT(大于)作为我的运算符来解决这个问题,所以如果我想请参阅 6 月的数据,我可能会过滤到 GT 2011 年 6 月 1 日,虽然并不理想,但它为我提供了 6 月的所有数据(以及作为副作用,7 月的数据)。不过,这可能只是日期选择器中的一个设置 - 需要查看它,我认为 EQ 会很好地工作。
    • @Rahul:不客气!我使用自己非常接近的实现,并发现它非常实用。我使用的主要增强功能是在过滤列的列标题上设置"ui-state-highlight"。即使来自postData.filters 的过滤器(由高级搜索对话框设置)太复杂,我也会突出显示列标题。以用户查看过滤网格的列的方式。
    • @FrankFajardo:谢谢!我在一个项目(名称为 Testportal)中使用了该代码,其中一些常用功能被定义为全局。所以这是剪切和粘贴错误。我现在修复了代码。
    【解决方案2】:

    我知道这是一篇旧帖子 - 但如果您在同一页面上有多个网格,上述代码可能会将过滤器文本添加到错误的网格中。

    在 refreshSearchingToolbar 的第一个循环中更改此项,来自

    control = $("#gs_" + $.jgrid.jqID(cm[i].name));
    

    control = $("#gview_"+$grid.attr('id')+" #gs_" + $.jgrid.jqID(cm[i].name));
    

    这在第二个循环中来自

    control = $("#gs_" + $.jgrid.jqID(cmi.name));
    

    control = $("#gview_"+$grid.attr('id')+" #gs_" + $.jgrid.jqID(cmi.name));
    

    应该可以解决问题。

    向奥列格致敬

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-15
      • 1970-01-01
      • 1970-01-01
      • 2011-06-29
      • 1970-01-01
      相关资源
      最近更新 更多