来看看它的功能有哪些吧?官方的功能列表
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?
分享到:
相关推荐
例如,`$.fn.flexigrid`是初始化Flexigrid表格的主要函数,通过传递一个包含配置项的对象参数来定制功能。如`url`用于指定数据来源,`colModel`定义列的属性,包括列名、宽度、是否可排序等。 在实际应用中,...
**jQuery Flexigrid 前台排序实现详解** 在Web开发中,数据展示是一个重要的环节,而表格作为数据展示的常见形式,其排序功能尤为重要。jQuery Flexigrid是一款功能强大的表格插件,它提供了丰富的自定义选项和操作...
- **Ajax请求**:FlexiGrid使用jQuery的Ajax方法向服务器发送GET或POST请求,请求参数包括当前的排序条件、分页信息等。 - **服务器响应**:服务器接收到请求后,解析参数,执行相应的数据库操作,然后将结果集以...
5. **Commonality**: 文件"Commonality"可能包含了通用的代码片段或配置文件,这些可能包括与FlexiGrid相关的CSS样式、JavaScript函数,或者是数据库连接字符串、数据访问层的代码模板等。 6. **优化与扩展** - ...
4. **插件初始化**:通过调用`$.fn.flexigrid`函数来初始化表格,需要传入一系列配置参数,如colModel(列定义)、url(数据源)、method(请求方式)等。colModel定义了每一列的字段名、宽度、对齐方式等属性。 5....
附带的“附带属性说明.txt”文件可能包含了更多关于Flexigrid的配置选项和方法的详细信息。通常,Flexigrid的其他重要属性和方法包括: - `width` 和 `height`:定义表格的宽度和高度。 - `usepager`:设置是否启用...
### JQuery插件FlexiGrid之完全配置与使用 #### 一、引言 FlexiGrid是一款基于jQuery的轻量级表格插件,它为开发者提供了简单易用的方式来展示和操作数据表格。FlexiGrid支持多种功能,如排序、分页、筛选等,非常...
压缩包内的文件“flexigrid”可能包含的是插件的源代码、示例文件或者配置文件。开发者可以参考这些资源来学习如何在自己的项目中集成和定制flexigrid。 总的来说,jQuery插件flexigrid是一个强大的工具,为Web开发...
然后,通过jQuery选择器初始化FlexiGrid,配置其属性和行为。这通常在文档加载完成后的事件处理函数中进行,如`$(document).ready()`。以下是一个配置示例: ```javascript $("#flex1").flexigrid({ url: '../...
5. **Flexigrid配置** 初始化Flexigrid时,需要指定URL(获取数据的接口)、数据类型(JSON)、列模型(包括列名、宽度、对齐方式等)、搜索项、工具栏按钮、排序规则、分页设置等。`getQuery`属性用于处理条件查询...
《jQuery插件flexigrid使用总结与进一步优化》 在Web开发中,数据展示和交互是不可或缺的一部分。jQuery插件flexigrid是一款轻量级、功能强大的表格插件,能够帮助开发者快速构建具有分页、排序、搜索等功能的动态...
`Jquery_FlexiGrid配置参数说明.txt`文档会列出Flexigrid插件支持的所有配置参数及其用途。了解这些参数对于定制化插件的行为至关重要。例如,`width`用来设置表格的宽度,`height`设置高度,`colModel`定义列的属性...
之后,选择一个HTML表格元素,并调用`.flexigrid()`方法,传递配置参数,如表格URL、分页参数、列定义等。 3. **数据源与Ajax交互** Flexigrid支持通过Ajax从服务器动态获取数据,只需在初始化时提供数据接口URL。...
1. **理解组件配置**:学习如何配置 Flexigrid 的分页、排序和搜索参数,以及 DatePicker 的样式和行为。 2. **掌握数据绑定**:了解如何将后台数据绑定到 Flexigrid 中,以及如何通过 DatePicker 触发数据更新。 3....
JQuery FlexiGrid 插件是一款强大的数据网格组件,用于在网页中展示和管理结构化的数据。它提供了丰富的功能,包括排序、分页、搜索、编辑和自定义操作按钮等。下面将详细介绍FlexiGrid的配置和使用方法。 首先,你...
在`user_list.jsp`页面中,我们需要引入Jquery库和Flexigrid的CSS及JS文件,然后设置Flexigrid的参数,如表格列定义、URL数据源(通常指向`getUsers` Action)、分页设置等。当页面加载或特定事件触发时,Flexigrid...
3. 初始化插件:使用jQuery选择器找到该div并调用flexigrid方法,传入必要的配置参数。 ```javascript $("#grid").flexigrid({ url: 'data.php', // 数据来源 colModel: [ // 列定义 {display: 'ID', name: 'id',...
3. **初始化设置**:通过JavaScript代码配置Flexigrid的各项参数,如表格列定义、分页设置、搜索选项等。 4. **数据绑定**:调用Flexigrid的load方法,将后端返回的数据绑定到表格中。 5. **事件监听**:可以绑定...
3. **配置参数** Flexigrid有许多可配置的参数,例如`url`(请求数据的地址)、`method`(请求类型,通常是POST或GET)、`dataType`(数据类型,如json或xml)、`colModel`(定义列的属性,如宽度、标题、可排序性...