一般我们做web开发都会用到树，恰好ztree为我们提供了多种风格的树插件。



接下来就看看怎么用Angularjs的directive封装ztree

<!DOCTYPE html>

<html ng-app="ceshiapp" ng-controller="ceshicontroller">

<head>

<title>liuxu.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="../cstorage/plugins/zTreeStyle.css"

	type="text/css"></link>

<link rel="stylesheet"href="../standard/plugins/bootstrap/css/bootstrap.css" type="text/css"></link>

</head>

<body>

<zcheckboxtree id="tree" async="true" binding="/unit/user"datatype="json" text="Name" kind="get" ng-model="checked"

ng-click="auth_treenode_onclick(checked)"></zcheckboxtree>

 <div>

	<h1>已选择</h1>

	[list]

		<li ng-repeat="item in user track by $index">{{item.Name}}</li>

	[/list]

</div>

</body>

<script type="text/javascript"

	src="../standard/plugins/jquery/jquery.min.js"></script>

	<script type="text/javascript" src="../cstorage/plugins/ztree/js/jquery.ztree.core.min.js"></script>

<script type="text/javascript"

	src="../standard/plugins/ztree/js/jquery.ztree.all.js"></script>

<script type="text/javascript"

	src="../standard/plugins/angular/angular.js"></script>

<script type="text/javascript">

	var ceshiapp = angular.module("ceshiapp", []);

	//动态加载模板的指令

ceshiapp.directive('zcheckboxtree',function(){

	var option = {

		restrict : 'E',

		require: '?ngModel',

		replace : true,

		transclude: true,

		template : "<ul class='ztree' ></ul> ",

		scope:true,

		link : function($scope, $element, $attrs, ngModel) {

			$scope.config={};

			$scope.config.id = $attrs.id; // 控件id

			$scope.config.async = $attrs.async; // 是否异步加载，默认异步加载

			$scope.config.binding = "/api/1.0/unit/user"; // 绑定数据的url

			$scope.config.kind = $attrs.kind; // 请求数据方式post get

			$scope.config.datatype = $attrs.datatype; //提交数据方式json

			$scope.config.text = $attrs.text; //提交数据方式json

			$scope.config.user = []; //选中用户信息

			$scope.config.flag = true; //标志位

			if ($scope.async == "true" || $scope.async == undefined) {

					var setting = {

						async : {

							enable : true,

							url : '/api/1.0/unit/user',

							autoParam : [ "id" ],

							type : 'get'

						},

						check : {

							enable : true,

							chkStyle : "checkbox",

							chkboxType : {

								"Y" : "s",

								"N" : "ps"

							},

						},

						data : {

							simpleData : {

								enable : true,

								idKey : "id", // 指定节点属性名

								pIdKey : "parentid", // 指定父节点属性名

								rootPId : -1

							},

							key : {

								name : "Name"

							}

						},

						callback : {

							onCheck : function(event, treeId, treeNode) {

							if (treeNode.checked == false) {

								cancelParentNodeChecked(treeNode);

							}

								getRootOnde();

								treeNode.expand=false;

								treeNode.user=$scope.config.user;

								$scope.$apply(function() {

									ngModel.$setViewValue(treeNode);

								});

							},

							onExpand : function(event, treeId, treeNode) {

							//父节点展开勾选子节点

							if (treeNode.checked && treeNode.isParent) {

								cancelChecked(treeNode);

							}

					}

						}

					};

					//为了实现百度网盘的分享人员树，自定义方法

					//递归去除父类节点的选中

					function cancelParentNodeChecked(node) {

						zTree = $.fn.zTree.getZTreeObj("tree");

						if (node.getParentNode()) {

							zTree.checkNode(node.getParentNode(), false, false);

							cancelParentNodeChecked(node.getParentNode());

						}

					}

					//递归勾选子类

					function cancelChecked(node) {

						if (node.isParent) {//判断是否为父节点

							if (node.zAsync) {//判断该节点是否异步加载过子节点（有木有展开）

								zTree = $.fn.zTree.getZTreeObj("tree");

								var childs = node.children;

								for ( var i = 0; i < childs.length; i++) {

									zTree.checkNode(childs[i], true, false);//勾选子节点

									cancelChecked(childs[i]);

								}

							}

						}

					}

					 function getRootOnde() {

						$scope.config.user = [];

						var treeObj = $.fn.zTree.getZTreeObj("tree");

						var nodes = treeObj.getCheckedNodes(true);

						for ( var i = 0; i < nodes.length; i++) {

							var node = nodes[i].getParentNode();

							if (node == null || nodes[i].getParentNode().checked == false) {

								angular.forEach($scope.config.user, function(item, index) {

									if (nodes[i].id == item.id && $scope.config.flag) {

										$scope.config.flag = false;

									}

								});

								if ($scope.config.flag) {

									$scope.config.user.push(nodes[i]);

								}

								$scope.config.flag = true;

							} else {

								while (node != null) {

									if (node.getParentNode() == null

											|| node.getParentNode().checked == false) {

										angular.forEach($scope.config.user, function(item, index) {

											if (node.id == item.id && $scope.config.flag) {

												$scope.config.flag = false;

											}

										});

										if ($scope.config.flag) {

											$scope.config.user.push(node);

										}

										$scope.config.flag = true;

										break;

									}

									node = node.getParentNode();

								}

							}

						}

						$scope.$apply();

		}

					// 初始化树

		    	eval("$.fn.zTree.init($('#"+ $scope.config.id+"'), setting)");

				} else {

				}

			}

		};

		return option;

	});

	ceshiapp.controller("ceshicontroller", function($scope, $http) {

			$scope.user = [];

			$scope.auth_treenode_onclick=function(checked){

			if (checked.expand == false || checked.expand == undefined) {

				$scope.user =checked.user;

				checked.expand = true;

			} else {

				return;

			}

		};

	});

