angular.js将ztree封装成组件使用

本文介绍了在Angular.js项目中如何使用ztree插件来实现组织结构树的展示。首先,通过官网下载或npm安装ztree,接着引入所需的css和js文件。然后,详细阐述了如何封装ztree组件,包括html结构和js部分的编写,特别强调了link函数的参数传递方式。在使用组件时,需为<app-tree>设置id,并添加class='ztree'以确保样式正确加载。最后,提供了设置ztree的参数示例,并提醒读者数据源通常来自后端接口,建议参考ztree的API文档进行更多功能扩展。
摘要由CSDN通过智能技术生成

项目用的angular.js的框架,最近要做组织结构树的展示,决定使用ztree插件,下面是步骤

1,下载方式

①,可以再官网下载 http://www.treejs.cn/v3/api.php

②,也可以使用npm的包管理工具下载  npm install ztree --save-dev

2,引用


css和js文件要引用,js也可以直接引用最全的那个文件

3,封装组件

html部分 ul作为ztree的容器,class='ztree'才能加载ztree的样式

<div>
  <ul class="ztree"></ul>
</div>

js部分

angular.module('app.directives')
  .directive('appTree', [
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值