添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

在页面中写法:

Java 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href=" css/ui-lightness/jquery-ui-1.7.1.custom.css " />

<link rel="stylesheet" type="text/css" media="screen" href=" js/src/css/ui.jqgrid.css " />

<link rel="stylesheet" type="text/css" media="screen" href=" js/src/css/jquery.searchFilter.css " />

<style>

html, body {

margin: 0;

padding: 0;

font-size: 75%;

</style>

<script src=" js/jquery-1.3.2.min.js " type="text/javascript"></script>

<script src=" js/src/grid.loader.js " type="text/javascript"></script>

</head>

</body>

</html>

需要说明的是,jquery-ui的字体大小与jqgrid字体大小不一致,故需要在页面上在加上一段
style来指定页面上文字大小。

jqGrid皮肤

从3.5版本开始,jqGrid完全支持jquery UI的theme。我们可以从 http://jqueryui.com/themeroller/ 下载我们所需要的theme。当然,你也可以编辑自己的theme。jqGrid
也并不需要把所有的css文件都引入进来,只需导入核心css文件“ ui.theme.css ” 以及“ ui.core.css ”即可,文件位于目录development-bundle/themes下。

jqGrid原理

jqGrid是典型的B/S架构,服务器端只是提供数据管理,客户端只提供数据显示。换句话说,jqGrid可以以一种更加简单的方式来展现你数据库的信息,而且也可以把客户端数据传回给服务器端。
对于jqGrid我们所关心的就是:必须有一段代码把一些页面信息保存到数据库中,而且也能够把响应信息返回给客户端。jqGrid是用ajax来实现对请求与响应的处理。

jqGrid参数

构造一行数据后添加到 grid 中,如果设为 true 则是将整个表格的数据都构造完成后再添加到 grid 中,但 treeGrid, subGrid, or afterInsertRow 不能

false

当执行 ajax 请求时要干什么。 disable 禁用 ajax 执行提示; enable 默认,当执行 ajax 请求时的提示; block 启用 Loading 提示,但是阻止其他操

enable

Default valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 当参数为 null 时不会被发到服务器

只读属性,定义了 grid 中确切的行数。通常情况下与 records 属性相同,但有一种情况例外,假如 rowNum=15 ,但是从服务器端返回的记录数是 20 ,那么 records 值是 20 ,但 reccount 值仍然为 15 ,而且表格中也只显示 15 条记录

创建一个动态滚动的表格,当为 true 时,翻页栏被禁用,使用垂直滚动条加载数据,且在首次访问服务器端时将加载所有数据到客户端。当此参数为数字时,表格只控制可见的几行,所有数据都在这几行中加

false

表格的工具栏。数组中有两个值,第一个为是否启用,第二个指定工具栏位置(相对于 body layer ),如: [true,”both”] 。工具栏位置可选值: “top”,”bottom”, “both”. 如果工具栏在上面,则工具栏 id “t_”+ 表格 id ;如果在下面则为 “tb_”+ 表格 id ;如果只有一个工具栏则为 “t_”+ 表格 id

[false,'']

编辑的一系列选项 {name:’__department_id’,index:’__department_id’,width:200,editable:true,edittype:’select’,editoptions: {dataUrl:”${ctx}/admin/deplistforstu.action”}}, 这个是演示动态从服务器端获取数据

empty

编辑的规则 {name:’age’,index:’age’, width:90,editable:true,editrules: {edithidden:true,required:true,number:true,minValue:10,maxValue:100}}, 设定 年龄的最大值为 100 ,最小值为 10 ,而且为数字类型,并且为必输字段

empty

对列进行格式化时设置的函数名或者类

{name:’sex’,index:’sex’, align:’center’,width:60,editable:true,edittype:’select’,editoptions: {value:’0: 待定 ;1: ;2: ’},formatter:function(cellvalue, options, rowObject){
var temp = “<img src=’${ctx}/jquery-ui-1.7.2.custom/css/img/”
if(cellvalue==1){
temp = temp +”user-white.png”;
} else if(cellvalue==2){
temp = temp +”user-white-female.png”;
} else {
temp = temp + “user-silhouette.png”;
temp = temp + “‘ border=’0
/
>”
return temp;
}},//
返回性别的图标

用在当 datatype local 时,定义搜索列的类型,可选值: int/integer - integer 排序 float/number/currency - 排序数字 date - 排序日期 text - 排序文

jqGrid可支持的数据类型:xml、json、jsonp、local or clientSide、xmlstring、jsonstring
、script、function (…)。

Json数据

需要定义jsonReader来跟服务器端返回的数据做对应,其默认值:

· jsonReader : {

· root: "rows",

· page: "page",

· total: "total",

· records: "records",

· repeatitems: true,

· cell: "cell",

· id: "id",

· userdata: "userdata",

· subgrid: {root:"rows",

· repeatitems: true,

· cell:"cell"

· }

这样服务器端返回的数据格式:

· total: "xxx",

· page: "yyy",

· records: "zzz",

· rows : [

· {id:"1", cell:["cell11", "cell12", "cell13"]},

· {id:"2", cell:["cell21", "cell22", "cell23"]},

· ...

· ]

jsonReader 的属性

total

· totalrecords: "zzz",

· invdata : [

· {id:"1", invrow:["cell11", "cell12", "cell13"]},

· {id:"2", invrow:["cell21", "cell22", "cell23"]},

· ...

· ]

repeatitems
指明每行的数据是可以重复的,如果设为false,则会从返回的数据中按名字来搜索元素,这个名字就是colModel中的名字

· jsonReader : {

· root:"invdata",

· page: "currpage",

· total: "totalpages",

· records: "totalrecords",

· repeatitems: false,

· id: "0"

· }

· totalpages: "xxx",

· currpage: "yyy",

· totalrecords: "zzz",

· invdata : [

· {invid:"1",invdate:"cell11", amount:"cell12", tax:"cell13", total:"1234", note:"somenote"},

· {invid:"2",invdate:"cell21", amount:"cell22", tax:"cell23", total:"2345", note:"some note"},

· ...

· ]

此例中,id属性值为“invid”。
一旦当此属性设为false时, 我们就不必把所有在 colModel 定义的 name 值都赋值。因为是按 name 来进行搜索元素的 ,所以他的排序也不是按colModel中指定的排序结果。

用户数据( user data
在某些情况下,我们需要从服务器端返回一些参数但并不想直接把他们显示到表格中,而是想在别的地方显示,那么我们就需要用到userdata标签

· jsonReader: {

· ...

· userdata: "userdata",

· ...

· total: "xxx",

· page: "yyy",

· records: "zzz",

· userdata: {totalinvoice:240.00, tax:40.00},

· rows : [

· {id:"1", cell:["cell11", "cell12", "cell13"]},

· {id:"2", cell:["cell21", "cell22", "cell23"]},

· ...

· ]

在客户端我们可以有下面两种方法得到这些额外信息:

1. jQuery("grid_id").getGridParam('userData')

2. jQuery("grid_id").getUserData()

3. jQuery("grid_id").getUserDataItem( key )

Jqgrid学习 -------事件

· var lastSel;

· jQuery("#gridid").jqGrid({

· ...

· onSelectRow: function(id){

· if(id && id!==lastSel){

· jQuery('#gridid').restoreRow(lastSel);

· lastSel=id;

· }

· jQuery('#gridid').editRow(id, true);

· },

· ...

· })

jqGrid的方法,从3.6开始已经完全兼容jQuery UI库。

jQuery("#grid_id").jqGridMethod( parameter1,...parameterN );

jQuery("#grid_id").setGridParam({...}).hideCol("somecol").trigger("reloadGrid");

如果使用新的API:

jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );

jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");

jqGrid配置使用新的api

· <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

· <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

· <head>

· <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

· <title>My First Grid</title>

· <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />

· <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

· <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

· <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

· <script type="text/javascript">

· jQuery.jgrid.no_legacy_api = true;

· </script>

· <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

· </head>

· <body>

· ...

· </body>

· </html>

jqGrid方法

使用传来的 data 数据填充表格。使用方法:

var mygrid = jQuery(”#”+grid_id)[0];

var myjsongrid = eval(”(”+jsonresponse.responseText+”)”); mygrid.addJSONData(myjsongrid);

myjsongrid = null;

jsonresponse =null;

根据参数插入一行新的数据, rowid 为新行的 id data 为新行的数据, position 为新增行的位置, srcrowid 为新增行的参考位置。 data 数据格式: {name1:value1,name2: value2…} name 为在 colModel 中指定的名

返回列的值。 colname 既可以是当前列在 colModel 中的位置索引也可以是 name 值。 returntype 指定返回数据的类型,默认为 false 。当为 false 时,返回的数组中只包含列的值,当为 true 时返回数组是对象数组,具体格式 {id:rowid, value:cellvalue} id 为行的 id value 为列的值。如: [{id:1,value:1},{id:2,value:2}…] mathoperation 可选值为 'sum, 'avg', 'count'

这个函数可以改变 jqgrid 中用到的 ajax 请求参数,这个函数可以覆盖当前所有 ajax 请求设置。从 3.6 版本开始起有 3 个级别的 ajax 设置:第一 个级别就是在模块中设置 ajax 请求;第二个级别就是通过此函数设置;第三级别的设置是控制全局 ajax 请求的设 置: jQuery.extend(jQuery.ajax({method specific options}, ajaxOptions, ThirdLevelajaxSettinds)); 当然我们也可以单独设置 ajax 的参

IE8,FF3以及Chrome 3已经支持JSON,配置:

· <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

· <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

· <head>

· <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

· <title>My First Grid</title>

· <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />

· <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

· <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

· <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

· <script type="text/javascript">

· jQuery.jgrid.useJSON = true;

· </script>

· <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

· </head>

· <body>

· ...

· </body>

· </html>

这段代码要放到语言包之后jqGrid.js文件之前。
如果浏览器不支持JSON,那么我们只能用eval函数解析json。

除了jqGrid本身提供对json的类库外,我们可以使用JSON.parse来处理JSON,配置如下:

· <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

· <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

· <head>

· <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

· <title>My First Grid</title>

· <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />

· <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

· <script src="js/json2.js" type="text/javascript"></script>

· <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

· <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

· <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

· <script type="text/javascript">

· jQuery.extend(jQuery.jgrid,{

· parse:function(jsstring) {

· return JSON.parse(jsstring);

· }

· });

· </script>

· </head>

· <body>

· ...

· </body>

· </html>

Jqgrid学习 -------翻页

jqGrid的翻页要定义在html里,通常是在grid的下面,且是一个div对象:

· <table id="list"></table>

· <div id="gridpager"></div>

· jQuery("#grid_id").jqGrid({

· ...

· pager : '#gridpager',

· ...

· });

不必给翻页设置任何的css属性。在jqGrid里定义的翻页可以是::pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). 推荐使用前两个,当使用其他方式时jqGrid的导入导出功能时会引起错误。

导航栏的属性:

· $.jgrid = {

· defaults : {

· recordtext: "View {0} - {1} of {2}",

· emptyrecords: "No records to view",

· loadtext: "Loading...",

· pgtext : "Page {0} of {1}"

· },

· ...

如果想改变这些设置:

1. jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...});

2. jQuery("#grid_id").jqGrid({

pager : '#gridpager',

emptyrecords: "Nothing to display",

导航栏的属性:

是否可以被修改

只读属性,实际记录数,千万不能跟 records 参数搞混了,通常情况下他们是相同的,假如我们定义 rowNum=15 ,但我们从服务器端返回的记录为 20 records=20 ,而 reccount=15 ,表格中也显示 15 条记

jqGrid的翻页导航是一个方法,你可以事先定义一些其他操作,比如:编辑、新增、删除及搜索。也可以增加自定义的函数。导航工具栏是定义到翻页控件上的。定义如下:

· <body>

· ...

· <table id="list"></table>

· <div id="gridpager"></div>

· ...

· </body>

· jQuery("#grid_id").jqGrid({

· ...

· pager : '#gridpager',

· ...

· });

· jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);

· jQuery("#grid_id").jqGrid({

· ...

· pager : '#gridpager',

· ...

· });

· jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);

· jQuery("#grid_id").jqGrid({

· ...

· pager : '#gridpager',

· ...

· }).navGrid('#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView);

· ...

grid_id :表格id
gridpager :导航栏id
parameters :参数列表
prmEdit, prmAdd, prmDel, prmSearch, prmView :事件

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

· },

· edit : {

· addCaption: "Add Record",

· editCaption: "Edit Record",

· bSubmit: "Submit",

· bCancel: "Cancel",

· bClose: "Close",

· saveData: "Data has been changed! Save changes?",

· bYes : "Yes",

· bNo : "No",

· bExit : "Cancel",

· },

· view : {

· caption: "View Record",

· bClose: "Close"

· },

· del : {

· caption: "Delete",

· msg: "Delete selected record(s)?",

· bSubmit: "Delete",

· bCancel: "Cancel"

· },

· nav : {

· edittext: "",

· edittitle: "Edit selected row",

· addtext:"",

· addtitle: "Add new row",

· deltext: "",

· deltitle: "Delete selected row",

· searchtext: "",

· searchtitle: "Find records",

· refreshtext: "",

· refreshtitle: "Reload Grid",

· alertcap: "Warning",

· alerttext: "Please, select row",

· viewtext: "",

· viewtitle: "View selected row"

· },

· ...

· ...

· }).navGrid('#gridpager',{view:true, del:false},

· {}, // use default settings for edit

· {}, // use default settings for add

· {},  // delete instead that del:false we need this

· {multipleSearch : true}, // enable the advanced searching

· {closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/

· );

Jqgrid学习 -------自定义按钮

jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});

jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters});

{ caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"}

caption:按钮名称,可以为空,string类型
buttonicon:按钮的图标,string类型,必须为UI theme图标
onClickButton:按钮事件,function类型,默认null
position:first或者last,按钮位置
title:string类型,按钮的提示信息
cursor:string类型,光标类型,默认为pointer
id:string类型,按钮id

如果设置多个按钮:

· jQuery("#grid_id")

· .navGrid('#pager',{edit:false,add:false,del:false,search:false})

· .navButtonAdd('#pager',{

· caption:"Add",

· buttonicon:"ui-icon-add",

· onClickButton: function(){

· alert("Adding Row");

· },

· position:"last"

· })

· .navButtonAdd('#pager',{

· caption:"Del",

· buttonicon:"ui-icon-del",

· onClickButton: function(){

· alert("Deleting Row");

· },

· position:"last"

· });

按钮间的分隔

jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}};

默认参数:

{sepclass : “ui-separator”,sepcontent: ''}

sepclass:ui-jqgrid的属性名
sepcontent:分隔符的内容.

Jqgrid学习 -------格式化

jqGrid的格式化是定义在语言包中

· $jgrid = {

· ...

· formatter : {

· integer : {thousandsSeparator: " ", defaultValue: '0'},

· number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'},

· currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'},

· date : {

· dayNames: [

· "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat",

· "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"

· ],

· monthNames: [

· "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",

· "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"

· ],

· AmPm : ["am","pm","AM","PM"],

· S: function (j) {return j < 11 || j > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((j - 1) % 10, 3)] : 'th'},

· srcformat: 'Y-m-d',

· newformat: 'd/m/Y',

· masks : {

· ISO8601Long:"Y-m-d H:i:s",

· ISO8601Short:"Y-m-d",

· ShortDate: "n/j/Y",

· LongDate: "l, F d, Y",

· FullDateTime: "l, F d, Y g:i:s A",

· MonthDay: "F d",

· ShortTime: "g:i A",

· LongTime: "g:i:s A",

· SortableDateTime: "Y-m-d\\TH:i:s",

· UniversalSortableDateTime: "Y-m-d H:i:sO",

· YearMonth: "F, Y"

· },

· reformatAfterEdit : false

· },

· baseLinkUrl: '',

· showAction: '',

· target: '',

· checkbox : {disabled:true},

· idName : 'id'

· }

