JqGrid 中 navGridd方法使用方法
导航是一个用户界面，可以简单执行记录操作如查找或者编辑，用户可以执行表格操作通过点击对应的在导航栏上的图标按钮。
开发者可以创建自定义的动作，或者使用jqGrid已经定义的6个动作。jqGrid预定义的动作如下
- 添加新记录
- 编辑选择的行
- 查看选择的记录
- 删除选择的行
- 查找记录
- 重新加载grid
这6个按钮在导航层的底部左边位置，如下图所示
导航层不一定在底部，可以放置到grid窗体内。同时，导航层是可选的，可以删除掉。
* 可以在导航才呢过添加有自定义动作的 jqGrid自定义按钮
-
可以修改鼠标移动到按钮上提示的信息（参考下面的，text可以在语言文件中找到）
* 导航按钮可以放在左边，中间或者右边
如何使用
Navigator是jqGrid的方法，可以通过扩展jqGrid的方法来激活配置，如下面的示例所示。最下面给出客配置的参数。
内置的导航放置在分页元素内容。所有jqGrid的pager需要配置过。内置的导航动作对应表单编辑动作
定义
要使用导航，Form Edit module , Common module 和可选的 the search and Modal modules需要被勾选，下载地址：http://www.trirand.com/blog/?page_id=6
HTML定义
<body>
...
<table id="list"> table>
<div id="gridpager"> div>
...
body>
...
<table id="list"> table>
<div id="gridpager"> div>
...
body>
－收缩
JavaScript代码
jQuery(
"#grid_id").jqGrid({
...
pager : '#gridpager',
...
});
jQuery( "#grid_id").navGrid( '#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
...
...
pager : '#gridpager',
...
});
jQuery( "#grid_id").navGrid( '#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
...
新API调用方式
－收缩
JavaScript代码
//...
jQuery( "#grid_id").jqGrid({
//...
pager : '#gridpager',
//...
});
jQuery( "#grid_id").jqGrid( '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);
//...
链式调用方式
－收缩
JavaScript代码
//...
jQuery( "#grid_id").jqGrid({
//...
pager : '#gridpager',
...
}).navGrid( '#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView);
//...
jQuery( "#grid_id").jqGrid({
//...
pager : '#gridpager',
...
}).navGrid( '#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView);
//...
参数说明
-
grid_id：已经被实例化过的jqGrid对象的id
-
gridpager：导航条容器id
-
parameters ：下面列出的配置项
-
prmEdit, prmAdd, prmDel, prmSearch, prmView ：json对象，包含表单编辑中需要的参数和事件，参考 Form editing
prmEdit, prmAdd, prmDel, prmSearch, prmView 需要定义一个id参数以便区分导航按钮，如果id没有定义，将使用前缀和grid的id组成。【注意这几个参数的循序，循序搞错定义的对象还是按照上面的循序来定义，如你只需要添加按钮，prmEdit这个参数不能省略，传递{}启用默认配置】
如果按钮id没有设置，将使用如下规则生成id。
- 添加按钮，id为 “add_"+grid的id
- 编辑按钮，id为 “edit_"+grid的id
- 删除按钮，id为 “del_"+grid的id
- 查看按钮，id为 “view_"+grid的id
- 查找按钮，id为 “search_"+grid的id
- 刷新按钮，id为 “refresh_"+grid的id
－收缩
JavaScript代码
//...
jQuery( "#grid_id").jqGrid({
//...
pager : '#gridpager',
...
}).navGrid( '#gridpager',{}, {id: 'myedit'});
//...
jQuery( "#grid_id").jqGrid({
//...
pager : '#gridpager',
...
}).navGrid( '#gridpager',{}, {id: 'myedit'});
//...
如果ui-state-disabled 养生被添加到这些按钮中，按钮及点击动作都会被禁用。
参数
导航可以使用下面的选项，来自语言配置文件。
如果想修改鼠标悬浮再按钮上时提示的信息，可以替换示例代码最下面的title内容，例如，修改查看按钮的鼠标悬浮提示信息，viewtitle: “View selected row”
－收缩
JavaScript代码
$.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"
},
...
...
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"
},
...
$.jgrid.edit, $.jgrid.add, $.jgrid.del and $.jgrid.search 这些配置的按钮显示在同一行上。
parameters的玩完整配置如下
| 配置名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| add | boolean | 是否在导航栏中显示添加操作。点击这个按钮将会调用addRow(addParams)方法 | true |
| addicon | string | 设置添加按钮的图标。目前仅能设置为UI比附中的图标 | ui-icon-plus |
| addtext | string | 在添加按钮中显示的文本内容 | empty |
| addtitle | string | 鼠标移动到添加按钮上时显示的提示信息 | Add new row |
| alertcap | string | 没有选择某行时，点击编辑，删除，查看按钮，弹出的提示窗口标题栏显示的信息 | Warning |
| alerttext | string | 没有选择某行时，点击编辑，删除，查看按钮，弹出的提示窗口内容容器显示的信息 | Please, select row |
| cloneToTop | boolean | 设置为true，所有底部分页的动作都会被克隆并且添加到顶部分页去。注意navGrid只能做yuyu顶部分页。顶部分页容器id格式为griid+"_toppager” | false |
| closeOnEscape | boolean | 定义提示窗口是否可以通过按ESC键关闭 | true |
| del | boolean | 是否在导航栏中显示删除操作。点击这个按钮将会调用delGridRow()方法 | true |
| delicon | string | 设置删除按钮的图标。目前仅能设置为UI比附中的图标 | ui-icon-trash |
| deltext | string | 在删除按钮中显示的文本内容 | empty |
| deltitle | string | 鼠标移动到添加删除上时显示的提示信息 | Delete selected row |
| edit | boolean | 是否在导航栏中显示编辑操作。点击这个按钮将会调用editRow(editParams)方法 | true |
| editicon | string | 设置编辑按钮的图标。目前仅能设置为UI比附中的图标 | ui-icon-pencil |
| edittext | string | 在编辑按钮中显示的文本内容 | empty |
| edittitle | string | 鼠标移动到编辑按钮上时显示的提示信息 | Edit selected row |
| position | string | 定义导航按钮在分页容器中的位置，可用值有： left, center 和 right. | left |
| refresh | boolean | 是否在导航栏中显示刷新操作。点击这个按钮将会调用trigger(“reloadGrid”) 并且清空查询参数。 | true |
| refreshicon | string | 设置刷新按钮的图标。目前仅能设置为UI比附中的图标 | ui-icon-refresh |
| refreshtext | string | 在刷新按钮中显示的文本内容 | empty |
| refreshtitle | string | 鼠标移动到刷新按钮上时显示的提示信息 | Reload Grid |
| refreshstate | string | 定义grid要如何重新加载。 firstpage ：grid重新加载第一页数据. current ：保存当前页和当前选择 |
firstpage |
| afterRefresh | function | 定义点击刷新按钮后触发的事件 | null |
| beforeRefresh | function | 定义点击刷新按钮前触发的事件 | null |
| search | boolean | 是否在导航栏中显示查询操作。点击这个按钮将会调用searchGrid 方法 | true |
| searchicon | string | 设置刷新按钮的图标。目前仅能设置为UI比附中的图标 | ui-icon-search |
| searchtext | string | 在刷新按钮中显示的文本内容 | empty |
| searchtitle | string | 鼠标移动到刷新按钮上时显示的提示信息 | Find records |
| view | boolean | 是否在导航栏中显示查看操作。点击这个按钮将会调用viewGridRow 方法 | false |
| viewicon | string | 设置查看按钮的图标。目前仅能设置为UI比附中的图标 | ui-icon-document |
| viewtext | string | 在查看按钮中显示的文本内容 | empty |
| viewtitle | string | 鼠标移动到查看按钮上时显示的提示信息 | View selected row |
| addfunc | function | 配置此函数将会替换内置的添加操作处理函数。此方法没有参数 | null |
| editfunc | function | 配置此函数将会替换内置的编辑操作处理函数。参数被编辑的行id | null |
| delfunc | function | 配置此函数将会替换内置的删除操作处理函数。参数被编辑的行id | null |
示例
－收缩
JavaScript代码
//...
jQuery( "#grid_id").jqGrid({
//...
pager : '#gridpager',
//...
}).navGrid( '#gridpager',{view: true, del: false}, //启用查看按钮，禁用删除按钮
{}, // 使用默认的修改配置
{}, // 使用默认的添加配置
{}, // delete instead that del:false we need this
{multipleSearch : true}, // 语序高级查询
{closeOnEscape: true} /* 用户按下ESC键后可以关闭对话框*/
);
//...
jQuery( "#grid_id").jqGrid({
//...
pager : '#gridpager',
//...
}).navGrid( '#gridpager',{view: true, del: false}, //启用查看按钮，禁用删除按钮
{}, // 使用默认的修改配置
{}, // 使用默认的添加配置
{}, // delete instead that del:false we need this
{multipleSearch : true}, // 语序高级查询
{closeOnEscape: true} /* 用户按下ESC键后可以关闭对话框*/
);
//...
上面的代码启用查看操作，并且可以通过ESC键关闭提示对话框，设置高级查询，同时禁用了删除按钮