angularjs和ztree的最简使用

最近查了在angular1.x中集成ztree，发现里面大多数用的是指令的方式，有时候我们看的时候并不是那么明白，现在我们就用一种简单的方式在angular中集成ztree树吧，虽然不是很规范，但是对于初学者来说，也够用了。

1.我们还是要准备好到导入的包的

  <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">  <script type="text/javascript" src="js/jquery-2.2.1.js"></script>  <script type="text/javascript" src="js/angular.js"></script>  <script type="text/javascript" src="js/jquery.ztree.all.js"></script>  <script type="text/javascript" src="js/jquery.ztree.exhide.js"></script>

导入的需要这些包吧，需要是涉及到的是ztree，angularjs，jquery的js文件和样式表，注意这些js文件和样式表和我们的html文件的层级关系，确保包都导进来了，查看使用f12查看一下有没有导入成功

2.接下来可以直接贴出来js脚本看看怎么写的

<script type="text/javascript"> var app = angular.module("myApp",[]);app.controller("myCtrl",function($scope){$scope.setting = {data: {simpleData: {enable: true,idKey:"id",pIdKey:"pId",rootPId:0},        key:{          name:"name"        }}};        $scope.zNodes  =[{ id:1, pId:0, name:"父节点1"},{ id:11, pId:1, name:"父节点11 - 折叠"},{ id:111, pId:11, name:"叶子节点111"},{ id:112, pId:11, name:"叶子节点112"},{ id:113, pId:11, name:"叶子节点113"},{ id:114, pId:11, name:"叶子节点114"},{ id:12, pId:1, name:"父节点12 - 折叠"},{ id:121, pId:12, name:"叶子节点121"},{ id:122, pId:12, name:"叶子节点122"},{ id:123, pId:12, name:"叶子节点123"},{ id:124, pId:12, name:"叶子节点124"},{ id:13, pId:1, name:"父节点13 - 没有子节点"},{ id:2, pId:0, name:"父节点2 - 折叠"},{ id:21, pId:2, name:"父节点21 - 展开"},{ id:211, pId:21, name:"叶子节点211"},{ id:212, pId:21, name:"叶子节点212"},{ id:213, pId:21, name:"叶子节点213"},{ id:214, pId:21, name:"叶子节点214"},{ id:22, pId:2, name:"父节点22 - 折叠"},{ id:221, pId:22, name:"叶子节点221"},{ id:222, pId:22, name:"叶子节点222"},{ id:223, pId:22, name:"叶子节点223"},{ id:224, pId:22, name:"叶子节点224"},{ id:23, pId:2, name:"父节点23 - 折叠"},{ id:231, pId:23, name:"叶子节点231"},{ id:232, pId:23, name:"叶子节点232"},{ id:233, pId:23, name:"叶子节点233"},{ id:234, pId:23, name:"叶子节点234"},{ id:3, pId:0, name:"父节点3 - 没有子节点"}];    $.fn.zTree.init($("#tree"), $scope.setting, $scope.zNodes);})</script>

上面这样写可能不规范，但是比较简单，其实原理很简单，我们把定义ztree可内容，全部放到angularjs里面，包括初始化ztree都放到angular的作用域里面，就可以实现对作用域的控制了，当然，如果要获取树节点的对象，我们也需要在angular函数内实现，这样就可以很简单的对ztree进行相对应的控制了。当然zNodes节点的内容是我们定义的，可以通过angular异步获取，至于怎么定义ztree的函数，也就是setting中内容的定义，需要我们自己去看ztree的api了。

3.然后我们需要最后贴出html中的body内容，就界面上就应该可以提交显示ztree了

  <div ng-app="myApp" ng-controller="myCtrl">        <div id="tree" class="ztree"></div>  </div>

值得注意的是，这里千万不要忘记声明angular的作用域了，也就是ng-app 和ng-controller的声明，还有就是定义ztree的样式的div中，千万不要参杂其他的样式，不然有可能会显示不出来的，比如：

错误：

 <div style="xxxx" id="tree" class="ztree"></div>

有时候我们后端人员知道的前端知识不多，很容易犯错；定义这棵树的长宽占比以及样式，我们可以把样式表写在上一级

正确：

 <div style="xxxx">     <div id="tree" class="ztree"></div></div>

这张也是可以控制树的样式的，最后我们来看一下，生成的树结构

以上也是我纯粹以菜鸟角度写的，只有简单的应用，但是没有写得多深，如果有差错的地方，欢迎大家来纠正。