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 相关文章推荐
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
js实现简易聊天对话框
Aug 17 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
使用vue完成微信公众号网页小记(推荐)
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
德劲1107的电路分析与打磨
2021/03/02 无线电
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
php date与gmdate的获取日期的区别
2010/02/08 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
js window.print实现打印特定控件或内容
2013/09/16 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
详解vue-cli3使用
2018/08/14 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
Flask框架web开发之零基础入门
2018/12/10 Python
python感知机实现代码
2019/01/18 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
python标准库os库的函数介绍
2020/02/12 Python
python如何调用java类
2020/07/05 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
小学网上祭英烈活动总结
2014/07/05 职场文书
岗位安全生产责任书
2014/07/28 职场文书
身边的榜样活动方案
2014/08/20 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
绿里奇迹观后感
2015/06/15 职场文书