我觉得你的问题很有趣,所以我准备了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');
}
最后一个参数和你使用的搜索工具栏方法filterToolbar的defaultSearch属性相同的参数(默认值为'bw',但我个人更喜欢使用'cn'并设置jqGrid参数@987654342 @)。
如果您在the demo 的高级搜索对话框中填写以下字段
然后单击“查找”按钮,您将拥有以下网格:
(我将search: false 的“总计”列标记为不可搜索,仅表明在这种情况下所有工作也正常)
可以看到搜索工具栏上除“金额”之外的所有字段都填充了搜索对话框中的值。该字段未填写,因为我们使用了“grater or equal”操作而不是“equal”。函数refreshSerchingToolbar 只填充搜索工具栏的元素,这些元素可以由
提醒一下,在使用Filter Toolbar 的情况下,定义colModel 的searchoptions.sopt 选项非常重要。对于所有包含(日期、数字、选择、int、货币)的非字符串列,将“eq”作为sopt 数组的第一个元素非常重要。详情请参阅here 和here。
如果您将高级对话框的过滤器更改为以下内容
你会如愿以偿
最后我包含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,它刷新过滤器工具栏的值和过滤器操作(如果filterToolbar 的searchOperators: true 选项被选中)如果@987654353 @ 和 search: true 已设置(应用过滤器)。 Free jqGrid 刷新jqGridAfterLoadComplete 上的过滤器工具栏(如果设置了loadFilterDefaults: true)或者如果事件jqGridRefreshFilterValues 被显式触发。