0
点赞
收藏
分享

微信扫一扫

10jqGrid - 搜索操作

钎探穗 2022-03-24 阅读 16


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

所用到的语言包文件

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

10jqGrid - 搜索操作_数据

searchoptions 参数:

10jqGrid - 搜索操作_jquery_02

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

10jqGrid - 搜索操作_搜索_03

方法:

10jqGrid - 搜索操作_搜索_04

自定义搜索

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

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

options:参数

10jqGrid - 搜索操作_搜索_05

10jqGrid - 搜索操作_搜索_06



举报

相关推荐

0 条评论