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

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

3
  • 第一部分:导航按钮栏(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里面加入打印、下载等方法。这些方法可以自己实现。
 

 

你可能感兴趣的:(jqGrid)