用插件来做规律性很强的数据展现是个不错的选择,jquery插件家族中这类插件通常叫做table或者grid,本人用过两个有名的插件:jqgrid和flexgrid,自己也曾经在使用jquery之前尝试过自己写grid插件,这篇文章将就flexgrid插件的使用和改造展开。
非常囧的是flexgrid的homepage居然无法访问了,不过没关系,Google group上已经有了相关的讨论,且非常活跃,访问地址为:http://groups.google.com/group/flexigrid?hl=en

  • 1.flexigrid特性介绍

    来看看jquery官网有关该插件的介绍官网列举的Features:
    * 列可伸缩
    * 高度可调整
    * 可按照表头排序
    * 很酷的外观风格
    * 能够转换一个普通的表格
    * 可以连接到一个ajax方式的数据源(仅是xml格式)
    * 分页功能
    * 显示/隐藏 列
    * 提供可供外部访问的API
    * 更多更多…
    Google group 上的介绍:轻量级但功能丰富的data grid插件,支持列伸缩和排序功能,可采用ajax的方式连接到一个xml的数据源来获取所需数据,和Ext Grid非常相似,但它是纯jquery的,这使得它更加小巧,并遵循jquery插件一贯的少量配置特性

  • 2.怎样获取flexigrid?

    既然官网已经无法访问,那就去其他途经吧,在上面提到的jquery站点和Google group站点都可以找到下载链接,如果仍然无法搞定,那么pm我吧:)
    3.我想观看一下Demo先
    嗯,不错的习惯,毕竟同类插件已经挺多的了,也不乏jqgrid这样的强悍者,还是货比三家先吧。Google group上提供的各个后台语言版本的Demo:
    php 版本的 by Kevin Kietel: http://sanderkorvemaker.nl/test/flexigrid/
    CodeIgniter 版本的 by Armorfist: http://flexigrid.eyeviewdesign.com/
    ASP 版本的 by Synergiq: http://jamesowers.co.uk/asp-tutorials/57/flexigrid-with-asp/
    Ruby on Rails 版本的 by Nick Fessel: http://www.nickfessel.com/index.php?post=17

  • 4.使用步骤:

    a.下载jquery.js(最新1.2.6版本)和flexigrid.js(jquery官网上提供的较旧,而官网又无法访问,我自己用的是$Date: 2008-07-14 00:09:43 +0800 (Tue, 14 Jul 2008) $版本的),并在需要使用的页面顺序引入,(还需要引入相关的样式文件和图片文件)。
    b.安装过程。首先在需要使用的DOM标签中加入代码:

    1. <table id="yourgrid_id"></table>

    在onload事件或者jquery的$(function(){…})方法中加入下列初始化代码:

    1. $("#top_ten").flexigrid({
    2.  url: "getData.php",
    3.  dataType: 'xml',
    4.  colModel : [{display: '编号', name : 'id', width : 65, sortable : true, align: 'center'},
    5.  {display: '内容提要', name : 'summary', width : 180, sortable : true, align: 'left'},
    6.  {display: '内容类别', name : 'contentType', width : 60, sortable : true, align: 'left'},
    7.  {display: '字段名', name : 'arriveRate', width : 90, sortable : true, align: 'left'},
    8.  {display: '字段名', name : 'hitRate', width : 90, sortable : true, align: 'left'},
    9.  {display: '字段名', name : 'fitRate', width : 90, sortable : true, align: 'left'}],
    10.  sortname: "pushCount",sortorder: "desc",usepager: false,title: '表头名称',
    11.  useRp: false,rp: 10,showTableToggleBtn: true,width: 650,height: 270
    12.  });
  • 5.上面这样做之后,前端就部署完毕了,但参数极其取值需要说明一下,完整的参数及说明如下(当前值为默认值):

    height: 200, //flexigrid插件的高度,单位为px
    width: ‘auto’, //宽度值,auto表示根据每列的宽度自动计算
    striped: true, //是否显示斑纹效果,默认是奇偶交互的形式
    novstripe: false,
    minwidth: 30, //列的最小宽度
    minheight: 80, //列的最小高度
    resizable: true, //是否可伸缩
    url: false, //ajax方式对应的url地址
    method: ‘POST’, // 数据发送方式
    dataType: ‘xml’, // 数据加载的类型
    errormsg: ‘Connection Error’,//错误提升信息
    usepager: false, //是否分页
    nowrap: true, //是否不换行
    page: 1, //默认当前页
    total: 1, //总页面数
    useRp: true, //是否可以动态设置每页显示的结果数
    rp: 15, // 每页默认的结果数
    rpOptions: [10,15,20,25,40],//可选择设定的每页结果数
    title: false,//是否包含标题
    pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式
    procmsg: ‘Processing, please wait …’,//正在处理的提示信息
    query: ”,//搜索查询的条件
    qtype: ”,//搜索查询的类别
    nomsg: ‘No items’,//无结果的提示信息
    minColToggle: 1, //minimum allowed column to be hidden
    showToggleBtn: true, //show or hide column toggle popup
    hideOnSubmit: true,//隐藏提交
    autoload: true,//自动加载
    blockOpacity: 0.5,//透明度设置
    onToggleCol: false,//当在行之间转换时
    onChangeSort: false,//当改变排序时
    onSuccess: false,//成功后执行
    onSubmit: false // 调用自定义的计算函数

6.处理数据的后台脚本
flexigrid需要数据支持,其数据是通过ajax方式传送到客户端来进行处理的,格式为xml,在作者给定的demo中包含了一个php格式的处理脚本post.php,其中包含了数据库的操作,在此需要进行相应的修改。
另外,需要注意,提供的数据个数和格式需要和4中指定的列数对应上。当然,这里的数据是会被解析成html内容,也就是说,你可以向客户端传送光秃秃的数据,也可以稍微“包装”一下,比如:数据或者:
甚至是图片什么的,总之可以自定义,加点JavaScript事件也无妨,反正jquery特别适合做这样的处理。这就为后续处理埋下了伏笔,这些内容将在后面讲到,要不然对不起标题中的“玩转”二字。

到这里,基本的用法算是完成了,一些个性化的设置和处理可以在读懂代码和配置项之后施行,也可以看看源码,结构挺不错的,注意几个扩展事件如reload,还有,计算的入口方法populate,可以进行相应的修改,简化很多繁琐的时间,不过要谨慎。