玩转jquery插件之flexigrid
来源:互联网 发布:mysql点哪个安装 编辑:程序博客网 时间:2024/06/05 05:10
用插件来做规律性很强的数据展现是个不错的选择,jquery插件家族中这类插件通常叫做table或者grid,本人用过两个有名的插件:jqgrid和flexgrid,自己也曾经在使用jquery之前尝试过自己写grid插件,这篇文章将就flexgrid插件的使用和改造展开。 来看看jquery官网有关该插件的介绍官网列举的Features: 既然官网已经无法访问,那就去其他途经吧,在上面提到的jquery站点和Google group站点都可以找到下载链接,如果仍然无法搞定,那么pm我吧:) a.下载jquery.js(最新1.2.6版本)和flexigrid.js(jquery官网上提供的较旧,而官网又无法访问,我自己用的是$Date: 2008-07-14 00:09:43 +0800 (Tue, 14 Jul 2008) $版本的),并在需要使用的页面顺序引入,(还需要引入相关的样式文件和图片文件)。 在onload事件或者jquery的$(function(){…})方法中加入下列初始化代码: height: 200, //flexigrid插件的高度,单位为px 6.处理数据的后台脚本 到这里,基本的用法算是完成了,一些个性化的设置和处理可以在读懂代码和配置项之后施行,也可以看看源码,结构挺不错的,注意几个扩展事件如reload,还有,计算的入口方法populate,可以进行相应的修改,简化很多繁琐的时间,不过要谨慎。 之前写到:玩转jquery插件之flexigrid(一)如何获取并使用flexigrid?挺受欢迎,后来倒是一直有在从事flexigrid的应用,但的确有些忙,一些整理和保密(一些应用中涉及机密的内容要去掉)工作也感觉会挺繁琐,只好慢慢来吧。 对于需求a,我们对按钮事件的期望当然是去完成某项操作,在这里讨论的是和服务端有交互的事件,在flexigrid的一些高级例子中,给出了“增加”和“删除”按钮,但未给出交互示例,其实作者意图也是告诉我们该增加怎样的按钮,按钮放在哪里,按钮该干什么事情等等,都是可以让我们自定义的。如对于“增加”和“删除”按钮事件,我们可以这里来处理: 表示要给flexigrid增加两个按钮,名为“增加”和“删除”,分别用“add”和“delete”的class来修饰,且都调用了一个名为versionMan的函数,并且按钮直接启用了分隔符。 上面的示例中需要注意的是:使用ajax方法调用一个php脚本并传入参数,从而执行了需要的操作,php脚本的写法并没有什么不同,就像普通的处理即可,然后$(”#version_man”).flexReload({});这里表示重新调用了flexigrid控件。 然后在flexigrid初始化参数中设置:onSuccess:function(){set_exeBtn(”gridtable”);},这表示flexigrid加载完成后执行set_exeBtn函数,该函数向flexigrid的右下角加入了一个名为“执行”的按钮,并且为该按钮定义了事件updateState,该事件的定义如下: 该事件的简要说明:该事件检查flexigrid的最后一列的值,如果不等于无操作,将以ajax的方式执行update_msgState.php程序,该程序主要用于更新flexigrid中的记录项的状态字段值,和一般程序也没什么两样,执行成功会输出success,在这里必须提及我对flexigrid.js文件的两处改动: 写到这里,发现篇幅已经很长,而且在方式上我想最好是给出一些在线的demo,这个工作我往后有时间了再整理吧,其他的将在后续文章中完成,感谢各位的支持。
非常囧的是flexgrid的homepage居然无法访问了,不过没关系,Google group上已经有了相关的讨论,且非常活跃,访问地址为:http://groups.google.com/group/flexigrid?hl=en
* 列可伸缩
* 高度可调整
* 可按照表头排序
* 很酷的外观风格
* 能够转换一个普通的表格
* 可以连接到一个ajax方式的数据源(仅是xml格式)
* 分页功能
* 显示/隐藏 列
* 提供可供外部访问的API
* 更多更多…
Google group 上的介绍:轻量级但功能丰富的data grid插件,支持列伸缩和排序功能,可采用ajax的方式连接到一个xml的数据源来获取所需数据,和Ext Grid非常相似,但它是纯jquery的,这使得它更加小巧,并遵循jquery插件一贯的少量配置特性
3.我想观看一下Demo先
嗯,不错的习惯,毕竟同类插件已经挺多的了,也不乏jqgrid这样的强悍者,还是货比三家先吧。Google group上提供的各个后台语言版本的Demo:
php 版本的 by Kevin Kietel: http://sanderkorvemaker.nl/test/flexigrid/
CodeIgniter 版本的 by Armorfist: http://flexigrid.eyeviewdesign.com/
ASP 版本的 by Synergiq: http://jamesowers.co.uk/asp-tutorials/57/flexigrid-with-asp/
Ruby on Rails 版本的 by Nick Fessel: http://www.nickfessel.com/index.php?post=17
b.安装过程。首先在需要使用的DOM标签中加入代码:
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 // 调用自定义的计算函数
flexigrid需要数据支持,其数据是通过ajax方式传送到客户端来进行处理的,格式为xml,在作者给定的demo中包含了一个php格式的处理脚本post.php,其中包含了数据库的操作,在此需要进行相应的修改。
另外,需要注意,提供的数据个数和格式需要和4中指定的列数对应上。当然,这里的数据是会被解析成html内容,也就是说,你可以向客户端传送光秃秃的数据,也可以稍微“包装”一下,比如:数据或者:
甚至是图片什么的,总之可以自定义,加点JavaScript事件也无妨,反正jquery特别适合做这样的处理。这就为后续处理埋下了伏笔,这些内容将在后面讲到,要不然对不起标题中的“玩转”二字。
谈到改造,先说一下我们一般都会有哪些比较典型的应用吧,比如在数据上的点击增加点事件,比如加一个筛选记录的操作入口,比如编辑某条记录等等,这些至少是我工作中实实在在的需求。那么在这里,限于篇幅和个人精力,我们做三个方面的改造。
a).增加按钮事件
b).显示某个时间区间内的数据,且可以选择时间区间
c).根据输入的条件筛选数据
首先在flexigrid的定义中增加这样的设置,
至于versionMan函数,完全可以自定义要做的事情。如在示例中我这样进行了定义(主要是看看结构,可以根据自己的需求进行更改):
除了上面这种通过定义的接口增加按钮和事件的方式,我们还可以采用完全自定义的方式来达到同样的效果,如可以这样来进行:
- 玩转jquery插件之flexigrid
- 玩转jquery插件之flexigrid
- 玩转jquery插件之flexigrid(一)如何获取并使用flexigrid?
- 玩转jquery插件之flexigrid(二)来点改造如何?
- 玩转jquery插件之flexigrid(二)来点改造如何?【补充】
- jquery grid插件 Flexigrid
- 【jQuery插件】flexigrid
- JQuery 插件FlexiGrid 之完全配置与使用
- JQUERY插件学习之Flexigrid(类似EXT Gird)
- jQuery插件Highcharts、flexigrid实践
- jquery grid插件 Flexigrid + servlet
- jQuery插件flexigrid使用总结
- jQuery插件flexigrid使用总结
- Jquery插件flexigrid 参数 详解
- Jquery插件FLexiGrid完全配置
- jQuery插件flexigrid使用总结
- jQuery插件flexigrid使用总结
- jQuery插件flexigrid使用总结
- 将字符串实现翻转输出,例如将“abc”转换为“cba”
- 如何实现复选框的全选、全不选、反选
- 多线程设计要点
- ASP.NET生成缩略图
- dblink 使用说明
- 玩转jquery插件之flexigrid
- eclipse的快捷键大检索
- 敏捷应对“团队的五重机能障碍”
- 正确理解ThreadLocal
- Block Ack 基本原理
- 金山打字通的介绍
- Eclipse.ini文件的VM参数示范例子
- basic_string &assign 的使用
- 指针详解