sortTable---一個指令是你的表格可以排序

Angularjs做的後臺系統table表格肯定是少不了的重要元素,有一個special的需求就是讓表格排序,搜到了一個功能強大的插件datatables,也有angular datatables的ng版本,這也是我們的最初選擇,但是遇到一個莫名bug,跟datatables的owner溝通了幾次也沒解決,只好作罷。自己寫幾個簡單的directive功能可以實現。

這裏提到datatables,並不是要與之媲美,看代碼量也能看出,這個sortTable是個輕量級的小指令,並不及datatables功能那麼強大。本指令旨在不改變原有table實現的情況下,僅加個sort-table指令,再將tbody的數據源付給它,就能實現排序功能。

 sort-table='ReportList'//ReportList爲生成表格的數據源

這裏寫圖片描述

點擊表頭即可升序,降序排列,如果某一列不需開啓排序功能,只需在表頭的th上加上‘noSort’屬性即可

這裏寫圖片描述

除此之外,中文漢子按照首字母排序也是個很普遍的功能,在這裏一併奉上漢字轉拼音的方法及filter,均在代碼裏一目瞭然

這裏寫圖片描述

可以點擊查看效果哦

源代碼點擊這裏下載,覺得好別忘了給star哦

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章