2013-05-05 219 views
3

我需要在jqGrid单一搜索对话框上设置默认列选择。如何为jqGrid单一搜索字段设置默认值

可用的选项上the jqGrid wiki

要设置默认的搜索“类型”选项描述,我重新排序,我需要的价值“SOPT”阵列(“载”,“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 */ } 
); 

当“查找”,我想最初的默认搜索对话框中的用户点击与“名”呈现“包含”选择。

+0

查看**更新**我的回答部分 – Oleg 2013-05-10 11:11:58

+0

Oleg,我应该在去年表示感谢您的回答,您对jqgrid在stackoverflow上的支持非常宝贵。 – 2014-05-22 11:24:21

+0

欢迎您! – Oleg 2014-05-22 14:29:59

回答

3

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

The optioncolumns搜索对话框没有记录可能是因为它不是真的用户友好。选项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 */ } 
); 

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