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

猜你喜欢

转载自blog.csdn.net/u013935095/article/details/77941692