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

时间:2011-07-29 15:17:08

标签: asp.net-mvc jqgrid

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

第一个问题有没有人可以将当前列标题过滤器设置传达给高级过滤器?

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

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

2 个答案:

答案 0 :(得分:17)

我觉得你的问题非常有趣,所以我准备了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');
}

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

如果您使用以下字段填充the demo的高级搜索对话框

enter image description here

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

enter image description here

(我将“总计”列标记为ignoreCase: true无法搜索,以便仅显示所有内容在该情况下都正常工作)

可以看到搜索工具栏的除“金额”之外的所有字段都填充了搜索对话框中的值。该字段未填充,因为我们使用“更大或相等”操作而不是“相等”。函数search: false仅填充可由

生成的搜索工具栏的元素

作为提醒我应该提及,如果使用Filter Toolbar,定义refreshSerchingToolbar的{​​{3}}选项非常重要。对于所有非字符串列包含(日期,数字,选择,整数,货币),将'eq'作为colModel数组的第一个元素非常重要。有关详细信息,请参阅searchoptions.sopthere

如果将“高级对话框”的过滤器更改为以下

enter image description here

你会有所期待的

enter image description here

最后,我添加了sopt函数的代码:

refreshSerchingToolbar

更新:如果使用here 4.13.1或更高版本,则不再需要上述代码。它包含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); } } } } } } }; 的新默认选项loadFilterDefaults: true,用于刷新过滤器工具栏的值和过滤器操作(如果filterToolbar选项{{1}如果searchOperators: truefilterToolbar已设置(应用过滤器),则为ised)。免费jqGrid刷新postData.filters上的过滤器工具栏(如果设置了search: true)或明确触发事件jqGridAfterLoadComplete

答案 1 :(得分:1)

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

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

应该这样做。

感谢Oleg