基础操作
表格中所有的列都可以作为搜索条件。
所用到的语言包文件
$.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 设置
可选参数 |
类型 |
说明 |
默认值 |
search |
boolean |
是否是搜索 列 |
true |
stype |
string |
搜索类型, text 类型或者 select 类 型 |
text |
searchoptions |
object |
对搜索条件进行一些设 置 |
|
searchoptions 参数
属性 |
类型 |
说明 |
dataUrl |
string |
只有当搜索类型为 select 才起 效 |
buildSelect |
function |
只有当 dataUrl 设置时此参数才起效,通过一个 function 来构建下拉 框 |
dataInit |
function |
初始化时调用, 用法: dataInit: function(elem) {do something} 通常用在日期的选择上 .
Example: dataInit : function (elem) {$(elem).datepicker();} |
dataEvents |
array |
事件列表, 用法: dataEvents: [{ type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); }}, { type: 'keypress', fn: function(e) { console.log('keypress'); } }] |
attr |
object |
设置属性值。 attr : { title: “Some title” } |
searchhidden |
boolean |
默认情况下,隐藏值不是搜索列。 为了使隐藏值可以作为搜索列则将此设为 true |
sopt |
array |
此参数只用到单列搜索上,说明搜索条件。可用值: ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc'] 意 思为 ['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'] |
defaultValue |
string |
默认 值 |
value |
mixed |
只用在搜索类型为 select 下。 可以是 string 或者 object , 如果为 string 则格式为 value:label ,且以 “ ; ” 结尾; 如果为 object 格式为 editoptions:{value:{1:'One';2:'Two'}} |
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:参数
可选参数 |
类型 |
描述 |
默认值 |
autosearch |
boolean |
查询规则,如果是 text 类型则是当按下回车键才去执行查询;如果是 select 类型的查询则当值改变时就去执行查 询 |
true |
beforeSearch |
function |
执行查询之前触发此事 件 |
null |
afterSearch |
function |
查询完成后触发事 件 |
null |
beforeClear |
function |
清空查询条件值时触发事 件 |
null |
afterClear |
function |
清空查询条件后触发事 件 |
null |
方法:
方法 |
描述 |
triggerToolbar |
执行查询时调用此方法 |
clearToolbar |
当清空查询条件值时触发此函数 |
toggleToolbar |
Toggeles工具栏 |
自定义搜索
<div id="mysearch"></div>
jQuery("#mysearch").filterGrid('#grid_id',options);
options:参数
参数 |
描述 |
默认值 |
gridModel |
当 为ture我们会使用colModel中的属性构造查询条件, 所用到的参数:name, index, edittype, editoptions, search. 还有一个参数:defval: 查询条件的默认值;surl:当edittype:'select'时获取select数据的url,格 式: <select> <option value='val1'> Value1 </option> <option value='val2'> Value2 </option>… <option value='valn'> ValueN </option> </select> |
false |
gridNames |
gridModel为true时起效,设置查询列的名称 |
false |
filterModel |
gridModel 为false时起效, 格式: {label:'LableFild', name: 'colname', stype: 'select', defval: 'default_value', surl: 'someurl', sopt:{optins for the select}}。
label:字段显示名称; name:列名; stype:输入框类型,text或者select; surl:获取select数据的地 址,要求的内容为html格式: <select> <option value='val1'> Value1 </option> <option value='val2'> Value2 </option>… <option value='valn'> ValueN </option> </select>; sopt:同editoptions |
[] |
formtype |
定义表单如何被构造,'horizontal' or 'vertical' |
|
autosearch |
如果为true:当点击回车键触发查询;当select值变化时触发查询 |
|
formclass |
可以使用的css |
filterform |
tableclass |
可以使用到table上的css |
filtertable |
buttonclass |
按钮上使用的css |
filterbutton |
searchButton |
搜索按钮 |
Search |
clearButton |
清空数据的按钮 |
Clear |
enableSearch |
启用禁用搜索按钮 |
false |
enableClear |
启用禁用清空按钮 |
false |
beforeSearch |
搜索之前触发的事件 |
null |
afterSearch |
搜索完成之后触发的事件 |
null |
beforeClear |
清空数据之前触发的事件 |
null |
afterClear |
清空数据之后触发事件 |
null |
url |
搜索数据的url |
‘’ |
marksearched |
当为true时,每次查询之后所有查询的列都标记为可查询列 |
true |
相关推荐
jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能,添加、编辑、删除和搜索表中记录,支持多种数据类型输入:XML,JSON,Array等,多行选择,支持子表格,集成日期选择控件等等。
每个码农的手里多少有几个老项目,想换皮却因修改太多感到力不从心,想用新框架又有些不可舍弃的东西,现在这款插件可完美地让项目中的列表变得高大上,支持批量勾选,支持每条自动生成搜索框,自带搜索、重置按钮,...
jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能,添加、编辑、删除和搜索表中记录,支持多种数据类型输入:XML,JSON,Array等,多行选择,支持子表格,集成日期选择控件等等
jqGrid案例,经典搜索,异步,里面包括添加、删除、修改等日常操作,此程序是我用codeIgnite(CI)框架程序,压缩包内还有数据库文件,下载下来直接修改数据库配置文件即可预览,功能很强大,是php程序,希望下载者注意
jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 jqGrid 学习 格式化 21 jqGrid 学习 自定义按钮 26 jqGrid 学习 翻页(2) 28 jqGrid 学习 翻页 33 ...
jqGrid搜索
jqGrid增加时--判断开始日期与结束日期(实例代码)。需要的朋友可以过来参考下,希望对大家有所帮助
3) 全面支持jqGrid的组合搜索过滤(多条件、多比较符再也不蛋疼了) 4) 增加通用EXCEL导出(自动根据表格的宽度、可见列、筛选条件等导出数据) 5) 表格私有化定制:用户可以自行定制表格的列宽、隐藏/显示列,并可...
jqGrid帮助手册包含jqGrid参数、事件、方法、自定义按钮、搜索等
3) 全面支持jqGrid的组合搜索过滤(多条件、多比较符再也不蛋疼了) 4) 增加通用EXCEL导出(自动根据表格的宽度、可见列、筛选条件等导出数据) 5) 表格私有化定制:用户可以自行定制表格的列宽、隐藏/显示列,并...
一个jqGrid例子 使用datatype: "local",JSON数据写在页面中时分页、搜索一切正常。 但使用datatype: getProducts, 时点击搜索、排序时数据每次拷贝了一份,(即:原数据有10条,操作后就成20条。。。。)。
我这里用的不是jqGrid的自带的编辑和删除操作,我已经把分页导航栏下的编辑,删除,搜索都取消掉了,就是这句$(“#list1”).navGrid(“#pager1”,{edit:false,del:false, search:false}), 然后在数据加载完成后,给每...
jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能,添加、编辑、删除和搜索表中记录,支持多种数据类型输入:XML,JSON,Array等,多行选择,支持子表格,集成日期选择控件等
jqGrid本身带有search和edit表格模块,但是这些模块会使得整个插件体积显得有点庞大,而且笔者认为jqGrid的搜索查询和编辑/添加功能不好用,所以笔者放弃jqGrid自有的search和edit表格模块,借助jquery利器来完成...
jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。 一、要引用的文件 要使用jqGrid,首先页面上要引入如下css与js文件。 1、css <link href=/css/ui...
预设的Navigator工具列,可以很容易的使用新增、删除、编辑、检视及搜寻等功能。 完整的分页功能 按下任一栏位的标头,皆可以该栏位为排序项目。无论是升序或降序皆可。 预设的action formatter,可以快速而直觉...
我在项目中使用jqGrid时,采用异步加载服务器数据,例如点击翻页、搜索时都重新加载数据。这样就会产生一个问题。 问题描述: 当对列表批量删除时,可以选择多个记录信息,选择当前页的第一条,如图: 点击下一页...