· ...

这些设置可以通过colModel中的formatoptions参数修改

· jQuery("#grid_id").jqGrid({

· ...

· colModel : [

· ...

· {name:'myname', ... formatter:'number', ...},

· ...

· ],

· ...

· });

此实例是对名为“myname”的列进行格式化,格式化类是“number”,假如初始值为“1234.1”则格式化后显示为“1 234.10” 。

如果给某列进行格式化:

· jQuery("#grid_id").jqGrid({

· ...

· colModel : [

· ...

· {name:'myname', ... formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "} } ,

· ...

· ],

· ...

· });

这个设置会覆盖语言包中的设置。

select类型的格式化实例:

· jQuery("#grid_id").jqGrid({

· ...

· colModel : [ {name:'myname', edittype:'select', editoptions:{value:"1:One;2:Two"}} ... ],

· ...

· });

使用格式化后

· jQuery("#grid_id").jqGrid({

· ...

· colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} ... ]

· ...

· });

结果是,表格的数据值为1或者2但是现实的是One或者Two。

对超链接使用select类型的格式化:

· jQuery("#grid_id").jqGrid({

· ...

· colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}, ...}

· ...

· ]

· ...

· });

得到 http://localhost/someurl.php?id=123&action=edit

如果想改变id值则

· jQuery("#grid_id").jqGrid({

· ...

· colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit', idName:'myid'}, ...}

· ...

· ]

· ...

· });

