MyException - 我的异常网
当前位置:我的异常网» Web前端 » jqgrid-搜寻

jqgrid-搜寻

www.MyException.Cn  网友分享于:2015-08-26  浏览:0次
jqgrid--搜索

基础操作

 

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

 

    $.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

 

 

 

 

 

文章评论

程序员应该关注的一些事儿
程序员应该关注的一些事儿
 程序员的样子
程序员的样子
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员和编码员之间的区别
程序员和编码员之间的区别
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
每天工作4小时的程序员
每天工作4小时的程序员
程序员都该阅读的书
程序员都该阅读的书
为什么程序员都是夜猫子
为什么程序员都是夜猫子
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
程序员必看的十大电影
程序员必看的十大电影
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
旅行,写作,编程
旅行,写作,编程
Java程序员必看电影
Java程序员必看电影
那些争议最大的编程观点
那些争议最大的编程观点
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
代码女神横空出世
代码女神横空出世
鲜为人知的编程真相
鲜为人知的编程真相
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
编程语言是女人
编程语言是女人
中美印日四国程序员比较
中美印日四国程序员比较
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
我是如何打败拖延症的
我是如何打败拖延症的
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
10个调试和排错的小建议
10个调试和排错的小建议
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
我的丈夫是个程序员
我的丈夫是个程序员
如何成为一名黑客
如何成为一名黑客
总结2014中国互联网十大段子
总结2014中国互联网十大段子
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
漫画:程序员的工作
漫画:程序员的工作
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有