使用ng-grid实现可配置的表格

 

使用Angularjs在带来方便的同时,也有一些遗憾:很多基于jquery或其它的组件,在angularjs中需要集成一下才能用得流畅。但是一些比较复杂的组件,集成起来的工作量相当大,比如说grid。

大多数情况下,使用angularjs可以方便地实现简单的表格,甚至点击修改这样的功能也很容易。但是如果还希望增加更多的功能,比如拖动改变列的前后顺序,点击表头排序,拖动列宽度,隐藏某些列时,就不那么容易了。如果还想加上分组的功能,那就十分麻烦了。这时候我们就需要一个与angularjs配合很好的grid组件。

这几天我试用了http://angular-ui.github.com/ng-grid/,它完全是基于angularjs写的,所以可以使用angularjs的思路与它交互。使用感觉还不错,基本功能齐全,与之交互实现需要的效果也很顺畅。我用它简单地实现了一个表格设计器,在这里演示一下。

我实现的功能如下:

  1. 指定数据源后,可打开表格设计器,定制每一列的表头,添加删除列,调整列顺序等
  2. 可取出调整后的参数,保存在服务器中
  3. 在正式使用的表格中,可读取之前设计好的参数,直接使用

因为该项目的文档和示例写得比较好,而且当前还在紧张改进之中,所以我在这里不详细介绍如何使用,主要来演示效果。想使用的朋友可以上项目主页看,有问题在issues里提,作者回复很快很热心。

http://ju.outofmemory.cn/entry/12828

 

posted on 2015-02-25 17:44  chen110xi  阅读(2683)  评论(0编辑  收藏  举报