得到 http://localhost/someurl.php?myid=123&action=edit

Jqgrid学习 -------自定义格式化

· jQuery("#grid_id").jqGrid({

· ...

· colModel: [

· ...

· {name:'price', index:'price', width:60, align:"center", editable: true, formatter: currencyFmatter },

· ...

· ]

· ...

· });

· function currencyFmatter (cellvalue, options, rowObject)

· // do something here

· return new_format_value

cellvalue:要被格式化的值
options:对数据进行格式化时的参数设置,格式为:
{ rowId: rid, colModel: cm}
rowObject:行数据

数据的反格式化跟格式化用法相似.

· jQuery("#grid_id").jqGrid({

· ...

· colModel: [

· ...

· {name:'price', index:'price', width:60, align:"center", editable: true , formatter:currencyFmatter, unformat:unformatCurrency },

· ...

· ]

· ...

· });

· function currencyFmatter (cellvalue, options, rowObject)

· return "$"+cellvalue;

· function unformatCurrency (cellvalue, options)

· return cellvalue.replace("$","");

表格中数据实际值为123.00,但是显示的是$123.00; 我们使用getRowData ,getCell 方法取得的值是123.00。
创建通用的格式化函数

· <script type="text/javascript">

· jQuery.extend($.fn.fmatter , {

· currencyFmatter : function(cellvalue, options, rowdata) {

· return "$"+cellvalue;

· });

· jQuery.extend($.fn.fmatter.currencyFmatter , {

· unformat : function(cellvalue, options) {

· return cellvalue.replace("$","");

· });

· </script>

具体使用:

· jQuery("#grid_id").jqGrid({

· ...

· colModel: [

· ...

· {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},

· ...

· ]

· ...

· })

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 设置

此参数只用到单列搜索上,说明搜索条件。可用值: ['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']

· 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
当点击刷新按钮时不会使用搜索条件
每个搜索方法都有自己的数据清空方法

Jqgrid学习 -------搜索工具栏

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

jQuery("#grid_id").filterToolbar(options);

jQuery("#grid_id").jqGrid('filterToolbar',options);

options:参数

当为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

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