如何为jqGrid单次搜索字段设置默认值 [英] How do I set default values for jqGrid single-search fields

问题描述

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

I need to set the default column selection on a jqGrid single-search dialog.

有关可用选项的说明，请参见 jqGrid Wiki

The options available are described on the jqGrid wiki

要设置默认的搜索类型"选项，我在数组中首先使用所需的值("contains"，"cn")对" sopt "数组进行了重新排序，并将其设置为在navGrid搜索选项上.尽管浏览了源代码，但我仍无法确定哪个属性可能会影响初始字段的选择.它始终默认为我的colModel的第一列.

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.

我的代码是:

$('#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.

推荐答案

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

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.

搜索的选项 columns该对话框未记录下来，可能是因为它不是真正的用户友好型.选项columns可以包含colModel的项目数组.确切地说，相同顺序的项目将用于具有列名称的下拉选择的构造.默认情况下，jqGrid用colModel的所有不具有search: false属性的项填充columns.对于隐藏的列(具有hidden: true)，它将另外测试searchoptions.searchhidden属性(请参见

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

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

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&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选项，并在postData中使用默认搜索规则指定filters(参见相同答案).

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屋！