首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

给flexigrid扩充两项功能

2012-11-23 
给flexigrid扩展两项功能第一次发贴,有如不妥,欢迎交流,砖请轻拍?本文将讲述一点我本人对flexigrid的一些

给flexigrid扩展两项功能

第一次发贴,有如不妥,欢迎交流,砖请轻拍给flexigrid扩充两项功能

?

本文将讲述一点我本人对flexigrid的一些增加功能。由于本人js水平有限,对其中的js扩展的代码写得比较对不起广大观众,还望各位大虾帮忙指正一下,呵呵。

?

在最近的一个项目中,需要用到列表展现一些数据的需求。考虑到如果自己开发,则工作量会很大,而且稳定性将成问题,而且在项目期限的要求下,这是不可行的。为此,我只能在google上百度一下相关的列表开源项目了给flexigrid扩充两项功能

?

在精心挑选与对比之后,我还是选择了flexigrid,原因主要是:我们项目中的js框架就是JQuery,flexigrid就是JQuery插件,而且它是开源共享的。其次就是它的界面与功能就是我想要的那样。

?

但在使用的过程中发现了原版flexigrid中的一些bug,如:不支持JQuery1.3及以上高版本的JQuery、获取数据错误之后会死循环,等等。本着我不是第一个吃螃蟹的人的信念,我又在网上搜索这些问题的解决方案,终于,让我找到了一个比较完善的解决方式:http://www.cnblogs.com/xuanye/archive/2009/11/08/Xuanye_jQuery_FlexiGrid_Demo.html。

在这篇文章中,这位人才兄将我想要的功能与bug全部解决了!解决了我一大心头之患。

?

但随着项目的进展、需求的“变态”,慢慢地,我发现这样的改变之后,还是不能满足我的要求了:

?

?首先,原来的flexigrid中的查询方式都是模糊搜索,这当然不能满足需求!需求中要求对于一些编号类或参数类的搜索是精确查询!于是得改呀~

为了实现它的精确搜索,我将flexigrid中增加了一个属性qstyle,同时在界面中增加一个复选框,让用户决定是否采取精确查询。主要代码片段如下:

增加属性

?

但是,很快,需求又有新的要求:时间查询应该用户选择时间,并按范围搜索!

于是,最后一段代码就被我扩展为:

?范围搜索的前期准备是搞定了,那用户如果进行选择呢?还有,在需求的后期,又要求对性别等参数性的查询应该用下拉框选择,这又如何做呢?我们来一一解决它们:

?

首先解决日期选择的问题。这个好办,只要实现两个输入框,并将两个输入框的onclick事件中调用日期控制即可。在这里,我使用的是date_picker日期控件(官方网址:www.my97.net)。

?

其次,我们再看一下下拉框选择的问题。这个问题要解决的主要是下拉框中的数据绑定。这里我在flexigrid中增加了一些代码用于绑定用户自己的数据(由于本人js代码水平有限,所以直接在flexigrid中增加自定义方法的方式):

?以上各更改在页面上的使用如下所示(详细代码可以参考附件,另,附件中没有提供提交到服务器上对数据的处理过程):

?

6 楼 matychen 2011-03-16   淅淅沥沥 写道正在学习这方面东西,想做一个里面可以多条件查询功能,楼主可以给全一点的代码么,谢谢

这个附件里面就有条件查询,你可以下来看看
http://dl.iteye.com/topics/download/36c8734f-4fa1-3726-88fd-4ca20b081ab3
jQuery插件flexigrid使用总结

热点排行