jqGrid学习 -------------- 翻页（2）
jqGrid的翻页导航是一个方法，你可以事先定义一些其他操作，比如：编辑、新增、删除及搜索。也可以增加自定义的函数。导航工具栏是定义到翻页控件上的。定义如下：
JS的用法：
如果使用新API：
或者：
grid_id ：表格id
gridpager ：导航栏id
parameters ：参数列表
prmEdit, prmAdd, prmDel, prmSearch, prmView ：事件
参数使用：
详细参数说明
实例：
... <body> ... <table id="list"></table> <div id="gridpager"></div> ... </body>
JS的用法：
<script>
...
jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
...
});
jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
...
</script>
如果使用新API：
<script>
...
jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
...
});
jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
...
</script>
或者：
<script>
...
jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
...
}).navGrid('#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView);
...
</script>
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 | 当鼠标移到查看按钮上的提示信息 | 查看所选记录 |
实例：
<script>
...
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*/
);
...
</script>