一般我们做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. ThreadLocal ——android消息机制handler在非主线程创建not called Looper.prepare() 错误的原因

    引用自:https://www.jianshu.com/p/a8fa72e708d3 引出: 使用Handler的时候,其必须要跟一个Looper绑定.在UI线程可直接初始化Handler来使用.但是 ...

  2. go语言template包中模板语法总结

    package main; import ( "html/template" "os" "fmt" ) type Person struct ...

  3. 使用gearman进行异步的邮件或短信发送

    一.准备工作 1.为了防止,处理业务途中出现的宕机,请配置好gearman的持久化方式.2.使用gearmanManager来管理我们的worker脚本,方便测试. 上述两条请看我之前写的两篇文章 二 ...

  4. JFinal Web开发学习(一)开启HelloWorld

    初次接触JFinal框架,接触过MVC思想,接触过Spring. JFinal官网: http://www.jfinal.com/ 之前很嫌弃JavaWeb开发,主要原因是繁琐的xml配置. 官方推荐 ...

  5. [z]c++ 和 java 利用protobuf 通讯

    [z]http://andinker.iteye.com/blog/1979428  java端的具体步骤如下: 1.首先下载 下载protobuf 编译工具   http://code.google ...

  6. 在ubuntu16.04编译安装httperf

    在网上偶尔看到httperf可以在测试中使用.网上苦苦找不到ubuntu编译安装的方法.自己琢磨了一下,现在总结如下: apt install httperf vim /etc/security/li ...

  7. VSCode一直弹框错误Linter pylint is not installed

    确保已经安装Python编译环境 点击下图位置(这个是我已经安装过后的文字,原本显示“搜索Python”字样) 点击后显示如下,点击安装 然后出现一大坨命令 最终出现“Successfully ins ...

  8. python 数据类型 之 字符串 拼接 方法 以及效率问题

    在任何编程语言中,字符串的操作应该是最频繁的操作之一.在python中字符串的操作主要有以下几种方式.以及对效率的分析 字符串的拼接:字符串的拼接双方只能是字符串. 方法一: website = 'p ...

  9. js 立即执行函数

    1.我们首先要搞明白:函数表达式和函数声明的区别. 函数表达式:既可以为匿名函数也可以有函数名,但是调用的时候都是通过函数左边的变量func来调用 var func = function(){ ale ...

  10. SVN查看最新几次提交日志的命令

    Windows下,使用svn客户端查看日志很方便,linux下查看的记录条数的小技巧: 1>查看某个目录下的所有日志记录 svn log [PATH] 上面的方式,对于命令行下查看时是很不方便的 ...