- 浏览: 1147654 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (224)
- Web UI (11)
- Dynamic Language (7)
- Framework (9)
- Note & Try (17)
- JavaScript (38)
- Ant/Gant/Maven (2)
- Database (5)
- Software Engineering (13)
- Career (29)
- Team Management (5)
- Performance (12)
- Algorithm (17)
- News & Commets (23)
- System Design (17)
- OO Design (8)
- API Design (3)
- Programming Paradigms (8)
- Asynchronous Programming (5)
- Architecture (6)
最新评论
-
a2320064997:
请问博主,排序的动图是怎么做出来的?
排序算法一览(二):归并类排序、分布类排序和混合类排序 -
你的微笑我得阳光:
试试验证码
reCAPTCHA项目 -
mack:
一般采用json
对象转换的问题 -
fly_hyp:
我也做了一个中文编程软件,叫趣智思成
一些中文编程语言 -
facingSun:
受教了
前端解耦的一个最简单示例
JQuery的表格插件有很多。Flexigrid和DataTables是我最近使用的,并且功能比较强大,在这里介绍一下。如果你在寻找前端绘制表格的插件,可以考虑它们。
Flexigrid
官方Flexigrid的特性展示:
- 列宽度可拖拽调整
- 高度和宽度可拖拽调整
- 列头可排序
- 主题支持
- 支持XML/JSON格式的Ajax数据源
- 支持分页
- 可以显示/隐藏列
- 表格搜索功能
- JavaScript API支持
要得到这样功能丰富、美观的表格:
只需要这样的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
$( "#flex1" ).flexigrid({
url: 'post2.php' ,
dataType: 'json' ,
colModel : [
{display: 'ISO' , name : 'iso' , width : 40, sortable : true , align: 'center' },
{display: 'Name' , name : 'name' , width : 180, sortable : true , align: 'left' },
{display: 'Printable Name' , name : 'printable_name' , width : 120, sortable : true , align: 'left' },
{display: 'ISO3' , name : 'iso3' , width : 130, sortable : true , align: 'left' , hide: true },
{display: 'Number Code' , name : 'numcode' , width : 80, sortable : true , align: 'right' }
],
buttons : [
{name: 'Add' , bclass: 'add' , onpress : test},
{name: 'Delete' , bclass: 'delete' , onpress : test},
{separator: true }
],
searchitems : [
{display: 'ISO' , name : 'iso' },
{display: 'Name' , name : 'name' , isdefault: true }
],
sortname: "iso" ,
sortorder: "asc" ,
usepager: true ,
title: 'Countries' ,
useRp: true ,
rp: 15,
showTableToggleBtn: true ,
width: 700,
height: 200
}); |
注意其中的colModel属性,它明确了列定义,每一列的展示方式。比较遗憾的地方在于,它只提供了这种基于row的行表(即表头在第一行),而不支持基于column的列表(即表头在第一列)的列定义和数据集合表示。于是我写了一大段逻辑将后者的形式转换成它支持的表示形式。
对于Flexigrid所支持的JSON格式的数据表示,还是略显繁琐,如例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
{ "page" : "1" ,
"total" :239,
"rows" :[
{
"id" : "AD" ,
"cell" :{
"name" : "Andorra " ,
"iso" : "AD" ,
"printable_name" : "Andorra 3" ,
"iso3" : "AND 1" ,
"numcode" : "20"
}
},
{
"id" : "AE" ,
"cell" :{
"name" : "United Arab Emirates " ,
"iso" : "AE" ,
"printable_name" : "United Arab Emirates 3" ,
"iso3" : "ARE 1" ,
"numcode" : "784"
}
}
]
} |
繁琐的主要原因在于这种数据格式设计得层次太深。另外,本身也包含了太多的东西,不仅仅是数据内容,还有很多控制分页、展示等等的可选字段。
如果要表格使用纯JavaScript的JSON数据,绘制表格本身的原始方法“flexigrid”无法支持,需要额外地在页面加载完成后调用API来实现,这也是插件设计上一个不够好的地方:
1
2
3
4
|
$(document).ready( function (){
grid.addData(totalNumber, dataRows);
}); |
最后我想说的是,在数据量比较大时,我发现这个插件的性能不够好,在拖动表格的scroll bar的时候明显感到卡顿。
DataTables
DataTables相较而言,功能上要多得多了,官方的特性展示:
- 可定制分页
- 即时数据过滤
- 多列排序
- 列宽自动调整
- 支持各种数据源
- 国际化支持
- 插件支持
- 表格当前状态保持
- ……
而且文档也丰富得多,不过让我不舒服的是,API定义得非常含糊不清(而且方法名和参数的key都带有一个看起来很别扭的1-2个字符的前缀,用于表示类型),虽然有详尽的API文档,但是显然不如代码自注释来得好。
我比较喜欢它的一个插件——FixColumns,使用这个插件就可以做出x轴可滚动,但锁定列表头的效果:
代码也很简单:
1
2
3
4
5
6
7
8
9
10
|
$(document).ready( function () {
var oTable = $( '#example' ).dataTable( {
"sScrollY" : "300px" ,
"sScrollX" : "100%" ,
"sScrollXInner" : "150%" ,
"bScrollCollapse" : true ,
"bPaginate" : false
} );
new FixedColumns( oTable ); // from plugin
} ); |
可以看得到上面提到了的“很别扭”的前缀,oTable的o表示object,sScrollX的s表示string,bPaginate的b表示boolean。
和Flexigrid相比,列定义的格式类似,但是基于行的数据集合设计的格式要显得简单一些,比如支持这样的简单对象数组:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
[ {
"engine" : "Trident" ,
"browser" : "Internet Explorer 4.0" ,
"platform" : "Win 95+" ,
"version" : 4,
"grade" : "X"
},
{
"engine" : "Trident" ,
"browser" : "Internet Explorer 5.0" ,
"platform" : "Win 95+" ,
"version" : 5,
"grade" : "C"
}
] |
这样的数组元素是有序的,每一个对象标识为一行,每一行内的key-value组合去匹配不同的列(engine、browser、platform、version、grade)。而且,它还支持数组嵌套的表示方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
[ [
"Trident" ,
"Internet Explorer 4.0" ,
"Win 95+" ,
4,
"X"
],
[
"Trident" ,
"Internet Explorer 5.0" ,
"Win 95+" ,
5,
"C"
]
] |
信息量并没有任何减少,和列的对应关系通过数组的序列隐含了。当然,基于列的数据表示也没有得到支持(至少我没有找到)。
文章系本人原创,转载请注明作者和出处(http://www.raychase.net)
注:本博客已经迁移到个人站点 http://www.raychase.net/ ,欢迎大家访问收藏,本ITEye博客在数日后将不再更新。
发表评论
-
JavaScript 3D图表
2013-08-24 19:36 3061在说3D图表以前,首先要明确两个概念,一个是数据的维度,一个 ... -
几道容易出错的JavaScript题目
2013-07-07 10:34 2202下面这几道JavaScript题目大多来自于周五的一个小分享 ... -
JavaScript使用for循环时出现的问题
2013-05-26 00:36 1601这个问题的讨论最初来自公司内部邮件,我只是把这个问题的讨论内 ... -
DNS劫持
2013-04-30 13:59 2095想谈一谈这个话题是因为最近有一位朋友抱怨他的博客在某些用户某 ... -
你没有抓住Promises的要点
2013-04-21 20:52 2411注:这篇文章翻译自《You're Missing the P ... -
程序员,都去写一写前端代码吧
2013-01-19 01:16 2621你可以认为我是一个极 ... -
用JavaScript截图
2013-01-08 23:13 7568使用JavaScript截图,这里我要推荐两款开源组件: ... -
Flot介绍
2012-12-22 18:56 2299最近在项目里面要用到JavaScript来绘制图表,JQ ... -
Function Invocation Patterns
2012-11-04 17:46 1317今天看到微博上大家在讨论一个JavaScript的小问题 ... -
d3介绍
2012-10-31 00:17 2549D3.js是一个基于数据的操作文档的JavaScript ... -
Dart,你凭什么挑战JavaScript?
2012-09-26 08:46 5782不妨先来打量一下JavaScript。JavaScrip ... -
Backbone.js介绍
2012-05-08 22:57 4360注:教程请参见这里(本文有很多内容都是从这里翻译的),官方网站 ... -
关于CommonJS
2012-03-26 00:37 17181老实说,之前我对CommonJS也是一无所知,直到不久前Nod ... -
同步、异步转化和任务执行
2012-01-24 22:23 4178正如动静是相对的概念,有了它们,世界才充满盎然生气;变和不变也 ... -
JavaScript实现继承的几种方式
2012-01-07 23:21 12321在这篇文章中,介绍了 ... -
JavaScript重构(十):强化对象封装和模块封装
2011-09-19 22:44 35911、类本身就是一种封装形式,先来看看最简单的封装,JavaSc ... -
JavaScript 的 delete 用法
2011-01-09 11:59 16891、 var o = {}; o.x = new Ob ... -
疯狂的跨域技术
2011-01-09 19:39 2467[转]疯狂的跨域技术 原帖地址:http://itgeeker ... -
服务器端JavaScript
2011-01-11 00:05 1305JSConf2010的重要议题之一:node.js。 不要觉 ... -
JSConf 2010 (一):介绍、Google Chrome Frame 和 GitHub
2011-01-12 00:15 1648一年一度的JSConf大会又召开,这是2010的官网 http ...
相关推荐
jquery表格插件Flexigrid 将数据按照表格排列,类似与ext。
jquery 表格插件 Flexigrid
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对...
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
jquery 插件 DataTables-1.8.2 flexigrid-1.1 个人比较喜欢datatables
JQuery_插件FlexiGrid_之完全配置与使用
jquery flexigrid;jquery flexigrid
Flexigrid-Web2.0 jQuery表格插件 Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性,如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。 一个中文实例教程: ...
NULL 博文链接:https://gundumw100.iteye.com/blog/531131
jquery flexigrid与jquery tablesort 配合实现flexigrid的客户端排序功能。jsp项目,无需数据库即可运行
使用Jquery编写的仿Ext的表格,自带排序分页等功能。
很好用的一个插件,这个版本是php的,。net的没有调试好,以后会上传(成功后) 更多精彩,请访问建站易教程网:www.diyiyusuan.com
jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery – 可变列宽,自动适应表头宽度,可通过 Ajax 连接 XML 数据源,类似 Ext Grid,但基于 jQuery 因此更轻量小巧。 Chromatable JQuery Plugin – ...
flexigrid表格插件 非常漂亮的表格插件
JQuery_插件FlexiGrid_之完全配置与使用.doc
此项目是struts2+json+flexigrid的完整实例,可帮助你对flexigrid快速上手,项目下载后直接导入自己的工程即可,所用jar包会另传,因为超出上传限制,还请理解。
Flexigrid它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
这是介绍JQuery表格插件FlexiGrid在Java中的使用,使用Servlet进行开发,json传递数据
《修改jQuery表格插件flexigrid源码添加自定义功能》文章配套代码http://blog.csdn.net/neareast/article/details/12904393,对jquery表格插件flexigrid的源码进行修改,增加了几个自定义功能,对其功能进行了增强。...