如何为 jqGrid 单搜索字段设置默认值 [英] How do I set default values for jqGrid single-search fields
问题描述
我需要在 jqGrid 单搜索对话框中设置默认列选择.
.代码中最重要的部分如下
var $grid = $('#tableid'),getColumnByName = function (colName) {var colModel = $.extend([], this.jqGrid("getGridParam", "colModel")),colNames = $.extend([], this.jqGrid("getGridParam", "colNames")),l = colModel.length, i, cm;对于 (i = 0; i < l; i++) {cm = colModel[i];如果(cm.name === colName){cm.label = cm.label ||colNames[i];返回厘米；}}};$grid.jqGrid({colNames: ['ID', 'Membership#', '加入日期', 'Email', 'Name', 'Address', 'Postcode'],col型号:[{名称:'ID'，隐藏:真}，{名称:'MEMID'，宽度:90 }，{名称:'JOINDATE'，宽度:70 }，{名称:'EMAIL'，宽度:150，对齐:右"}，{名称:'NAME'，宽度:120，对齐:右"}，{名称:'地址'，宽度:250，对齐:右"}，{名称:'POSTCODE'，宽度:80，对齐:右"}],...});$grid.jqGrid('navGrid', '#pager',{/* 参数 */假，添加:假，删除:假，搜索文本:'查找 '，refreshtext:'刷新 '},{/* 编辑选项 */},{/* 添加选项 */},{/* 删除选项 */},{/* 搜索选项 */...列: [getColumnByName.call($grid, 'NAME'),getColumnByName.call($grid, 'EMAIL'),getColumnByName.call($grid, 'JOINDATE'),getColumnByName.call($grid, 'MEMID'),getColumnByName.call($grid, 'ADDRESS'),getColumnByName.call($grid, 'POSTCODE')]},{/* 查看选项 */});更新:单值搜索(multipleSearch: true 未设置)和columns 选项的设置存在小错误.在答案中，我描述了如何修复该错误.或者，您可以使用 multipleSearch: true 选项并在 postData 中使用默认搜索规则指定 filters(参见相同的答案).
I need to set the default column selection on a jqGrid single-search dialog.
The options available are described on the jqGrid wiki
To set the default search "type" option, I re-ordered the "sopt" array with the value I need ("contains", "cn") first in the array and set this on the navGrid search options. Despite browsing the source code I have not been able to work out which property might affect the initial field selection. It always defaults to the first column in my colModel.
My code is:
$('#tableid').jqGrid({
colNames: ['ID', 'Membership#', 'Join Date', 'Email', 'Name', 'Address', 'Postcode'],
colModel: [
{name:'ID', index:'ID', hidden:true },
{name:'MEMID', index:'MEMD', width:90 },
{name:'JOINDATE', index:'JOINDATE', width:70 },
{name:'EMAIL', index:'EMAIL', width:150, align:"right" },
{name:'NAME', index:'NAME', width:120, align:"right" },
{name:'ADDRESS', index:'ADDRESS', width:250, align:"right" },
{name:'POSTCODE', index:'POSTCODE', width:80, align:"right" }
],
// etc. ...
});
$("#tableid").jqGrid('navGrid', '#pager',
{ /* parameters */
edit:false, add:false, del:false, searchtext:'Find ', refreshtext:'Refresh '
},
{ /* edit options */ },
{ /* add options */ },
{ /* delete options */ },
{ /* search options */
multipleSearch:false,
multipleGroup:false,
showQuery:false,
top: 190,
left: 200,
caption: "Search for members...",
closeAfterSearch: false,
sopt: ['cn','nc','eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en'],
},
{ /* view options */ }
);
When the user clicks on "Find" I would like the initial default search dialog to be presented with "Name", "contains" selected.
It's a good question! jqGrid contains the option columns which can be used to implement your requirements, but the usage of the option is not simple. So I made the demo for you.
The option columns of searching dialog is not documented probably because it's not really user friendly. The option columns can contains array of items of colModel. Exactly the items in the same order will be used in construction of the drop-down select with column names. Per default jqGrid fill columns with all items of colModel which don't have search: false property. For hidden columns (having hidden: true) it will be tested additionally searchoptions.searchhidden property (see the part of the source code). So the option columns will be filled internally per default. On the other side one can overwrite the option columns to have custom order of searching fields.
The code which you included in the text of your question produced the following searching dialog
After filling option columns you can change it to for example the following
The corresponding demo is here. The most important parts of the code are below
var $grid = $('#tableid'),
getColumnByName = function (colName) {
var colModel = $.extend([], this.jqGrid("getGridParam", "colModel")),
colNames = $.extend([], this.jqGrid("getGridParam", "colNames")),
l = colModel.length, i, cm;
for (i = 0; i < l; i++) {
cm = colModel[i];
if (cm.name === colName) {
cm.label = cm.label || colNames[i];
return cm;
}
}
};
$grid.jqGrid({
colNames: ['ID', 'Membership#', 'Join Date', 'Email', 'Name', 'Address', 'Postcode'],
colModel: [
{name: 'ID', hidden: true },
{name: 'MEMID', width: 90 },
{name: 'JOINDATE', width: 70 },
{name: 'EMAIL', width: 150, align: "right" },
{name: 'NAME', width: 120, align: "right" },
{name: 'ADDRESS', width: 250, align: "right" },
{name: 'POSTCODE', width: 80, align: "right" }
],
...
});
$grid.jqGrid('navGrid', '#pager',
{ /* parameters */
edit:false, add:false, del:false, searchtext:'Find ', refreshtext:'Refresh '
},
{ /* edit options */ },
{ /* add options */ },
{ /* delete options */ },
{ /* search options */
...
columns: [
getColumnByName.call($grid, 'NAME'),
getColumnByName.call($grid, 'EMAIL'),
getColumnByName.call($grid, 'JOINDATE'),
getColumnByName.call($grid, 'MEMID'),
getColumnByName.call($grid, 'ADDRESS'),
getColumnByName.call($grid, 'POSTCODE')
]
},
{ /* view options */ }
);
UPDATED: There are small bug in Single Value Searching (multipleSearch: true not set) and setting of columns option. In the answer I describe how the bug can be fixed. Alternatively you can use multipleSearch: true option and specify filters with default searching rule in postData (see the same answer).
这篇关于如何为 jqGrid 单搜索字段设置默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
