【JQGRID DOCUMENTATION】.学习笔记.4.Navigator

本文介绍jqGrid Navigator插件,该插件使查找或编辑记录变得简单。开发者可通过自定义动作或使用预设动作来增强用户体验。文章详细解释了如何启用各种操作如添加、编辑、删除等,并提供了配置示例。

Navigator是一个将查找或编辑记录的动作,变得非常容易达到用户交互特性。开发者可以创建自定义动作,也可以使用六个预定义的动作。jqGrid为预定义的动作提供icon button图形。

一组完整的预定义动作包括

  1. 添加新行
  2. 编辑选中行
  3. 查看选中行
  4. 删除选中行
  5. 查找纪录
  6. 重载grid

Navigator是一个jqGrid方法,它可以通过扩展grid主方法来激活和配置。内置的Navigator必须应用在pager元素上。另外,pager元素应该被定义。内置的Navigator动作相当于表单编辑动作,可以参考Form Editing。
有三种调用方法

1 $("#list").navGrid('#pager'); 2 $("#list").jqGrid("navGrid","#pager"); 3 或者链式调用 4 $("#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上的文字定义在语言文件中。

参数列表

PropertyTypeDescriptionDefault
addboolean启用或禁用Navigator的add动作。当按钮被点击,一个带参数的editGridRow新方法被执行true
addiconstring为add动作设置icon。目前只有UI主题的图片可以被使用ui-icon-plus
addtextstringadd按钮的文本empty
addtitlesting当鼠标位于上方时显示的文本Add new row
alertcapstring当我们要编辑、删除或浏览行,却没有选择行时,出现的消息框的headerWarning
alerttextstring当我们要编辑、删除或浏览行,却没有选择行时,出现的消息框的textPlease,select row
cloneToTopboolean将底部pager的所有动作克隆到顶部pager。注意,此时navGrid只能应用在顶部pager。顶部pager的id是grid id和”_toppager”的结合false
closeOnEscapeboolean指明用户是否能用ESC键关闭警告对话框true
delboolean启用或禁用删除动作。当按钮被点击,delGridRow方法被执行 
deliconstring如果删除动作启用,设置它的icon。目前只能使用UI主题的图片。ui-icon-trash
deltextstring删除按钮上定义的文本empty
deltitlestring当鼠标位于按钮上方时显示的文本Delete selected row
editboolean启用或禁用导航的编辑动作。当按钮被点击时,当前选中的行作为editGridRow方法的参数被执行true
editiconstring如果编辑动作启用设置一个icon。注意目前只能使用UI主题的图片ui-icon-pencil
editextstring编辑按钮上的文本empty
edittitlestring当鼠标位于按钮上方时显示的文本Edit select row
positionstring指明Navigator按钮在pager上的位置。可以是left,center,rightleft
refreshboolean启用或禁用刷新按钮。当点击时,触发reloadGrid被执行,并且查询参数被清空true
refreshiconstring设置刷新动作的icon。注意ui-icon-refresh
refreshtextstring刷新按钮上的文本empty
refreshtitlestring鼠标位于按钮上方时显示的titleReload Grid
refreshstatestring指明grid怎样重载
firstpage重载第一页的数据
current重载应该保存当前页和当前节点
firstpage
afterRefreshfunction如果定义了,则在刷新按钮被点击后触发null
beforeRefreshfunction如果定义了,则在刷新按钮被点击前触发null
searchboolean启用或禁用pager上的搜索按钮。当按钮点击时,searchGrid方法被执行true
searchiconstring设置搜索动作的icon。注意只能使用ui-icon-search
searchtextstring搜索按钮上的文本empty
searchtitlestring当鼠标在按钮上方时显示的titleFind records
viewboolean启用或禁用浏览按钮。当按钮被点击时,viewGridRow方法被执行false
viewiconstring设置浏览动作的icon,注意只能ui-icon-document
viewtextstring设置浏览按钮的文本empty
viewtitlestring当鼠标在按钮上方时显示的titleView selected row
addfuncfunction如果定义了,则替代内置add函数。这个函数没有参数null
editfuncfunction如果定义了,则替代内置edit函数。被编辑行的id会作为参数传递给函数null
delfuncfunction如果定义了,则替代内置del函数。被编辑航的id会作为参数传递给函数null
1 <script> 2 ... 3 jQuery("#grid_id").jqGrid({ 4 ... 5 pager : '#gridpager', 6 ... 7 }).navGrid('#gridpager',{view:true, del:false}, 8 {}, // 使用eidt的默认设置 9 {}, // 使用add的默认设置10 {}, // delete instead that del:false we need this11 {multipleSearch : true}, // 启用改进版的搜索12 {closeOnEscape:true} /* 允许使用ESC键关闭视图对话框*/13 ); 14 ... 15 </script>

转载于:https://www.cnblogs.com/msdynax/p/3312814.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值