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

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

1，下载方式

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

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

2,引用

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

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.****.net/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文档，特别详细~

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

相关推荐