jqGrid与Struts2的结合应用(四) —— 丰富多彩的Pager Bar
来源:互联网 发布:手拉鸡专卖网淘宝付款 编辑:程序博客网 时间:2024/04/30 12:50
在介绍排序与查询之前,先介绍一下Pager、Navigator和自定义按钮。
默认情况下,Pager Bar分为3个部分:
- 页码栏区域(Pager)
- 导航按钮区域(Navigator Buttons)
- 记录信息区域(Record Information)
1. Pager和Record Information的常用属性
在jqGrid的options选项中,有许多是专门针对Pager的,之前的例子中已经使用了一个——“pager”选项,用来指明Pager Bar在页面中对应的区域。
主要的属性有:
- pager:必须是一个有效的html元素。这个元素可以根据页面的需要,被放置于页面的任何位置。在指定pager选项的值的时候,可以使用三种形式:'pager'、'#pager'、$('#pager')。但推荐使用第二种,即'#pager'。
- pgbuttons:决定在Pager Bar里是否显示用于翻页的按键,默认为true。
- pginput:决定在Pager Bar里是否显示用于输入目标页码的输入框,默认为true。
- pgtext:显示当前页码状态的字符串,这个与所选用的language文件有关,具体的文本格式定义在里面。例如默认的英文格式就是“Page {0} of {1}”,其中{0}代表当前载入的页码;{1}代表页码的总数。
- pagerpos:用于定义页码栏在Pager Bar中的位置,默认情况下为center,还可以是left或right。
- rowNum:定义一次性显示多少条记录,默认值为20;这个选项在第一篇文章中已经介绍过了。
- rowList:定义rowNum可供选择的值的数组,默认值为空数组;这个选项在第一篇文章中也已经介绍过了。
- lastpage:只读属性,返回页码总数,也即从response中解析出来的那个对应着“total”项的值(参见第一篇文章jsonReader部分)。
- viewrecords:定义是否在Pager Bar中显示记录数信息。
- recordpos:用于定义记录信息在Pager Bar中的显示位置,默认为right,还可以是left或center。
- records:只读属性,返回记录总数,也即从response中解析出来的那个对应着“record”项的值(参见第一篇文章jsonReader部分)。
- recordtext:记录信息显示时所使用的文本格式,只有当viewrecords为true,且记录总数大于0的时候才会显示。其格式与所选用的language文件有关,具体的文本格式定义在里面。例如默认的英文格式就是“View {0} - {1} of {2}”,其中{0}代表当前页第一条记录在整个记录总数中的位置;{1}代表当前页最后一条记录在整个记录总数中的位置;{2}代表所有记录的总数。
注1:这些属性(选项),并不都是可以用jqGrid的setGridParam方法在初始化之后改变值的。比如pgtext、recordtext、rowNum就是可以修改的,而其余的都是不能修改的,也即只能使用默认值,或者在jqGrid初始化的时候就定义好了。
注2:在jqGrid创建并初始化之后,修改这些关于Pager的属性,都必须执行trigger("reloadGrid")才能生效。
注3:在第一篇文章中我曾写到,经过测试jqGrid的caption似乎也不能用setGridParam方法改变并生效。我再次查了一下文档,发现这个选项也明确标注着也是不能改变,除非使用相应的setCaption方法。
2. Navigator
默认有6个预定义好的按钮:
- 添加新行
- 编辑选中的行
- 查看选中的行
- 删除选中的行
- 查找记录
- 重载表格
Navigator通过navGrid方法来配置导航栏,用法是:
$("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
或
$("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
关于各种参数的具体说明,请参考官方文档(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator)
2.1 关于Navigator的参数
- add:定义是否启用添加操作的按钮;
- addicon:用于添加操作的按钮上的图标,目前只能使用jQuery UI中的图标样式;
- addtext:用于添加操作的按钮上的文本;
- addtitle:用于添加操作的按钮上的tooltip;
- del/delicon/deltext/deltitle:用于删除按钮的一套属性,可以参照添加按钮的几个属性;
- edit/editicon/edittext/edittitle:用于编辑按钮的一套属性,可以参照添加按钮的几个属性;
- refresh/refreshicon/refreshtext/refreshtitle:用于刷新表格按钮的一套属性,可以参照添加按钮的几个属性;当点击这个按钮时,将执行trigger("reloadGrid")并清除用于查询的参数;
- refreshstate:定义如何重新载入Grid表格,firstpage:重新载入表格的第一页;current:重新载入当前页,并保存当前选中的行;默认为firstpage;
- afterRefresh:定义点击刷新表格按钮之后的事件函数;
- beforeRefresh:定义点击刷新表格按钮之前的事件函数;
- search/searchicon/searchtext/searchtitle:用于查询按钮的一套属性,可以参照添加按钮的几个属性;当点击这个按钮时,将会调用searchGrid方法;
- view/viewicon/viewtext/viewtitle:用于查看记录按钮的一套属性,可以参照添加按钮的几个属性;
- addfunc:如果定义,则用定义的函数替代原有的add函数,这个函数将不接受任何参数;
- editfunc:如果定义,则用定义的函数替代原有的edit函数,编辑的行的id作为参数传入这个函数;
- delfunc:如果定义,则用定义的函数替代原有的del函数,编辑的行的id作为参数传入这个函数;
- alertcap:当未选中任何行而点击编辑、删除、查看按钮时,弹出的提示框的标题;
- alerttext:当未选中任何行而点击编辑、删除、查看按钮时,弹出的提示信息;
- cloneToTop:定义是否“拷贝”一套导航按钮到Grid表格顶端的Pager中,默认为false;
借助这些选项,可以将上一篇中的例子,修改一下,更多的借助jqGrid内置的功能。例如,当载入行数据到对话框时,之前是通过在自定义的loadSelectedRowData方法中,调用jqGrid("getGridParam", "selrow")来检查是否有选中的数据行。现在在点击编辑或删除按钮的时候,可以通过jqGrid自己检查是否有选中的数据行,如果没有则弹出提示。如果有则选中的行,则还会将行id作为参数,传入对应的函数方法中。
将代码修改如下:
说明:(2)(3)处意味着,当点击编辑或删除按钮时,如果有数据行被选中,则将行id作为参数传入对应的openDialog4Updating和openDialog4Deleting方法中;如果没有选中的行,则将弹出窗口,提示信息。
2.2 关于prmEdit、prmAdd、prmDel、prmSearch、prmView的参数
jqGrid本身为这些参数定义了默认值,而且不同的language文件也有各自的定义来覆盖原始的默认值。我们也可以在jqGrid重新定义新的值,以覆盖默认的值。
例如:
具体的参数如下,也可参考官方文档(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator)
3. 自定义按钮
jqGrid还允许将自定义的按钮加入Page Bar,具体API是:
$("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});
或者
$("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters});
关于navButtonAdd的属性:
- caption:按钮上的文本,可以是空值;
- buttonicon:按钮上的图标,如果设为“none”,则只显示按钮上的文本;
- onClickButton:当点击按钮时所调用的方法函数,默认为null;
- position:添加新按钮的位置,first或last;默认为last;
- title:新按钮的tooltip
- cursor:当鼠标滑过按钮时的光标样式,默认为pointer;
- id:为按钮设置id。
4. 自定义分隔符
$("#grid_id").navSeparatorAdd('#pager',{separator_parameters});
相关属性:
- sepclass:分隔符的CSS样式;
- sepcontent:分隔符中的内容;
附:相关代码
javascript部分:
- jqGrid与Struts2的结合应用(四) —— 丰富多彩的Pager Bar
- jqGrid与Struts2的结合应用(四) —— 丰富多彩的Pager Bar
- jqGrid与Struts2的结合应用(四) —— 丰富多彩的Pager Bar
- jqGrid与Struts2的结合应用(四) —— 丰富多彩的Pager Bar
- jqGrid与Struts2的结合应用(四) —— 丰富多彩的Pager Bar
- jqGrid与Struts2的结合应用(四) ------ 丰富多彩的Pager Bar .
- Jqgrid入门-别具特色的Pager Bar (四)
- jqGrid与Struts2的结合应用(五) —— 结合Action类进行数据查询
- jqGrid与Struts2的结合应用(五) —— 结合Action类进行数据查询
- jqGrid与Struts2的结合应用(五) —— 结合Action类进行数据查询
- jqGrid与Struts2的结合应用(五) —— 结合Action类进行数据查询
- jqGrid与Struts2的结合应用(五) —— 结合Action类进行数据查询
- jqGrid与Struts2的结合应用(五) —— 结合Action类进行数据查询
- jqGrid与Struts2的结合应用
- jqGrid与Struts2的结合应用(八) —— 奇妙的subGrid子表格
- jqGrid与Struts2的结合应用(十) —— 真正的自定义表单查询
- jqGrid与Struts2的结合应用(八) —— 奇妙的subGrid子表格
- jqGrid与Struts2的结合应用(十) —— 真正的自定义表单查询
- [转]Flex 项目不能运行jsp文件 java.lang.ClassCastException: org.apache.catalina.util.DefaultAnnotationProcessor
- 成大事必备9种能力、9种手段、9种心态
- VS2005 在编译C++时候遇到的错误和警告
- SQL 7.9 游标,row_number() ,update的另一种写法
- 解决XMLHttpRequest中文乱码问题
- jqGrid与Struts2的结合应用(四) —— 丰富多彩的Pager Bar
- C#会重蹈覆辙吗?系列之3:事件背后的臃肿设计哲学
- c++ , java unwind 展开过程 ,看不太懂
- 关于构造函数继承的两点注意
- 26条开车心得+车辆出险保险索
- 新版中日交流标准日本语初级第三课之基本课文I
- 神贴留念
- MySQL导入导出数据库
- Ubuntu Server 安装桌面