zoukankan      html  css  js  c++  java
  • 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里面加入打印、下载等方法。这些方法可以自己实现。
     
        2. Pager和Record的属性
     
        这两个区域的属性我们一般不需要改变什么,用默认的就行了,如果想要了解它的属性,可以去官方文档看看。官方文档:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager
       下一章节就开始讨论Dao层的方法该如何实现。

    原创文章,转载请注明: 转载自java开发者

    本文链接地址: Jqgrid入门-别具特色的Pager Bar (四)

  • 相关阅读:
    CSU 1333 Funny Car Racing
    FZU 2195 检查站点
    FZU 2193 So Hard
    ZOJ 1655 FZU 1125 Transport Goods
    zoj 2750 Idiomatic Phrases Game
    hdu 1874 畅通工程续
    hdu 2489 Minimal Ratio Tree
    hdu 3398 String
    洛谷 P2158 [SDOI2008]仪仗队 解题报告
    POJ 1958 Strange Towers of Hanoi 解题报告
  • 原文地址:https://www.cnblogs.com/hongzai/p/3161221.html
Copyright © 2011-2022 走看看