Navigator是一个将查找或编辑记录的动作，变得非常容易达到用户交互特性。开发者可以创建自定义动作，也可以使用六个预定义的动作。jqGrid为预定义的动作提供icon button图形。
一组完整的预定义动作包括
- 添加新行
- 编辑选中行
- 查看选中行
- 删除选中行
- 查找纪录
- 重载grid
Navigator是一个jqGrid方法，它可以通过扩展grid主方法来激活和配置。内置的Navigator必须应用在pager元素上。另外，pager元素应该被定义。内置的Navigator动作相当于表单编辑动作，可以参考Form Editing。
有三种调用方法
$("#list").navGrid('#pager');
$("#list").jqGrid("navGrid","#pager");
或者链式调用
$("#list").jgGrid({.......}).navGrid("#pager")
$("#list").jqGrid("navGrid","#pager");
或者链式调用
$("#list").jgGrid({.......}).navGrid("#pager")
- list是已经构建好的jgGrid的id
- pager是navigation bar的id
- parameters是一个设置数组，后面会定义
- prmEdit，prmAdd，prmDel，prmSearch，prmView是Form editing中指定动作的参数和事件对象
通过prmEdit….定义的每个特别的模块的id参数都会被传递，这是为了识别Navigator中的button的id。如果id没有定义，我们使用前缀和grid id的组合。如add按钮的id会是这样add_gridid。
Navigator上的文字定义在语言文件中。
参数列表
| Property | Type | Description | Default |
| add | boolean | 启用或禁用Navigator的add动作。当按钮被点击，一个带参数的editGridRow新方法被执行 | true |
| addicon | string | 为add动作设置icon。目前只有UI主题的图片可以被使用 | ui-icon-plus |
| addtext | string | add按钮的文本 | empty |
| addtitle | sting | 当鼠标位于上方时显示的文本 | Add new row |
| alertcap | string | 当我们要编辑、删除或浏览行，却没有选择行时，出现的消息框的header | Warning |
| alerttext | string | 当我们要编辑、删除或浏览行，却没有选择行时，出现的消息框的text | Please,select row |
| cloneToTop | boolean | 将底部pager的所有动作克隆到顶部pager。注意，此时navGrid只能应用在顶部pager。顶部pager的id是grid id和”_toppager”的结合 | false |
| closeOnEscape | boolean | 指明用户是否能用ESC键关闭警告对话框 | true |
| del | boolean | 启用或禁用删除动作。当按钮被点击，delGridRow方法被执行 | |
| delicon | string | 如果删除动作启用，设置它的icon。目前只能使用UI主题的图片。 | ui-icon-trash |
| deltext | string | 删除按钮上定义的文本 | empty |
| deltitle | string | 当鼠标位于按钮上方时显示的文本 | Delete selected row |
| edit | boolean | 启用或禁用导航的编辑动作。当按钮被点击时，当前选中的行作为editGridRow方法的参数被执行 | true |
| editicon | string | 如果编辑动作启用设置一个icon。注意目前只能使用UI主题的图片 | ui-icon-pencil |
| editext | string | 编辑按钮上的文本 | empty |
| edittitle | string | 当鼠标位于按钮上方时显示的文本 | Edit select row |
| position | string | 指明Navigator按钮在pager上的位置。可以是left,center,right | left |
| refresh | boolean | 启用或禁用刷新按钮。当点击时，触发reloadGrid被执行，并且查询参数被清空 | true |
| refreshicon | string | 设置刷新动作的icon。注意 | ui-icon-refresh |
| refreshtext | string | 刷新按钮上的文本 | empty |
| refreshtitle | string | 鼠标位于按钮上方时显示的title | Reload Grid |
| refreshstate | string | 指明grid怎样重载 firstpage重载第一页的数据 current重载应该保存当前页和当前节点 |
firstpage |
| afterRefresh | function | 如果定义了，则在刷新按钮被点击后触发 | null |
| beforeRefresh | function | 如果定义了，则在刷新按钮被点击前触发 | null |
| search | boolean | 启用或禁用pager上的搜索按钮。当按钮点击时，searchGrid方法被执行 | true |
| searchicon | string | 设置搜索动作的icon。注意只能使用 | ui-icon-search |
| searchtext | string | 搜索按钮上的文本 | empty |
| searchtitle | string | 当鼠标在按钮上方时显示的title | Find records |
| view | boolean | 启用或禁用浏览按钮。当按钮被点击时，viewGridRow方法被执行 | false |
| viewicon | string | 设置浏览动作的icon，注意只能 | ui-icon-document |
| viewtext | string | 设置浏览按钮的文本 | empty |
| viewtitle | string | 当鼠标在按钮上方时显示的title | View selected row |
| addfunc | function | 如果定义了，则替代内置add函数。这个函数没有参数 | null |
| editfunc | function | 如果定义了，则替代内置edit函数。被编辑行的id会作为参数传递给函数 | null |
| delfunc | function | 如果定义了，则替代内置del函数。被编辑航的id会作为参数传递给函数 | null |
...
jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
...
}).navGrid('#gridpager',{view:true, del:false},
{}, // 使用eidt的默认设置 {}, // 使用add的默认设置 {}, // delete instead that del:false we need this {multipleSearch : true}, // 启用改进版的搜索 {closeOnEscape:true} /* 允许使用ESC键关闭视图对话框*/ );
...
</script>
jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
...
}).navGrid('#gridpager',{view:true, del:false},
{}, // 使用eidt的默认设置 {}, // 使用add的默认设置 {}, // delete instead that del:false we need this {multipleSearch : true}, // 启用改进版的搜索 {closeOnEscape:true} /* 允许使用ESC键关闭视图对话框*/ );
...
</script>