Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
系列索引
Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid
Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据
Web jquery表格组件 JQGrid 的使用 - 全部代码
Web jquery表格组件 JQGrid 的使用 - 11.问题研究
目录
翻页
5.Pager翻页、搜索、格式化、自定义按钮
翻页
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",
...
});
导航栏的属性：
|
属性名 |
类型 |
说明 |
默认值 |
是否可以被修改 |
|
lastpage |
integer |
只读属性，总页数 |
0 |
NO |
|
pager |
mixed |
导航栏对象，必须是一个有效的html元素，位置可以随意 |
空字符串 |
NO |
|
pagerpos |
string |
定义导航栏的位置，默认分为三部分：翻页，导航工具及记录信息 |
center |
NO |
|
pgbuttons |
boolean |
是否显示翻页按钮 |
true |
NO |
|
pginput |
boolean |
是否显示跳转页面的输入框 |
true |
NO |
|
pgtext |
string |
页面信息，第一个值是当前页第二个值是总页数 |
语言包 |
YES |
|
reccount |
integer |
只读属性，实际记录数，千万不能跟records 参数搞混了，通常情况下他们是相同的，假如我们定义rowNum=15，但我们从服务器端返回的记录为20即records=20，而reccount=15，表格中也显示15条记录 |
0 |
NO |
|
recordpos |
string |
定义记录信息的位置，可选值：left, center, right |
right |
NO |
|
records |
integer |
只读属性，从服务器端返回的记录数 |
none |
NO |
|
recordtext |
string |
显示记录的信息，只有当viewrecords为true时起效，且记录数必须大于0 |
语言包 |
yes |
|
rowList |
array |
可以改变表格可以显示的记录数，格式为[10,20,30] |
array |
no |
|
rowNum |
integer |
设置表格可以显示的记录数 |
20 |
yes |
|
viewrecords |
boolean |
是否要显示总记录数信息 |
false |
no |
jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid");
跟翻页相关的事件只有一个：onPaging
|
onPaging |
pgButton |
当点击翻页按钮但还为展现数据时触发此事件，当然这跳转栏输入页码改变页时也同样触发此事件。参数pgButton可选值： first,last,prev,next |
|
|
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"
},
...
|
属性 |
类型 |
说明 |
默认值 |
|
add |
boolean |
是否启用新增功能，当点击按钮时会触发editGridRow事件 |
true |
|
addicon |
string |
给新增功能设置图标，只有UI theme里的图标才可以使用 |
ui-icon-plus |
|
addtext |
string |
新增按钮上的文字 |
空 |
|
addtitle |
string |
当鼠标移到新增按钮上时显示的提示 |
新增一行 |
|
alertcap |
string |
当我们edit,delete or view一行记录时出现的提示信息 |
警告 |
|
alerttext |
string |
当edit,delete or view一行记录时的文本提示 |
请选择一行记录 |
|
closeOnEscape |
boolean |
是否可以使用esc键关闭对话框 |
true |
|
del |
boolean |
是否启用删除功能，启用时会触发事件delGridRow |
true |
|
delicon |
string |
设置删除按钮的图标，只有UI theme里的图标才可以使用 |
ui-icon-trash |
|
deltext |
string |
设置到删除按钮上的文字信息 |
空 |
|
deltitle |
string |
当鼠标移到删除按钮上时出现的提示 |
删除锁选择的行 |
|
edit |
boolean |
是否启用可编辑功能，当编辑时会触发事件editGridRow |
true |
|
editicon |
string |
设置编辑按钮的图标，只有UI theme里的图标才可以使用 |
ui-icon-pencil |
|
edittext |
string |
编辑按钮上文字 |
空 |
|
edittitle |
string |
当鼠标移到编辑按钮上出现的提示信息 |
编辑所选择的行 |
|
position |
string |
定义按钮位置，可选值left, center and right. |
left |
|
refresh |
boolean |
是否启用刷新按钮，当点击刷新按钮时会触发trigger(“reloadGrid”)事件，而且会清空搜索条件值 |
true |
|
refreshicon |
string |
设置刷新图标，只有UI theme里的图标才可以使用 |
ui-icon-refresh |
|
refreshtext |
string |
刷新按钮上文字信息 |
空 |
|
refreshtitle |
string |
当鼠标移到刷新按钮上的提示信息 |
重新加载 |
|
refreshstate |
string |
指明表格如何刷新。firstpage：从第一页开始刷新；current：只刷新当前页内容 |
firstpage |
|
afterRefresh |
function |
当点击刷新按钮之后触发此事件 |
null |
|
search |
boolean |
是否启用搜索按钮，会触发searchGrid 事件 |
true |
|
searchhicon |
string |
设置搜索按钮的图标，只有UI theme里的图标才可以使用 |
ui-icon-search |
|
searchtext |
string |
搜索按钮上的文字 |
空 |
|
searchtitle |
string |
当鼠标移到搜索按钮上的提示信息 |
搜索 |
|
view |
boolean |
是否启用查看按钮，会触发事件viewGridRow |
false |
|
viewicon |
string |
设置查看按钮的图标，只有UI theme里的图标才可以使用 |
ui-icon-document |
|
viewtext |
string |
查看按钮上文字 |
空 |
|
viewtitle |
string |
当鼠标移到查看按钮上的提示信息 |
查看所选记录 |
jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
...
}).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*/
);
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的格式化是定义在语言包中
$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
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},
...
]
...
})
表格中所有的列都可以作为搜索条件。
所用到的语言包文件
$.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 |
