3

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

jqGrid wiki上描述了可用的选项

要设置默认搜索“类型”选项,我首先在数组中使用我需要的值(“contains”、“cn”)重新排序“ sopt ”数组,并在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 */ }
);

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

4

1 回答 1

3

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

搜索对话框的选项 columns没有记录,可能是因为它不是真正的用户友好。该选项columns可以包含 的项目数组colModel。完全相同顺序的项目将用于构造带有列名的下拉选择。默认情况下,jqGrid 填充columns所有colModel没有search: false属性的项目。对于隐藏列(具有hidden: true),它将被额外测试searchoptions.searchhidden属性(参见源代码部分)。因此,默认情况下该选项columns将在内部填充。另一方面,可以覆盖columns具有自定义搜索字段顺序的选项。

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

在此处输入图像描述

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

在此处输入图像描述

对应的演示在这里。代码中最重要的部分如下

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选项设置存在小错误。在答案中,我描述了如何修复该错误。或者,您可以使用multipleSearch: true选项并指定filters默认搜索规则postData(参见相同的答案)。

于 2013-05-06T10:11:44.910 回答