如何为jqGrid单搜索字段设置默认值

时间:2013-05-05 17:45:50

标签: jquery jqgrid

我需要在jqGrid单搜索对话框中设置默认列选择。

可用选项在the jqGrid wiki

中有所描述

要设置默认搜索“type”选项,我首先在数组中重新排序了“ sopt ”数组,其中包含我需要的值(“contains”,“cn”)并设置此项在navGrid搜索选项上。尽管浏览了源代码,但我还是无法确定哪个属性可能会影响初始字段选择。它始终默认为我colModel中的第一列。

我的代码是:

$('#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 */ }
);

当用户点击“查找”时,我希望初始默认搜索对话框显示为“名称”,选择“包含”。

1 个答案:

答案 0 :(得分:3)

这是一个很好的问题! jqGrid包含可用于实现您的需求的选项columns,但该选项的使用并不简单。所以我为你做了演示。

搜索对话框的

The option columns可能没有记录,因为它不是真正用户友好的。选项columns可以包含colModel项的数组。确切地说,相同顺序的项目将用于构造具有列名称的下拉选择。默认情况下,jqGrid填充columns,其中colModel的所有项目都没有search: false属性。对于隐藏列(具有hidden: true),将另外测试searchoptions.searchhidden属性(请参阅源代码的the part)。因此,选项columns将在默认情况下在内部填充。另一方面,可以覆盖选项columns以具有搜索字段的自定义顺序。

您在问题文本中包含的代码生成了以下搜索对话框

enter image description here

填写选项columns后,您可以将其更改为例如以下

enter image description here

相应的演示是here。代码中最重要的部分是

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&nbsp;', refreshtext:'Refresh&nbsp;' 
    },
    { /* 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 */ }
);

更新:单值搜索(multipleSearch: true未设置)和columns选项设置存在小错误。在the answer中,我描述了如何修复错误。或者,您可以使用multipleSearch: true选项,并在filters中使用默认搜索规则指定postData(请参阅相同的答案)。