10jqGrid - 搜索操作

简介: 10jqGrid - 搜索操作

表格中所有的列都可以作为搜索条件。

所用到的语言包文件

$.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 设置:

image.png

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:参数

方法:

image.png

自定义搜索

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

options:参数


目录
相关文章
|
7月前
|
JavaScript
vue实现下拉列表远程搜索示例(根据关键词模糊搜索)
vue实现下拉列表远程搜索示例(根据关键词模糊搜索)
|
JavaScript 前端开发 Java
63jqGrid - 复杂搜索
63jqGrid - 复杂搜索
53 0
|
JSON JavaScript 前端开发
82jqGrid - 搜索
82jqGrid - 搜索
32 0
|
JavaScript 前端开发 Java
64jqGrid - 在搜索中显示查询条件
64jqGrid - 在搜索中显示查询条件
61 0
|
JavaScript 前端开发 Java
66jqGrid - 搜索模板
66jqGrid - 搜索模板
38 0
|
JavaScript 前端开发 Java
67jqGrid - 搜索操作工具栏
67jqGrid - 搜索操作工具栏
59 0
|
JavaScript 前端开发 Java
65jqGrid - 搜索中验证数据
65jqGrid - 搜索中验证数据
49 0
|
2月前
|
前端开发 程序员 API
前端|基于 Layui 实现动态搜索选择框
网页端实现动态搜索选择框,要求下拉选项列表能根据用户输入内容动态刷新,最终提交的值必须是由选项列表中点选的。
52 3
|
3月前
|
JSON JavaScript 前端开发
jQuery下拉框搜索模糊查询实现
【9月更文挑战4天】
122 10
|
7月前
|
前端开发 JavaScript 容器
一个可搜索的表格
一个可搜索的表格