Pager Bar位于表格最下边。默认情况下,分为三部分。如图:
![3](http://www.javakfz.com/wp-content/uploads/2013/05/3.png)
- 第一部分:导航按钮栏(Navigator)
- 第二部分:页码栏(Pager)
- 第三部分:记录信息栏(Record)
1
|
$(
"#gridTable"
).jqGrid(
'navGrid'
,
'#gridPager'
);
|
默认有5个预定义好的按钮:
-
- 添加新行
- 编辑选中的行
- 删除选中的行
- 查找记录
- 重载表格
Navigator通过navGrid方法来配置导航栏,用法是:
$(“#grid_id”).navGrid(‘#gridpager’,{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView); 或
$(“#grid_id”).jqGrid(‘navGrid’,'#gridpager’,{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
- 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
3
4
5
6
|
$(
"#gridTable"
).jqGrid(
'navGrid'
,
'#gridPager'
,{
addStu : addStu,
//点击添加按钮,调用添加方法
updateStu : updateStu,
//点击修改按钮,调用修改方法
delStu : delStu,
//点击删除按钮,调用删除方法
viewStu : viewStu,
//点击查看按钮,调用查看方法
});
|
1.2 关于prmEdit、prmAdd、prmDel、prmSearch、prmView的参数
Jqgird本身为这些参数定义了默认值,而且不同的language文件也有各自的定义来覆盖原始的默认值。我们也可以在jqGrid重新定义新的值,以覆盖默认的值。在我做的DEMO中,没有涉及这一块,所以具体的参数可以查看官方文档。地址:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator
1.3自定义按钮
或
$(“#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。
原创文章,转载请注明: 转载自java开发者
本文链接地址: Jqgrid入门-别具特色的Pager Bar (四)