使用Angularjs在帶來方便的同時,也有一些遺憾:很多基於jquery或其它的組件,在angularjs中需要集成一下才能用得流暢。但是一些比較復雜的組件,集成起來的工作量相當大,比如說grid。
大多數情況下,使用angularjs可以方便地實現簡單的表格,甚至點擊修改這樣的功能也很容易。但是如果還希望增加更多的功能,比如拖動改變列的前后順序,點擊表頭排序,拖動列寬度,隱藏某些列時,就不那么容易了。如果還想加上分組的功能,那就十分麻煩了。這時候我們就需要一個與angularjs配合很好的grid組件。
這幾天我試用了http://angular-ui.github.com/ng-grid/,它完全是基於angularjs寫的,所以可以使用angularjs的思路與它交互。使用感覺還不錯,基本功能齊全,與之交互實現需要的效果也很順暢。我用它簡單地實現了一個表格設計器,在這里演示一下。
我實現的功能如下:
- 指定數據源后,可打開表格設計器,定制每一列的表頭,添加刪除列,調整列順序等
- 可取出調整后的參數,保存在服務器中
- 在正式使用的表格中,可讀取之前設計好的參數,直接使用
因為該項目的文檔和示例寫得比較好,而且當前還在緊張改進之中,所以我在這里不詳細介紹如何使用,主要來演示效果。想使用的朋友可以上項目主頁看,有問題在issues里提,作者回復很快很熱心。
http://ju.outofmemory.cn/entry/12828