一般我们做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. mysql 主从数据不一致 Slave_SQL_Running: No 解决方法

    在slave服务器上通过如下命令 mysql> show slave status\G; 显示如下情况: Slave_IO_Running: Yes Slave_SQL_Running: No ...

  3. vuex写法

    <template> <div class="hello"> <p>{{count}}</p> <p> <butt ...

  4. c#dev tabcontrol 与嵌套gridcontrol 总结

    Gridcontrol设置 1: 拖进去的时候别拖到tabcontrol外边, 否则dock 停靠的时候,停靠错了地方. 2:去掉Drag a column header here to group. ...

  5. andorid 全部对话框

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

  6. memcached 一致性hash原理

    memcache 是一个分布式的缓存系统,但是本身没有提供集群功能,在大型应用的情况下容易成为瓶颈.但是客户端这个时候可以自由扩展,分两阶段实现.第一阶段:key 要先根据一定的算法映射到一台memc ...

  7. hdu 1509 & hdu 1873 & hdu 1896 (基础优先队列)

    http://acm.hdu.edu.cn/showproblem.php?pid=1509 裸的优先队列的应用,输入PUT的时候输入名字,值和优先值进队列,输入GRT的时候输出优先值小的名字和对应的 ...

  8. 探索未知种族之osg类生物---呼吸分解之事件循环一

    事件循环和更新循环 终于到了我们嘴里经常念叨的事件循环.更新循环以及渲染循环了.首先我们来区分一下事件循环和渲染循环,他们两个首先是两个不同顺序执行的过程,我们有时候会用到任意node的updateC ...

  9. 02. pt-archiver

    pt-archiver \--source h=192.168.100.101,P=3306,u=admin,p='admin',D=db01,t=t01 \--dest h=192.168.100. ...

  10. POJ 2449Remmarguts' Date 第K短路

    Remmarguts' Date Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 29625   Accepted: 8034 ...