angular-tree-component的使用详解


Posted in Javascript onJuly 30, 2018

先上网址吧:https://github.com/500tech/angular-tree-component 这是牛逼哄哄的GitHub页面, http://500tech.github.io/angular-tree-component/ 这就是官网啦。

大背景--首先我是在Angular4下面使用的。

1、install from npm :

npm install --save angular-tree-component

2、导入css

在styles.scss下面导入样式:

@import '~angular-tree-component/dist/angular-tree-component.css';

3、import the module

app.module.ts

import { TreeModule } from 'angular-tree-component';

@NgModule({
 imports: [..., TreeModule],
 ...
})
export class AppModule {
 ...
}

4、app.component.ts里面

nodes = [
  {
   id: 1,
   name: 'root1',
   children: [
    { id: 2, name: 'child1' },
    { id: 3, name: 'child2' }
   ]
  },
  {
   id: 4,
   name: 'root2',
   children: [
    { id: 5, name: 'child2.1' },
    {
     id: 6,
     name: 'child2.2',
     children: [
      { id: 7, name: 'subsub' }
     ]
    }
   ]
  }
 ];
 options = {};

在 app.component.html里面

<tree-root [nodes]="nodes" [options]="options"></tree-root>

到这里编译出来就可以看到一棵树啦angular-tree-component的使用详解

5、是不是感觉也不是很麻烦嫩,这棵树是真的牛掰,为作者手动点赞。

在option里面可以配置一些参数:

显示内容--displayfield:'name'(以显示名称为例)

id--idField: 'uuid'(如果没有id,会随机生成id,保证每个节点的唯一性)

是否展开节点:isExpandedField:'expanded'(默认是不展开的哟)

actionMapping:自定义事件,

mouse: {
     dblClick: (tree, node, $event) => {
      if (node.hasChildren) TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
     }
    }

支持按需加载:

getChildren: this.getChildren.bind(this),

6、events

<tree-root [nodes]="nodes"
  (toggleExpanded)="onEvent($event)"
  (activate)="onEvent($event)"
  (focus)="onEvent($event)"
  (blur)="onEvent($event)">
 </tree-root>

 onEvent = ($event) => console.log($event);

有activate状态就有deactivate状态

7、在option里面添加:useCheckBox:true可以显示checkBox。这时还可以有一个select事件,获取的是子节点。那如果需要获取父节点怎么处理呢,折腾了老半天之后,最终还是找到了方法。。。。

node.partialSelected 可以获取到根节点哟。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript miscellanea -display data real time, using window.status
Jan 09 Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
javascript json2 使用方法
Mar 16 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 #Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 #Javascript
在react中使用vuex的示例代码
Jul 30 #Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 #Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 #Javascript
详解JSON Web Token 入门教程
Jul 30 #Javascript
JS中Promise函数then的奥秘探究
Jul 30 #Javascript
You might like
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
python中logging库的使用总结
2017/10/18 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
美国在线家具网站:GDFStudio
2021/03/13 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
初中毕业生的自我评价
2014/03/03 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
三八妇女节慰问信
2015/02/14 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL