10jqGrid - 搜索操作

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/89487770

表格中所有的列都可以作为搜索条件。
所用到的语言包文件

$.jgrid = {  

...  
   search : {  
     caption: "Search...",  
     Find: "Find",  
     Reset: "Reset",  
     odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],  
     groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],  
     matchText: " match",  
     rulesText: " rules"  
   }

colModel 设置：

searchoptions 参数：

jQuery("#grid_id").jqGrid({  
...  
   colModel: [   

      ...   

      {name:'price', index:'price', width:60, search:true, stype:'text', searchoptions:{dataInit:datePick, attr:{title:'Select Date'}} },  

      ...  

   ]  

...  

});  

datePick = function(elem)  

{  
   jQuery(elem).datepicker();  
}

需要说明的：

• 所有的搜索都是使用url来到服务器端查询数据。
• 当执行搜索时会用查询数据填充postData array
• 发送到服务器端搜索字符串的名称为_search
• 当点击刷新按钮时不会使用搜索条件
• 每个搜索方法都有自己的数据清空方法

搜索工具栏

搜索工具栏只是在列标题下面构造一个输入框。且使用表格的url进行搜索记录，发到服务器端数据格式为name:value，而且是附加在postData之后。

• jQuery("#grid_id").filterToolbar(options);
• jQuery("#grid_id").jqGrid(‘filterToolbar’,options);

options：参数

方法：

自定义搜索

<div id="mysearch"></div>

jQuery("#mysearch").filterGrid('#grid_id',options);

options：参数