JQuery表格插件介绍:Flexigrid和DataTables

标签: JavaScript DataTables Flexigrid JQuery 插件 | 发表时间:2012-12-27 11:31 | 作者:四火
出处:http://www.raychase.net

文章系本人原创,转载请保持完整性并注明出自 《四火的唠叨》

JQuery表格插件介绍:Flexigrid和DataTables JQuery的表格插件有很多。 FlexigridDataTables是我最近使用的,并且功能比较强大,在这里介绍一下。如果你在寻找前端绘制表格的插件,可以考虑它们。

Flexigrid

官方Flexigrid的特性展示:

  • 列宽度可拖拽调整
  • 高度和宽度可拖拽调整
  • 列头可排序
  • 主题支持
  • 支持XML/JSON格式的Ajax数据源
  • 支持分页
  • 可以显示/隐藏列
  • 表格搜索功能
  • JavaScript API支持

要得到这样功能丰富、美观的表格:

JQuery表格插件介绍:Flexigrid和DataTables

只需要这样的代码:

$("#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格式的数据表示,还是略显繁琐,如例:

{
	"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来实现,这也是插件设计上一个不够好的地方:

$(document).ready(function(){
    grid.addData(totalNumber, dataRows);

});

最后我想说的是,在数据量比较大时,我发现这个插件的性能不够好,在拖动表格的scroll bar的时候明显感到卡顿。

DataTables

DataTables相较而言,功能上要多得多了,官方的特性展示:

  • 可定制分页
  • 即时数据过滤
  • 多列排序
  • 列宽自动调整
  • 支持各种数据源
  • 国际化支持
  • 插件支持
  • 表格当前状态保持
  • ……

而且文档也丰富得多,不过让我不舒服的是,API定义得非常含糊不清(而且方法名和参数的key都带有一个看起来很别扭的1-2个字符的前缀,用于表示类型),虽然有 详尽的API文档,但是显然不如代码自注释来得好。

我比较喜欢它的一个插件——FixColumns,使用这个插件就可以做出x轴可滚动,但锁定列表头的效果:

JQuery表格插件介绍:Flexigrid和DataTables

代码也很简单:

$(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相比,列定义的格式类似,但是基于行的数据集合设计的格式要显得简单一些,比如支持这样的简单对象数组:

[
      {
        "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)。而且,它还支持数组嵌套的表示方法:

[
      [
        "Trident",
        "Internet Explorer 4.0",
        "Win 95+",
        4,
        "X"
      ],
      [
        "Trident",
        "Internet Explorer 5.0",
        "Win 95+",
        5,
        "C"
      ]
]

信息量并没有任何减少,和列的对应关系通过数组的序列隐含了。当然,基于列的数据表示也没有得到支持(至少我没有找到)。

文章系本人原创,转载请保持完整性并注明出自 《四火的唠叨》

分享到:
你可能也喜欢:

相关 [jquery 表格 插件] 推荐:

【分享】jQuery 表格Table插件汇总

- - HTML5研究小组
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等. Flexigrid – Web 2.0 Javscript Grid for jQuery – 可变列宽,自动适应表头宽度,可通过 Ajax 连接 XML 数据源,类似 Ext Grid,但基于 jQuery 因此更轻量小巧.

JQuery表格插件介绍:Flexigrid和DataTables

- - 四火的唠叨
文章系本人原创,转载请保持完整性并注明出自 《四火的唠叨》. Flexigrid和 DataTables是我最近使用的,并且功能比较强大,在这里介绍一下. 如果你在寻找前端绘制表格的插件,可以考虑它们. 官方Flexigrid的特性展示:. 支持XML/JSON格式的Ajax数据源. JavaScript API支持.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

常用JQuery插件整理

- xxg - 博客园-首页原创精华区
  虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来.   jquery.HooRay(哈哈,自己写的插件是必须有的).   jquery UI(官方的UI插件,功能很多,但我只用少数几个).   artDialog(很欣赏这个插件,又强大又美观).

2010年最佳jQuery插件

- seenxu - 博客园新闻频道
在2010年,JavaScript框架继续日渐普及,这使得大量的插件被开发出来. WDL的作者从大量的优秀 jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best of the best. 2010年最佳jQuery插件(排名不分先后):. 一个加载设置拥有9种过度效果的超级smooth slider,它还支持如链接图像和键盘导航等内容.

[原]jQuery ListBox Plugin(ListBox插件)

- We_Get - 博客园-首页原创精华区
转载请注明作者(think8848)和出处(http://think8848.cnblogs.com). 未经作者同意,请勿擅自修改本文内容. 这两天项目中要用到类似于ListBox的功能了,本以为有很多jQuery插件,没有想到的是,居然没有搜到好用的,咋办呢,自已动手丰衣足食吧,于是花了一个晚上的时间做出来一个,上效果图:.

JQuery图表插件——Highcharts

- We_Get - 博客园-首页原创精华区
因为项目中需要用到图表生成,所有Google了下,找到了这个插件,顺带写了个DEMO. 先上三个图,分别是曲线、柱状、扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意. 第一步,下载并且引用JS包(highcharts.js),theme顾名思义是放皮肤的. 可以下载DEMO逐一试试就知道效果怎么样了,上图就应用了两个样式.

jquery Dialog - 弹出窗插件

- Bloger - 博客园-首页原创精华区
    分享几个jquery Dialog弹出窗插件.     1)Zebra_Dialog是一个可灵活配置的对话框jQuery插件,大小只有4KB,要求jQuery 1.5.2+支持. 可用于替换JavaScript原始的“alert” 和“confirmation”对话框. 这个插件使用jQuery Plugin Boilerplate构建.

jQuery 插件autocomplete 应用

- Bloger - 博客园-首页原创精华区
  项目中有时会用到自动补全查询,就像Google搜索框、淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能.   autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件).

jquery插件的开发

- - CSDN博客推荐文章
插件的概念大家并不陌生了,插件可以很方便我们进行代码开发,大大节约了我们的开发时间. 以前我用jquery都是自己洗一大把的代码,复用性不高维护也不方便. 因此自己学着开发了2个简单的jquery插件. 下面先看下jquery插件的分类. jQuery开发分为两种:. 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法.