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

最新推荐文章于 2019-12-13 11:08:05 发布

水火土要努力

最新推荐文章于 2019-12-13 11:08:05 发布

阅读量1.8k

点赞数

分类专栏： js angular

本文链接：https://blog.youkuaiyun.com/zhm0303/article/details/79495914

版权

js 同时被 2 个专栏收录

26 篇文章

订阅专栏

angular

2 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目用的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', ['$rootScope', function ($rootScope) {
    return {
      restrict: 'EA',
      replace: true,
      require: '?ngModel',
      template: template,
      scope: {
        setting:'='
      },
      link:function(scope, element, attrs, ngModel){


      }
    }
  }]);

link函数的参数一定要按照这种方式传入另一个需要注意的地方时require:'?ng-model',此处若是理解不了，参考

http://blog.youkuaiyun.com/zpz_326/article/details/73527863

setting作为从使用组件式传入的参数

4，使用组件

<app-tree setting="vm.setting" ng-model="vm.oraganList" id="organList" class="app-tree ztree"></app-tree>

要给<app-tree>设置id

注意：！！！！使用组件的时候千万不要忘记加 class='ztree'的样式，踩过的坑，如果发现checkbox加载不出来，多半就是class没有加的锅！！！！！

js部分

这是setting部分

vm.setting = {
  check: {
    enable: true,
    chkStyle: "checkbox",
    chkboxType: {"Y": "", "N": ""}
  },
  data: {
    key: {
      title: "name",
    },
    simpleData: {
      enable: true,
      idKey: "id",
      pIdKey: vm.title,
    }
  },
  callback: {
    onClick: select
  }

};

$.fn.zTree.init($('#organList'), vm.setting, vm.oraganList);

这里是初始化ztree组件的部分，第一个参数是ztree容器的id选择器，第2个参数是setting设置参数，第3个参数是ztree的数据源

一般这个数据源来自后端接口

上面保证了tztree的基础功能，更多扩展功能要参考api文档，特别详细~