Jqgrid入门-别具特色的Pager Bar (四)

Pager Bar位于表格最下边。默认情况下，分为三部分。如图：

• 第一部分：导航按钮栏(Navigator)
• 第二部分：页码栏(Pager)
• 第三部分：记录信息栏(Record)

        要实现这个功能也不难，最基本的语法就一句。

1	$( "#gridTable" ).jqGrid( 'navGrid' , '#gridPager' );

        但是很多时候我们需要的不仅仅是这种，还有很多属性需要了解。

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 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自定义按钮

 

        有的时候，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里面加入打印、下载等方法。这些方法可以自己实现。