转自：http://hi.baidu.com/fengkuang031/blog/item/f030284ded6a123cafc3ab98.html
有用过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?"flexigrid.js"></script>
html：
-
<table?id="flex1style="display:none"></table>
初始化插件：
-
$("#flex1").flexigrid
-
(
-
{
-
url:?'post.php',
-
dataType:?'xml
colModel?:?[
-
{display:?'IDname?:?'idwidth?:?40,?sortable?:?true,?align:?'center'},
-
{display:?'ISO'iso'Name'namewidth?:?180,0)">'left'Printable Name'printable_namewidth?:?120,0)">'ISO3'iso3width?:?130,?hide:?true},0)">'Number Code'numcodewidth?:?80,0)">'right'}
-
],
-
buttons?:?[
-
{name:?'Addbclass:?'addonpress?:?test},
-
{name:?'Delete'delete
{separator:?true},0)">'Aonpress:?sortAlpha},0)">'B'C'D'E'F'G'H'I'J'K'L'M'N'O'P'Q'R'S'T'U'V'W'X'Y'Z'#onpress:?sortAlpha}
-
],
-
searchitems?:?[
-
{display:?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 // 调用自定义的计算函数
下期教程将对其最重要的参数和demo的关键点进行说明
