玩转jquery插件之flexigrid.doc

用插件来做规律性很强的数据展现是个不错的选择，jquery插件家族中这类插件通常叫做table或者grid，本人用过两个有名的插件:jqgrid和flexgrid，自己也曾经在使用jquery之前尝试过自己写grid插件，这篇文章将就flexgrid插件的使用和改造展开。非常囧的是flexgrid的homepage居然无法访问了，不过没关系，Google group上已经有了相关的讨论，且非常活跃，访问地址为：/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: /ASP 版本的 by Synergiq: http://jamesowers.co.uk/asp-tutorials/57/flexigrid-with-asp/Ruby on Rails 版本的 by Nick Fessel: /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标签中加入代码： table id=yourgrid_id/table 在onload事件或者jquery的$(function(){…})方法中加入下列初始化代码： $(#top_ten).flexigrid({ ?url: getData.php, ?dataType: xml, ?colModel : [{display: 编号, name : id, width : 65, sortable : true, align: center}, ?{display: 内容提要, name : summary, width : 180, sortable : true, align: left}, ?{display: 内容类别, name : contentType, width : 60, sortable : true, align: left}, ?{display: 字段名, name : arriveRate, width : 90, sortable : true, align: left}, ?{display: 字段名, name : hitRate, width : 90, sortable : true, align: left}, ?{display: 字段名, name : fitRate, width : 90, sortable : true, align: left}], ?sortname: pushCount,sortorder: desc,usepager: false,title: 表头名称, ?useRp: false,rp: 10,showTableToggleBtn: true,width: 650,height: 270 ?}); 5.上面这样做之后，前端就部署完毕了，但参数极其取值需要说明一下，完整的参数及说明如下（当前值为默认值）： height: 200, //flexigrid插件的高度，单位为pxw