是一个应用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>
参数解读:
1、tree-data 属性是需要展示的树的数据,当然数据的格式,和参数有着规定,my_data要是数组,里面的数据必须是,父包子,具体格式,请参考,官网上面的例子,(tips:children和label一定要) ;
2、icon-collapse属性是父节点合起来的时候节点的图片,我在这里应用的是iconfont里面的图片,icon-collapse和icon-expand都是图片,如果不加也可以,但是默认的图片是有点丑的;
3、icon-expand属性是父节点展开的时候节点的图片;
3、on-select属性是的是你点击是触发的事件,可能是查询数据之类的事件,
如果你觉得树的样式比较丑的话,可以加上一个artical标签应用css的权值来对原来的样式进行覆盖也是可以的;