`

JQuery表格插件介绍:Flexigrid和DataTables

阅读更多

 

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

Flexigrid

官方Flexigrid的特性展示:

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

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

JQuery表格插件介绍:Flexigrid和DataTables

只需要这样的代码:

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轴可滚动,但锁定列表头的效果:

JQuery表格插件介绍:Flexigrid和DataTables

代码也很简单:

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博客在数日后将不再更新。

3
7
分享到:
评论
2 楼 vagrant1984 2012-12-27  
flexgrid用过一个项目,痛苦
1 楼 vagrant1984 2012-12-27  
jqgrid

相关推荐

    jquery表格插件Flexigrid

    jquery表格插件Flexigrid 将数据按照表格排列,类似与ext。

    jquery 表格插件 Flexigrid

    jquery 表格插件 Flexigrid

    jQuery表格插件 Flexigrid的例子

    Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对...

    jquery表格插件flexigrid-1.1.zip

    Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

    jquery 2个表格插件

    jquery 插件 DataTables-1.8.2 flexigrid-1.1 个人比较喜欢datatables

    JQuery_插件FlexiGrid_之完全配置与使用

    JQuery_插件FlexiGrid_之完全配置与使用

    jquery flexigrid

    jquery flexigrid;jquery flexigrid

    jquery flexigrid插件

    Flexigrid-Web2.0 jQuery表格插件 Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性,如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。 一个中文实例教程: ...

    jquery插件FlexiGrid的使用(已更新)

    NULL 博文链接:https://gundumw100.iteye.com/blog/531131

    jquery flexigrid 支持前台排序

    jquery flexigrid与jquery tablesort 配合实现flexigrid的客户端排序功能。jsp项目,无需数据库即可运行

    Jquery仿Ext表格flexigrid

    使用Jquery编写的仿Ext的表格,自带排序分页等功能。

    jquery插件之flexigrid篇

    很好用的一个插件,这个版本是php的,。net的没有调试好,以后会上传(成功后) 更多精彩,请访问建站易教程网:www.diyiyusuan.com

    jQuery 表格插件整理

    jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery – 可变列宽,自动适应表头宽度,可通过 Ajax 连接 XML 数据源,类似 Ext Grid,但基于 jQuery 因此更轻量小巧。 Chromatable JQuery Plugin – ...

    flexigrid表格插件

    flexigrid表格插件 非常漂亮的表格插件

    JQuery_插件FlexiGrid_之完全配置与使用.doc

    JQuery_插件FlexiGrid_之完全配置与使用.doc

    jquery插件之flexigrid学习实例

    此项目是struts2+json+flexigrid的完整实例,可帮助你对flexigrid快速上手,项目下载后直接导入自己的工程即可,所用jar包会另传,因为超出上传限制,还请理解。

    Flexigrid-master表格插件

    Flexigrid它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

    FlexiGrid插件使用例子

    这是介绍JQuery表格插件FlexiGrid在Java中的使用,使用Servlet进行开发,json传递数据

    增强版的flexigrid源码

    《修改jQuery表格插件flexigrid源码添加自定义功能》文章配套代码http://blog.csdn.net/neareast/article/details/12904393,对jquery表格插件flexigrid的源码进行修改,增加了几个自定义功能,对其功能进行了增强。...

Global site tag (gtag.js) - Google Analytics