http://blog.csdn.net/anshao/archive/2009/08/12/4435167.aspx

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