jqgrid：如何在组合框中定义过滤器预设/模板？ [英] jqgrid: How to define filter presets / templates inside a combo-box?
本文介绍了jqgrid：如何在组合框中定义过滤器预设/模板？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个jqgrid包含一些要过滤的数据。我想定义一个带有一些预定义过滤器集/模板的组合框。
如果用户选择组合框的项目，网格应该自动应用组合过滤器。优选地，组合框应当被集成到工具栏或jqGrid的寻呼机中，但是也可以在html页面中。
例如：
COMBO BOX
项目模板过滤器参数
___________
| << Timeout = true
|上周| << OpenDate之间02/13/2012和02/16/2012
|上个月| << OpenDate之间01/01/2012和02/16/2012
| ......... | ...
预先感谢您的帮助
解决方案
jqGrid支持。重要的是要了解， refreshSerchingToolbar 函数在过滤器工具栏中只填充可以由过滤器精确表示的信息。例如，Closed行的过滤器可以在过滤器工具栏中显示（参见上图），但是上周和上个月日期的间隔。在这种情况下，网格中的数据将被过滤，但过滤器工具栏的相应字段保持为空。
您可以在下面找到演示代码的最重要部分
var $ grid = $（＃list），
initDate = function（elem）{
$（elem）.datepicker（{
dateFormat ：'dd-M-yy'，
autoSize：true，
changeYear：true，
changeMonth：true，
showButtonPanel：true，
showWeek：true
}）;
}，
numberTemplate = {formatter：'number'，align：'right'，sorttype：'number'，editable：true / *，
searchoptions：{sopt： ，'ne'，'lt'，'le'，'gt'，'ge'，'nu'，'nn'，'in'，'ni']} * /}，
dateTemplate = {width ：80，align：'center'，sorttype：'date'，
formatter：'date'，formatoptions：{newformat：'dM-Y'}，editable：true，datefmt：'dM-Y'，
editoptions：{dataInit：initDate}，
searchoptions：{sopt：['eq'，'ne'，'lt'，'le'，'gt'，'ge']，dataInit：initDate} }，
yesNoTemplate = {align：'center'，editable：true，formatter：'checkbox'，
edittype：'checkbox'，editoptions：{value：'Yes：No'，defaultValue：'No '}，
stype：'select'，searchoptions：{sopt：['eq'，'ne']，value：'：Any; true：Yes; false：No'}}，
myDefaultSearch ='cn'，
getColumnIndex = function（columnIndex）{
var cm = this.jqGrid（'getGridParam'，'colModel'），i，l = cm.length;
for（i = 0; i
return i; //返回colModel索引
}
}
return -1;
}，
refreshSerchingToolbar = function（myDefaultSearch）{
var filters，i，l，rules，rule，iCol，cmi，control，tagName，
$ this = $ ），
postData = $ this.jqGrid（'getGridParam'，'postData'），
cm = $ this.jqGrid（'getGridParam'，'colModel'）;
for（i = 0，l = cm.length; i
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（this.ftoolbar ）===boolean&& this.ftoolbar）{
filters = $ .parseJSON（postData.filters）;
if（filters&& filters.groupOp ===AND&&&typeof（filters.groups）===undefined）{
//仅在提前搜索的情况下没有分组我们在
//搜索工具栏中导入过滤器
rules = filters.rules;
for（i = 0，l = rules.length; i
iCol = getColumnIndex.call（$ this，rule.field）;
if（iCol> = 0）{
cmi = cm [iCol];
control = $（＃gs_+ $ .jgrid.jqID（cmi.name））;
if（control.length> 0&&
（（typeof（cmi.searchoptions）===undefined||
typeof（cmi.searchoptions.sopt）= ==undefined）
&&&rule.op === myDefaultSearch）||
（typeof（cmi.searchoptions）===object&&
$ .isArray（cmi.searchoptions.sopt）&&
cmi.searchoptions.sopt.length> 0&&
cmi.searchoptions.sopt [0] === rule.op） ））{
tagName = control [0] .tagName.toUpperCase（）;
if（tagName ===SELECT）{//&& cmi.stype ===select
control.find（option [value ='+ $ .jgrid.jqID（rule.data）+']）
.attr '，'selected'）;
} else if（tagName ===INPUT）{
control.val（rule.data）;
}
}
}
}
}
}
}，
templateClosed = {
groupOp： AND，
rules：[
{field：closed，op：eq，data：true}
]
templateLastWeek = {
groupOp：AND，
rules：[
{field：invdate，op：ge，data：2012年2月13日}，
{field：invdate，op：le，data：16-Feb-2012}
]
}，
templateLastMonth = {
groupOp ：AND，
rules：[
{field：invdate，op：ge，data：2012年1月16日}，
{ invdate，op：le，data：16-Feb-2012}
]
}，
myFilterTemplateLabel ='按模板过滤：& nbsp;'，
myFilterTemplateNames = ['Closed'，'Last Week'，'Last Month']，
myFilterTemplates = [templateClosed，templateLastWeek，templateLastMonth]，
iTemplate，
cTemplates = myFilterTemplateNames.length ，
templateOptions =''，
reloadWithNewFilterTemplate = function（）{
var iTemplate = parseInt（$（'＃filterTemplates'）。val（），10），
postData = $ grid.jqGrid（'getGridParam'，'postData'）;
if（isNaN（iTemplate））{
$ grid.jqGrid（'setGridParam'，{search：false}）;
} else if（iTemplate> = 0）{
$ .extend（postData，{
filters：JSON.stringify（myFilterTemplates [iTemplate]）
}）;
$ grid.jqGrid（'setGridParam'，{search：true}）;
}
$ grid.trigger（'reloadGrid'，[{current：true，page：1}]）;
};
$ grid.jqGrid（{
...
toolbar：[true，top]，
loadComplete：function（）{
var $ this = $（this）;
if（typeof（this.ftoolbar）！==boolean）{
//如果需要创建工具栏
$ this.jqGrid （'filterToolbar'，
{stringResult：true，searchOnEnter：true，defaultSearch：myDefaultSearch}）;
}
refreshSerchingToolbar.call（this，myDefaultSearch）;
}
}）;
$ .extend（$。jgrid.search，{
multipleSearch：true，
multipleGroup：true，
recreateFilter：true，
closeOnEscape：true，
closeAfterSearch：true，
overlay：0，
tmplLabel：myFilterTemplateLabel，
tmplNames：myFilterTemplateNames，
tmplFilters：myFilterTemplates
}
$ grid.jqGrid（'navGrid'，'#pager'，{edit：false，add：false，del：false}）;
for（iTemplate = 0; iTemplate< cTemplates; iTemplate ++）{
templateOptions + ='< option value ='+ iTemplate +'>'+
myFilterTemplateNames [iTemplate] +'< / option>';
}
$（'＃t_'+ $ .jgrid.jqID（$ grid [0] .id））。append（'< label for =filterTemplates>'+
myFilterTemplateLabel +'< / label>'+
'< select id =filterTemplates>< option value =>未过滤< / option>'+
templateOptions + < / select>'）;
$（'＃filterTemplates'）。change（reloadWithNewFilterTemplate）.keyup（function（e）{
//某些网络浏览器（如Google Chrome）不会触发change事件
//如果选择将被keybord滚动，另外一些浏览器
//像Internet Explorer不改变按下
//的LEFT或RIGHT键的选择选项另一个网络浏览器如谷歌浏览器
//如果需要一个
//可以修改代码以减少网格的未重新加载，
//但是有几个本地行的演示它是这样优化
//不是真的需要
var keyCode = e.keyCode || e.which;
if（keyCode == = $ .ui.keyCode.PAGE_UP || keyCode === $ .ui.keyCode.PAGE_DOWN ||
keyCode === $ .ui.keyCode.END || keyCode === $ .ui.keyCode。 HOME ||
keyCode === $ .ui.keyCode.UP || keyCode === $ .ui.keyCode.DOWN ||
keyCode === $ .ui.keyCode.LEFT || keyCode === $ .ui.keyCode.RIGHT）{
reloadWithNewFilterTemplate（）;
}
}）;
I have a jqgrid containing some data to filter. I'd like to define a combo box with some pre-defined filter sets / templates. If a user selects an item of the combobox, the grid should automatically apply combined filters. Preferably, the combo box should be integrated into a toolbar or jqGrid's pager, but also in the html page would be fine.
For example:
COMBO BOX
Item templates filter parameters
___________
|Expired | << Timeout = true
|Last Week | << OpenDate between 02/13/2012 and 02/16/2012
|Last Month | << OpenDate between 01/01/2012 and 02/16/2012
|......... | ......
Thanks in advance for your help
解决方案
jqGrid supports Searching Templates in the Advance Searching (see "Searching"/ "Search Templates" in the official jqGrid demo), but there are currently no searching templates support in the Toolbar Filtering.
I find your question very interesting. In the old question I described how one can use generic external filters to send additional information to the server. The way can be good in case of remote data, but it can't be used directly in the local grid or in the grid with the loadonce: true option.
So I created the demo which shows how the filter templates can be implemented in Toolbar Filtering and how to integrated the template in the jqGrid. I used toolbar: [true, "top"] to have additional empty toolbar above the column headers:
In the implementation I used the refreshSerchingToolbar function which I suggested originally here. It's important to understand, that the refreshSerchingToolbar function fill in the filter toolbar only the information which can be exactly represented by the filter. For example the filter for "Closed" rows can be represented in the filter toolbar (see the picture above), but the interval of dates "Last Week" and "Last Month" con't. In the cases the data in the grid will be filtered, but the corresponding fields of the filter toolbar stay empty.
The most important part of the code of the demo you can find below
var $grid = $("#list"),
initDate = function (elem) {
$(elem).datepicker({
dateFormat: 'dd-M-yy',
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number', editable: true/*,
searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'] }*/},
dateTemplate = {width: 80, align: 'center', sorttype: 'date',
formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, editable: true, datefmt: 'd-M-Y',
editoptions: { dataInit: initDate },
searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], dataInit: initDate }},
yesNoTemplate = {align: 'center', editable: true, formatter: 'checkbox',
edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'No'},
stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':Any;true:Yes;false:No' }},
myDefaultSearch = 'cn',
getColumnIndex = function (columnIndex) {
var cm = this.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i++) {
if ((cm[i].index || cm[i].name) === columnIndex) {
return i; // return the colModel index
}
}
return -1;
},
refreshSerchingToolbar = function (myDefaultSearch) {
var filters, i, l, rules, rule, iCol, cmi, control, tagName,
$this = $(this),
postData = $this.jqGrid('getGridParam', 'postData'),
cm = $this.jqGrid('getGridParam', 'colModel');
for (i = 0, l = cm.length; i < l; i++) {
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 (this.ftoolbar) === "boolean" && this.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++) {
rule = rules[i];
iCol = getColumnIndex.call($this, rule.field);
if (iCol >= 0) {
cmi = cm[iCol];
control = $("#gs_" + $.jgrid.jqID(cmi.name));
if (control.length > 0 &&
(((typeof (cmi.searchoptions) === "undefined" ||
typeof (cmi.searchoptions.sopt) === "undefined")
&& rule.op === myDefaultSearch) ||
(typeof (cmi.searchoptions) === "object" &&
$.isArray(cmi.searchoptions.sopt) &&
cmi.searchoptions.sopt.length > 0 &&
cmi.searchoptions.sopt[0] === rule.op))) {
tagName = control[0].tagName.toUpperCase();
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);
}
}
}
}
}
}
},
templateClosed = {
groupOp: "AND",
rules: [
{ field: "closed", op: "eq", data: "true" }
]
},
templateLastWeek = {
groupOp: "AND",
rules: [
{ field: "invdate", op: "ge", "data": "13-Feb-2012" },
{ field: "invdate", op: "le", "data": "16-Feb-2012"}
]
},
templateLastMonth = {
groupOp: "AND",
rules: [
{ field: "invdate", op: "ge", "data": "16-Jan-2012" },
{ field: "invdate", op: "le", "data": "16-Feb-2012"}
]
},
myFilterTemplateLabel = 'Filter by Template: ',
myFilterTemplateNames = ['Closed', 'Last Week', 'Last Month'],
myFilterTemplates = [templateClosed, templateLastWeek, templateLastMonth],
iTemplate,
cTemplates = myFilterTemplateNames.length,
templateOptions = '',
reloadWithNewFilterTemplate = function () {
var iTemplate = parseInt($('#filterTemplates').val(), 10),
postData = $grid.jqGrid('getGridParam', 'postData');
if (isNaN(iTemplate)) {
$grid.jqGrid('setGridParam', {search: false});
} else if (iTemplate >= 0) {
$.extend(postData, {
filters: JSON.stringify(myFilterTemplates[iTemplate])
});
$grid.jqGrid('setGridParam', {search: true});
}
$grid.trigger('reloadGrid', [{current: true, page: 1}]);
};
$grid.jqGrid({
...
toolbar: [true, "top"],
loadComplete: function () {
var $this = $(this);
if (typeof (this.ftoolbar) !== "boolean") {
// create toolbar if needed
$this.jqGrid('filterToolbar',
{stringResult: true, searchOnEnter: true, defaultSearch: myDefaultSearch});
}
refreshSerchingToolbar.call(this, myDefaultSearch);
}
});
$.extend($.jgrid.search, {
multipleSearch: true,
multipleGroup: true,
recreateFilter: true,
closeOnEscape: true,
closeAfterSearch: true,
overlay: 0,
tmplLabel: myFilterTemplateLabel,
tmplNames: myFilterTemplateNames,
tmplFilters: myFilterTemplates
});
$grid.jqGrid('navGrid', '#pager', {edit: false, add: false, del: false});
for (iTemplate = 0; iTemplate < cTemplates; iTemplate++) {
templateOptions += '<option value="' + iTemplate + '">' +
myFilterTemplateNames[iTemplate] + '</option>';
}
$('#t_' + $.jgrid.jqID($grid[0].id)).append('<label for="filterTemplates">'+
myFilterTemplateLabel + '</label>' +
'<select id="filterTemplates"><option value="">Not filtered</option>' +
templateOptions + '</select>');
$('#filterTemplates').change(reloadWithNewFilterTemplate).keyup(function (e) {
// some web browsers like Google Chrome don't fire "change" event
// if the select will be "scrolled" by keybord. Moreover some browsers
// like Internet Explorer don't change the select option on pressing
// of LEFT or RIGHT key. Another web browsers like Google Chrome do this.
// We make refrech of the grid in any from the cases. If needed one
// could modify the code to reduce unnneded reloading of the grid,
// but for the demo with a few local rows it's such optimization
// isn't really needed
var keyCode = e.keyCode || e.which;
if (keyCode === $.ui.keyCode.PAGE_UP || keyCode === $.ui.keyCode.PAGE_DOWN ||
keyCode === $.ui.keyCode.END || keyCode === $.ui.keyCode.HOME ||
keyCode === $.ui.keyCode.UP || keyCode === $.ui.keyCode.DOWN ||
keyCode === $.ui.keyCode.LEFT || keyCode === $.ui.keyCode.RIGHT) {
reloadWithNewFilterTemplate();
}
});
这篇关于jqgrid：如何在组合框中定义过滤器预设/模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
