`
yanyanquan
  • 浏览: 440107 次
  • 性别: Icon_minigender_1
  • 来自: 江门
社区版块
存档分类
最新评论

Jquery 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?
分享到:
评论

相关推荐

    jquery flexigrid

    jquery flexigrid;jquery flexigrid

    jquery flexigrid 支持前台排序

    jquery flexigrid与jquery tablesort 配合实现flexigrid的客户端排序功能。jsp项目,无需数据库即可运行

    Jquery FlexiGrid JS

    Jquery FlexiGrid JS 前后台数据的传值、对象 前台使用FlexiGrid 插件显示数据条数 注意:action层变量名对应

    JQuery Flexigrid

    $("#flex1").flexigrid({ url: 'post2.php', dataType: 'json', colModel : [ {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, {display: 'Name', name : 'name', width : 180...

    jquery FlexiGrid与asp.net 后台交互例子

    jquery flexigrid 与asp.net 的交互,并实现了crud 。提供了sqlserer oracle 等数据库的操作。

    Jquery flexigrid插件 添加checkbox,(双击事件)onRowDblclick

    Jquery flexigrid插件 添加了checkbox,将它设置为true就OK了 (双击事件)onRowDblclick。。。 附带属性说明 共享下。。。。。

    jquery flexigrid插件

    Flexigrid-Web2.0 jQuery表格插件 Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性,如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。 一个中文实例教程: ...

    JQuery_插件FlexiGrid_之完全配置与使用

    JQuery_插件FlexiGrid_之完全配置与使用

    jQuery flexigrid 表格控件

    这个控件是jquery封装的一款控件,最初的时候里面东西很少.只是用来显示数据使用的, 传输数据的格式有两种 xml 和 json ,做系统网站上比较用的多, 这个控件也比较好看和实用, 我在网上看到了很多功能但是都很散, 我...

    解决JQuery flexigrid在IE下显示问题,以及数据显示问题

    最近项目要用jquery开发,于是打算用flexigrid做表格功能,但是遇到了数据不能显示、IE下显示等问题(在FF下显示正常)。于是花了2个小时时间对flexigrid.pack.js进行调试,经过苦闷的两个小时后,皇天不负有心人,...

    Jquery flexigrid使用

    struts2.1.6+spring+hibernate+jquery+flexigrid+thickbox+mysql Struts2返回Json类型,分页显示在flexigrid表中 下载后进行评价获得积分:评价时要选择五角星才能获取积分,不然分数还是会被扣除

    jquery表格插件Flexigrid

    jquery表格插件Flexigrid 将数据按照表格排列,类似与ext。

    FlexiGrid配置与使用

    FlexiGrid配置与使用说明,不错的文档

    Jquery Flexigrid jsp Demo

    NULL 博文链接:https://piziwang.iteye.com/blog/537636

    jquery 表格插件 Flexigrid

    jquery 表格插件 Flexigrid

    jquery插件之flexigrid学习实例

    此项目是struts2+json+flexigrid的完整实例,可帮助你对flexigrid快速上手,项目下载后直接导入自己的工程即可,所用jar包会另传,因为超出上传限制,还请理解。

    jquery+flexigrid使用方法.pdf

    jquery+flexigrid使用方法.pdfjquery+flexigrid使用方法.pdf

    jquery表格插件flexigrid-1.1.zip

    Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

    Jqueryflexigrid使用中文WORD版

    资源名称:Jquery flexigrid使用 中文WORD版内容简介:本文档主要讲述的是Jquery flexigrid使用;使用技术:struts2.1.6 spring hibernate jquery flexigrid thickbox mysql;主要的js文件:jquery.js,flexigrid.js,...

Global site tag (gtag.js) - Google Analytics