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",
...
});
导航栏的属性：
|
属性名 |
类型 |
说明 |
默认值 |
是否可以被修改 |
|
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*/
· );
