jQuery学习笔记--丰富多彩的Pager Bar (底部 分页工具条)

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 06:40 点击:

在介绍排序与查询之前,先介绍一下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);

 

关于各种参数的具体说明,请参考官方文档(php?id=wiki:navigator" style="color: rgb(51, 102, 153); text-decoration: none; " target="_blank">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator )

 

 

 

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • Gb2312转utf-8编码的方法(vbs+js)
      • 如何使用Ajax技术开发Web应用程序(1)
      • js跳转路径问题
      • JavaScript模仿桌面窗口
      • 用js检测两个线段是否相交
      • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
      • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
      • 我是如何去了解jquery的(六),案例之幻灯片轮换
      • Jquery封装幻灯片效果
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1