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相关资源和教程:

这里我放出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 : 40sortable : truealign'center'},
  8. {display'ISO'name : 'iso'width : 40sortable : truealign'center'},
  9. {display'Name'name : 'name'width : 180sortable : truealign'left'},
  10. {display'Printable Name'name : 'printable_name'width : 120sortable : truealign'left'},
  11. {display'ISO3'name : 'iso3'width : 130sortable : truealign'left'hidetrue},
  12. {display'Number Code'name : 'numcode'width : 80sortable : truealign'right'}
  13. ],
  14. buttons : [
  15. {name'Add'bclass'add'onpress : test},
  16. {name'Delete'bclass'delete'onpress : test},
  17. {separatortrue},
  18. {name'A'onpresssortAlpha},
  19. {name'B'onpresssortAlpha},
  20. {name'C'onpresssortAlpha},
  21. {name'D'onpresssortAlpha},
  22. {name'E'onpresssortAlpha},
  23. {name'F'onpresssortAlpha},
  24. {name'G'onpresssortAlpha},
  25. {name'H'onpresssortAlpha},
  26. {name'I'onpresssortAlpha},
  27. {name'J'onpresssortAlpha},
  28. {name'K'onpresssortAlpha},
  29. {name'L'onpresssortAlpha},
  30. {name'M'onpresssortAlpha},
  31. {name'N'onpresssortAlpha},
  32. {name'O'onpresssortAlpha},
  33. {name'P'onpresssortAlpha},
  34. {name'Q'onpresssortAlpha},
  35. {name'R'onpresssortAlpha},
  36. {name'S'onpresssortAlpha},
  37. {name'T'onpresssortAlpha},
  38. {name'U'onpresssortAlpha},
  39. {name'V'onpresssortAlpha},
  40. {name'W'onpresssortAlpha},
  41. {name'X'onpresssortAlpha},
  42. {name'Y'onpresssortAlpha},
  43. {name'Z'onpresssortAlpha},
  44. {name'#'onpresssortAlpha}
  45. ],
  46. searchitems : [
  47. {display'ISO'name : 'iso'},
  48. {display'Name'name : 'name'isdefaulttrue}
  49. ],
  50. sortname"id",
  51. sortorder"asc",
  52. usepagertrue,
  53. title'Countries',
  54. useRptrue,
  55. rp10,
  56. showTableToggleBtntrue,
  57. width700,
  58. height255
  59. }
  60. );
参数说明

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值