flexigrid教程（一）-jquery最好的grid插件

正在加载菜单，请稍待......

类别：jquery插件

标签：flexigrid jquery插件

浏览：1,046次

明河共影发布于 2009年11月28日

RIA之家技术群：24440797。你可以通过以下方式联络到明河： 1、进入我的微博首页跟随我 2、我的email：riahome@126.com

有用过ext的Grid或flex的DataGrid的朋友，应该对gird组件有比较好的理解。grid是强大的表格数据表现形式，是对表格的全面强化。

flexigrid从名字来看更接近flex，但实际上应该模仿的是ext的Grid组件。

虽然是模仿，但有很多不一样的地方，准确的讲有很多不如ext的Grid的地方，比如：少了数据存储器Store，无法自定义单元格数据格式，无法再表格中使用复选框，事件机制不够灵活全面，无法实现行编辑等等。

flexigrid是不如ext的Grid，但也堪称强大，基本满足日常开发需求。

我们来看下flexigrid的新特性：

* 列可伸缩
* 高度可调整
* 可按照表头排序
* 很酷的外观风格
* 能够转换一个普通的表格
* 可以连接到一个ajax方式的数据源
* 分页功能
* 显示/隐藏列
* 提供可供外部访问的API

flex相关资源和教程：

曾经有一段时间其官网无法访问，现在终于正常了：http://www.flexigrid.info/
实际开发中官网作用不大，更推荐去google的讨论组看看：http://groups.google.com/group/flexigrid?hl=en
官网的demo是静态数据，接下来发几个flexigrid与后台语言相结合的demo：
flexigrid+PHP：http://sanderkorvemaker.nl/test/flexigrid/
flexigrid + CodeIgniter（一个开源PHP框架）：http://flexigrid.eyeviewdesign.com/
flexigrid +ASP ： http://jamesowers.co.uk/asp-tutorials/57/flexigrid-with-asp/
flexigrid + Ruby on Rails ： http://www.nickfessel.com/
flexigrid + ASP.NET：http://www.codeproject.com/KB/aspnet/MVCFlexigrid.aspx

这里我放出php的供下载，其他的demo下载请进入相应的demo页面。

接下来的教程是以这个demo为例，官网的demo是静态版的，很多人在数据交互上出了问题。

引入jquery和插件：

<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>

html：

<table id="flex1" style="display:none"></table>

初始化插件：

$("#flex1").flexigrid
(
{
url: 'post.php',
dataType: 'xml',
colModel : [
{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : test},
{name: 'Delete', bclass: 'delete', onpress : test},
{separator: true},
{name: 'A', onpress: sortAlpha},
{name: 'B', onpress: sortAlpha},
{name: 'C', onpress: sortAlpha},
{name: 'D', onpress: sortAlpha},
{name: 'E', onpress: sortAlpha},
{name: 'F', onpress: sortAlpha},
{name: 'G', onpress: sortAlpha},
{name: 'H', onpress: sortAlpha},
{name: 'I', onpress: sortAlpha},
{name: 'J', onpress: sortAlpha},
{name: 'K', onpress: sortAlpha},
{name: 'L', onpress: sortAlpha},
{name: 'M', onpress: sortAlpha},
{name: 'N', onpress: sortAlpha},
{name: 'O', onpress: sortAlpha},
{name: 'P', onpress: sortAlpha},
{name: 'Q', onpress: sortAlpha},
{name: 'R', onpress: sortAlpha},
{name: 'S', onpress: sortAlpha},
{name: 'T', onpress: sortAlpha},
{name: 'U', onpress: sortAlpha},
{name: 'V', onpress: sortAlpha},
{name: 'W', onpress: sortAlpha},
{name: 'X', onpress: sortAlpha},
{name: 'Y', onpress: sortAlpha},
{name: 'Z', onpress: sortAlpha},
{name: '#', onpress: sortAlpha}
],
searchitems : [
{display: 'ISO', name : 'iso'},
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: 'Countries',
useRp: true,
rp: 10,
showTableToggleBtn: true,
width: 700,
height: 255
}
);

参数说明

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 // 调用自定义的计算函数