是一个应用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标签来对原来的样式进行覆盖也是可以的,