angular-bootstrap-nav-tree 插件的应用 abntree
来源:互联网 发布:网络数据储存在哪里 编辑:程序博客网 时间:2024/06/01 07:21
是一个应用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标签来对原来的样式进行覆盖也是可以的,
阅读全文
0 0
- angular-bootstrap-nav-tree 插件的应用 abntree
- Bootstrap Nav
- bootstrap nav nav-tabs 选项卡 的使用实例
- 【Angular】Angular项目添加ng-bootstrap插件
- ionic-angular路由,去掉特定页面的ion-nav-bar
- bootstrap 3 nav-tab 用法
- BootStrap--CSS组件--导航(nav)
- angular-bootstrap
- angular.bootstrap
- angular + bootstrap
- 使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用
- php 应用 bootstrap-fileinput 上传文件 插件 操作的方法
- 在 Angular 项目中添加插件 ng-bootstrap
- 实用Bootstrap树形菜单特效插件Bootstrap Tree View
- 简单的angular应用
- 在angular 下使用bootstrap 的datepicker
- angualr js中的angular.bootstrap的使用
- angular+bootstrap写的简易购物车
- 最全Eclipse中项目上有小红叉,但就是找不到报错文件(总结,持续更新)
- hdu 3466 Proud Merchants (01背包 + 结构体的sort排序)
- JavaScript单线程模型
- 基于Restful形式访问远程服务并封装对象
- 随机数生成算法
- angular-bootstrap-nav-tree 插件的应用 abntree
- 欢迎使用CSDN-markdown编辑器
- 树状数组求不带修改前缀最值问题 51NOD 1272 最大距离
- mongo ping函数实例
- 标签控件Tab
- leetcode 309. Best Time to Buy and Sell Stock with Cooldown
- 翻译连载 | JavaScript轻量级函数式编程-第5章:减少副作用 |《你不知道的JS》姊妹篇
- 利用nginx 反向代理解决跨域问题
- LeetCode: 66. Plus One