jQuery学习笔记--丰富多彩的Pager Bar (底部 分页工具条)
在介绍排序与查询之前，先介绍一下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作为参数，传入对应的函数方法中。
将代码修改如下：
view plain
$(function(){
...
$("#gridTable").jqGrid("navGrid", "#gridPager", {
addfunc : openDialog4Adding, // (1) 点击添加按钮，则调用openDialog4Adding方法
editfunc : openDialog4Updating, // (2) 点击编辑按钮，则调用openDialog4Updating方法
delfunc : openDialog4Deleting, // (3) 点击删除按钮，则调用openDialog4Deleting方法
alerttext : "请选择需要操作的数据行!" // (4) 当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息
});
...
});
var openDialog4Adding = function() {
var consoleDlg = $("#consoleDlg");
var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");
consoleDlg.find("input").removeAttr("disabled").val("");
dialogButtonPanel.find("button:not(:contains('取消'))").hide();
dialogButtonPanel.find("button:contains('创建')").show();
consoleD
补充：web前端 , JavaScript ,