</script>

</html>

Angularjs的directive封装ztree的更多相关文章

  1. 前端angularJS利用directive实现移动端自定义软键盘的方法

    最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后 ...

  2. AngularJS之directive

    AngularJS之directive AngularJS是什么就不多舌了,这里简单介绍下directive.内容基本上是读书笔记,所以如果你看过<AngularJS up and runnin ...

  3. Angularjs之directive指令学习笔记（二）

    1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...

  4. angularJS中directive父子组件的数据交互

    angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...

  5. AngularJS的directive（指令）配置选项说明

    js代码如下: var appModule = angular.module("appModule", []); appModule.controller("Ctrl&q ...

  6. angularjs的directive详解

    Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操 ...

  7. AngularJS自定义Directive

    (编辑完这篇之后,发现本篇内容应该属于AngularJS的进阶,内容有点多,有几个例子偷懒直接用了官方的Demo稍加了一些注释,敬请见谅). 前面一篇介绍了各种常用的AngularJS内建的Direc ...

  8. 详谈AngularJS的Directive

    指令Directive是AngularJS最重要的核心.我用AngularJS用的并不是很深,一直以来也是在使用中摸索,从一开始的什么都不懂,查不到系统的资料,到开始使用一些简单的数据绑定{{}},到 ...

  9. angularJS中directive与directive 之间的通信

    上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...

随机推荐

  1. ubuntu14.04 源码安装MySQL

    转发麻烦备注本站地址:http://www.cnblogs.com/cyq632694540/p/7053179.html 1.下载源码包 >wget http://dev.mysql.com/ ...

  2. bootstrap 折叠collapse失效

    手动点击折叠,然后调用折叠全部以后,在手动点击折叠项,折叠失效. 方法,折叠项是通过添加或删除".in"来实现,实现如下 $(".collapse.in").c ...

  3. Beyound Compare中比较java字节码class文件

    背景 项目维护的时候版本混乱或者外出在现场项目排错的时候难免要比对两个jar/class/war文件的源代码. 通常情况下这个时候我们用jd-gui直接把文件拖进去比对,这种情况只适合单一文件的比对. ...

  4. Informatica_(3)组件

    一.Informatica介绍Informatica PowerCenter 是Informatica公司开发的世界级的企业数据集成平台,也是业界领先的ETL工具.Informatica PowerC ...

  5. sql建立一种，自定义的执行作业

    USE [chongwu] GO /****** Object: StoredProcedure [dbo].[p_createjob] Script Date: 01/21/2016 14:32:0 ...

  6. andorid 进度条和图片的透明度

    layout.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...

  7. hdu 5459(2015沈阳网赛) Jesus Is Here

    题目;http://acm.hdu.edu.cn/showproblem.php?pid=5459 题意 给出一组字符串,每个字符串都是前两个字符串相加而成,求第n个字符串的c的各个坐标的差的和,结果 ...

  8. Android.DebugOnDevices

    真机调试Android http://www.cnblogs.com/junqilian/archive/2012/11/08/2760734.html

  9. asp.net web 服务器端全局定时执行任务

    web网站里面,需要每隔1分钟,执行一个任务,并且一直保持这个定时执行状态,可以用如下一个方法:    1,Global.asax里面的 Application_Start ,发生在第一次请求网站的时 ...

  10. JVM运行时数据区域解析

         Java与C++之间有一堵由内存动态分配和垃圾收集技术所围成的高墙,墙外面的人想进去,墙里面的人想出来.      Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同 ...