Flexigrid参数详解

来看看它的功能有哪些吧？官方的功能列表

* 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 （其他。白搭）



还是和其他控件一下，第一步来看下参数吧，默认参数比较多，大多的参数都比较有用
01.
02.// 引用默认属性
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);

另外的两个属性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？

 

支持ajax跨域：
url中加callback=?
后台获得callback函数的名字
返回json数据格式为:print(callbackName+"("+jsonString+")");
----------------------------------------------------------------------------------------------
Flexigrid(HUGO.CM修改版v1.1)使用说明:
1、加载flexigrid。p：选项参数集合
$(“”).flexigrid(p);
2、重新加载数据。
$(“”).flexReload(p);
3、更改flexigrid参数。P：选项参数集合
$(“”).flexOptions (p);
4、隐藏/显示列。cid：列索引，visible：bool
$(“”).flexToggleCol (cid, visible);
5、绑定数据。Data：数据源
$(“”).flexAddData (data);
6、no select plugin by me 。不知道做什么用的
$(“”).noSelect (p);
7、重新指定宽度和高度。
$(“”).flexResize(w,h);
8、翻页。type：first、prev、next、last、input
$(“”).changePage(type);
----------------------------------------------------------------------------------------------
Flexigrid——colModel:
属性名 类型 描述
display string 显示的列名
name string 绑定的列名
sortable bool 是否可以排序
align string 对其方式
width int 列的宽度
hide bool 是否隐藏该列
pk bool 是否为主键标识、如果是则隐藏该列，值存入隐藏域中
process function
customValue function 自定义显示值。(如性别：数据库为Bit类型，通过customValue方法返回“男/女”)参数：value,i
----------------------------------------------------------------------------------------------
Flexigrid——事件
事件名 参数 描述 返回值
onDragCol dcoln,dcolt 拖动列后触发 无
onToggleCol cid,visible 隐藏/显示列后触发 无
onChangeSort sortname,sortorder 自定义排序事件 无
onChangePage newp 自定义翻页事件 无
onSuccess 无 数据获取成功时触发 无
onError XMLHttpRequest,textStatus,errorThrown 出现错误时触发 无
onSubmit 无 在获取数据前时触发 bool
onRowSelect this 行选中事件 无
----------------------------------------------------------------------------------------------
Flexigrid——buttons
属性名 类型 描述
name string 按钮名称
bgclass string 样式
onpress function 点击触发的方法
separator bool 分割线
----------------------------------------------------------------------------------------------
Flexigrid——searchitems
属性名 类型 描述
display string 搜索类型下拉列表框：显示的列名
name string 搜索类型下拉列表框：绑定的列名
isdefault bool 是否为默认搜索类型
//注：如果searchitems：true，则自动根据所有字段生成下拉列表框