angular-bootstrap-nav-tree 插件的應用 abntree

是一個應用angular,bootstrap框架的項目,而且有要用到樹的地方,然後就在github上面查找相關的插件,,最後找到了abntree,


因爲是在項目中用到的,所以可能和你們的環境有所差異,僅做參考;


引入兩個文件:abn-tree.css文件和abn_tree_directive.js文件;


由於我的是angulat項目,所以還需要在module中引入“angularBootstrapNavTree”,


準備工作完畢;


首先在html頁面中加入:

  <abn-tree icon-collapse="icon iconfont icon-less" icon-leaf = "icon iconfont icon-shangcheng" icon-expand="icon iconfont icon-moreunfold" tree-data="my_data" on-select = "vm.my_tree_handle(branch)">
</abn-tree>
<abn-tree>是聲明使用樹的位置,
tree-data 是需要展示的樹的數據,當然數據的格式,和參數有着規定,my_data要是數組,裏面的數據必須是,父包子,具體格式,請參考,官網上面的例子,(tips:children和label一定要)

icon-collapse屬性是展示圖片的,我在這裏應用的是iconfont裏面的圖片,icon-collapse和icon-expand都是圖片,如果不加也可以,但是默認的圖片是有點醜的,
on-select屬性是的是你點擊是觸發的事件,可能是查詢數據之類的事件,
如果你覺得樹的樣式比較醜的話,可以加上一個artical標籤來對原來的樣式進行覆蓋也是可以的,
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章