Jquery 的 Flexigrid插件 应用(1)

 Flexigrid – Web 2.0 Javscript Grid for jQuery

      可变列宽，自动适应表头宽度，可通过 Ajax 连接 XML 数据源，类似 Ext Grid，但基于 jQuery 因此更轻量小巧。

 

 

 

1. 首先去官方网站下载

2. 在网页中必须引入三个文件;

    (1) jquery.js

    (2) Flexigrid.js

    (3)CSS文件

3.在页面中创建一个容器,DIV table 都可以(如码所示)

 <!--这里是创建的容器--> <table class="flexme3" style="display: none" mce_style="display: none"></table> <mce:script type="text/javascript"><!-- $(".flexme3").flexigrid({//注意这里 url : 'post-xml.php', dataType : 'xml', colModel : [ { 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 } ], searchitems : [ { display : 'ISO', name : 'iso' }, { display : 'Name', name : 'name', isdefault : true } ], sortname : "iso", sortorder : "asc", usepager : true, title : 'Countries', useRp : true, rp : 15, showTableToggleBtn : true, width : 700, height : 200 }); function test(com, grid) { if (com == 'Delete') { confirm('Delete ' + $('.trSelected', grid).length + ' items?') } else if (com == 'Add') { alert('Add New Item'); } } // --></mce:script> <script type="text/javascript">

 

两个属性colModel，buttons 不是默认属性，内容说明如下

colModel : 列定义数组  

一个数组，数组的元素说明如下
colModel 参数说明:
display :显示名称
必须设置 ,类型:string, 默认值:无
name :字段名称
必须设置 ,类型:string,默认值:无
width :宽度
必须设置 , 类型:string ,默认值：无
sortable:是否可排序
类型:boolen , 默认值:false
process:处理程序
类型:function ,可格式化单元格
hide :是否隐藏
类型: boolen,默认值：false

buttons : 工具栏Button定义  

一个数组，数组的元素说明如下
buttons 参数说明:
name :Botton的标识
类型:string , 默认值:无
bclass :样式
类型:boolen,默认值:无
onpress :当button被点击时触发的事件
接受button的name为第一个参数，Grid为第二个参数的一个function
separator :是否分隔符
和前面四个属性互斥，当这个属性设置为True时，输出一个分隔符号，不是一个button 默认值:false

参数说明完毕，至于如何使用，那么请参考文中介绍的那篇文章吧？

虽然Flexigrid已然算是优秀，但是问题还是有？比如：

1：如果在列首添加checkbox列（默认不支持），

2：如何给行附加事件（如右键或双击）或者在最后列添加操作列？同时获取该列的数据?

3: 如何能够兼容 jQuery 1.3+?(默认不兼容)

4：如何改善性能问题（IE的脚本执行能力实在是可怜，特别在IE6下，当行列多时，总是有2-3秒的停滞）

5：如何让某列不参与Toggle？

 

官方的功能列表

• Resizable columns  （重设列宽，酷）
• Resizable height and width  （重设表格大小，这个好像实际应用的不多）
• Sortable column headers  (改变列的顺序)
• Cool theme （很酷的风格，现在就更酷了）
• Can convert an ordinary table  （可以格式化一个普通的表格）
• Ability to connect to an ajax data source (XML and JSON[new])  （支持多种数据格式）
• Paging （支持分页）
• Show/hide columns （支持显示隐藏列） 
• Toolbar (new)  （支持工具栏）
• Search (new)  （支持快速检索）
• Accessible API  （易于使用的API）
• Many more （其他。白搭）

属性说明

// 引用默认属性

03	p = $.extend({

04	height: 200, //flexigrid插件的高度，单位为px

05	width: 'auto', //宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题

06	striped: true, //是否显示斑纹效果，默认是奇偶交互的形式

07	novstripe: false,//没用过这个属性

08	minwidth: 30, //列的最小宽度

09	minheight: 80, //列的最小高度

10	resizable: false, //resizable table是否可伸缩

11	url: false, //ajax url,ajax方式对应的url地址

12	method: 'POST', // data sending method,数据发送方式

13	dataType: 'json', // type of data loaded,数据加载的类型，xml,json

14	errormsg: '发生错误', //错误提升信息

15	usepager: false, //是否分页

16	nowrap: true, //是否不换行

17	page: 1, //current page,默认当前页

18	total: 1, //total pages,总页面数

19	useRp: true, //use the results per page select box,是否可以动态设置每页显示的结果数

20	rp: 25, // results per page,每页默认的结果数

21	rpOptions: [10, 15, 20, 25, 40, 100], //可选择设定的每页结果数

22	title: false, //是否包含标题

23	pagestat: '显示记录从{from}到{to}，总数 {total} 条', //显示当前页和总页面的样式

24	procmsg: '正在处理数据，请稍候 ...', //正在处理的提示信息

25	query: '', //搜索查询的条件

26	qtype: '', //搜索查询的类别

27	qop: "Eq", //搜索的操作符

28	nomsg: '没有符合条件的记录存在', //无结果的提示信息

29	minColToggle: 1, //允许显示的最小列数

30	showToggleBtn: true, //是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错。

31	hideOnSubmit: true, //是否在回调时显示遮盖

32	showTableToggleBtn: false, //是否显示【显示隐藏Grid】的按钮

33	autoload: true, //自动加载，即第一次发起ajax请求

34	blockOpacity: 0.5, //透明度设置

35	onToggleCol: false, //当在行之间转换时，可在此方法中重写默认实现，基本无用

36	onChangeSort: false, //当改变排序时，可在此方法中重写默认实现，自行实现客户端排序

37	onSuccess: false, //成功后执行

38	onSubmit: false, // 调用自定义的计算函数，基本没用

39

//Style

40	gridClass: "bbit-grid"//样式

41

}, p);