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>

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

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