用插件来做规律性很强的数据展现是个不错的选择，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，可以进行相应的修改，简化很多繁琐的时间，不过要谨慎。