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

Question

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

the jqGrid wiki 上描述了可用的选项

为了设置默认的搜索“类型”选项，我在数组中首先使用我需要的值（“包含”、“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 */ }
);

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

Answer 1

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

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

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

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

对应的demo是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 选项并在postData 中使用默认搜索规则指定filters（参见相同的答案）。