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

转自：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和插件：

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

html：

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

初始化插件：

1. $("#flex1").flexigrid
2. (
3. {
4. url: 'post.php',
5. dataType: 'xml',
6. colModel : [
7. {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
8. {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
9. {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
10. {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
11. {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
12. {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
13. ],
14. buttons : [
15. {name: 'Add', bclass: 'add', onpress : test},
16. {name: 'Delete', bclass: 'delete', onpress : test},
17. {separator: true},
18. {name: 'A', onpress: sortAlpha},
19. {name: 'B', onpress: sortAlpha},
20. {name: 'C', onpress: sortAlpha},
21. {name: 'D', onpress: sortAlpha},
22. {name: 'E', onpress: sortAlpha},
23. {name: 'F', onpress: sortAlpha},
24. {name: 'G', onpress: sortAlpha},
25. {name: 'H', onpress: sortAlpha},
26. {name: 'I', onpress: sortAlpha},
27. {name: 'J', onpress: sortAlpha},
28. {name: 'K', onpress: sortAlpha},
29. {name: 'L', onpress: sortAlpha},
30. {name: 'M', onpress: sortAlpha},
31. {name: 'N', onpress: sortAlpha},
32. {name: 'O', onpress: sortAlpha},
33. {name: 'P', onpress: sortAlpha},
34. {name: 'Q', onpress: sortAlpha},
35. {name: 'R', onpress: sortAlpha},
36. {name: 'S', onpress: sortAlpha},
37. {name: 'T', onpress: sortAlpha},
38. {name: 'U', onpress: sortAlpha},
39. {name: 'V', onpress: sortAlpha},
40. {name: 'W', onpress: sortAlpha},
41. {name: 'X', onpress: sortAlpha},
42. {name: 'Y', onpress: sortAlpha},
43. {name: 'Z', onpress: sortAlpha},
44. {name: '#', onpress: sortAlpha}
46. ],
47. searchitems : [
48. {display: 'ISO', name : 'iso'},
49. {display: 'Name', name : 'name', isdefault: true}
50. ],
51. sortname: "id",
52. sortorder: "asc",
53. usepager: true,
54. title: 'Countries',
55. useRp: true,
56. rp: 10,
57. showTableToggleBtn: true,
58. width: 700,
59. height: 255
60. }
61. );

参数说明

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的关键点进行说明