Jqgrid入门-别具特色的Pager Bar (四)
2013-06-28 17:04
134 查看
Pager Bar位于表格最下边。默认情况下,分为三部分。如图:
第一部分:导航按钮栏(Navigator)
第二部分:页码栏(Pager)
第三部分:记录信息栏(Record)
要实现这个功能也不难,最基本的语法就一句。
但是很多时候我们需要的不仅仅是这种,还有很多属性需要了解。
1. Navigator
默认有5个预定义好的按钮:
添加新行
编辑选中的行
删除选中的行
查找记录
重载表格
Navigator通过navGrid方法来配置导航栏,用法是:
$(“#grid_id”).navGrid(‘#gridpager’,{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView); 或
$(“#grid_id”).jqGrid(‘navGrid’,'#gridpager’,{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
1.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作为参数,传入对应的函数方法中。代码如下:
1.2 关于prmEdit、prmAdd、prmDel、prmSearch、prmView的参数
Jqgird本身为这些参数定义了默认值,而且不同的language文件也有各自的定义来覆盖原始的默认值。我们也可以在jqGrid重新定义新的值,以覆盖默认的值。在我做的DEMO中,没有涉及这一块,所以具体的参数可以查看官方文档。地址:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator
1.3自定义按钮
有的时候,Jqgrid默认的按钮可能不能满足我们的要求,别急,它还提供了添加自定义按钮的方法。具体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。
比如我们可以利用Jqgrid的自定义按钮的方法,在Navigator里面加入打印、下载等方法。这些方法可以自己实现。
2. Pager和Record的属性
这两个区域的属性我们一般不需要改变什么,用默认的就行了,如果想要了解它的属性,可以去官方文档看看。官方文档:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager
下一章节就开始讨论Dao层的方法该如何实现。
原创文章,转载请注明: 转载自java开发者
本文链接地址: Jqgrid入门-别具特色的Pager Bar (四)
第一部分:导航按钮栏(Navigator)
第二部分:页码栏(Pager)
第三部分:记录信息栏(Record)
要实现这个功能也不难,最基本的语法就一句。
1. Navigator
默认有5个预定义好的按钮:
添加新行
编辑选中的行
删除选中的行
查找记录
重载表格
Navigator通过navGrid方法来配置导航栏,用法是:
$(“#grid_id”).navGrid(‘#gridpager’,{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView); 或
$(“#grid_id”).jqGrid(‘navGrid’,'#gridpager’,{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
1.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作为参数,传入对应的函数方法中。代码如下:
Jqgird本身为这些参数定义了默认值,而且不同的language文件也有各自的定义来覆盖原始的默认值。我们也可以在jqGrid重新定义新的值,以覆盖默认的值。在我做的DEMO中,没有涉及这一块,所以具体的参数可以查看官方文档。地址:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator
1.3自定义按钮
有的时候,Jqgrid默认的按钮可能不能满足我们的要求,别急,它还提供了添加自定义按钮的方法。具体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。
比如我们可以利用Jqgrid的自定义按钮的方法,在Navigator里面加入打印、下载等方法。这些方法可以自己实现。
2. Pager和Record的属性
这两个区域的属性我们一般不需要改变什么,用默认的就行了,如果想要了解它的属性,可以去官方文档看看。官方文档:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager
下一章节就开始讨论Dao层的方法该如何实现。
原创文章,转载请注明: 转载自java开发者
本文链接地址: Jqgrid入门-别具特色的Pager Bar (四)
相关文章推荐
- Jqgrid入门-别具特色的Pager Bar (四)
- Jqgrid入门-别具特色的Pager Bar (四)
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
- 【Ogre编程入门与进阶】第四章 Ogre的设计理念与特色
- jqGrid入门 中文文档 参数方法讲解(自我备用)
- Jqgrid入门-结合Struts2+json实现数据展示(五)
- Jqgrid入门-Jqgrid格式化数据(九)
- Jqgrid入门-Jqgrid格式化数据(九)
- jqgrid入门
- jqGrid入门 中文文档 参数方法讲解(自我备用)
- Jqgrid入门
- jqGrid与Struts2的结合应用(四) —— 丰富多彩的Pager Bar
- Jqgrid入门-Jqgrid分组的实现(八)
- jquery插件:jqgrid的入门使用心得
- jqgrid快速入门之三:单元格输入文字的获取
- Jqgrid入门-显示基本的表格
- Jqgrid入门-Jqgrid设置二级表头(六)
- Jqgrid入门-Jqgrid列数据拖动(七)
- jqGrid与Struts2的结合应用(四) —— 丰富多彩的Pager Bar
- Jqgrid入门-显示基本的表格(一)