使用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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM