一般我们做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. subprocess.Popen在win10下会有异常

    win10运行下 会报740错误 查了下搜索结果 是uac问题 但uac已经是关闭状态 后直接使用os.popen进行替换 运行ok

  2. selenium去掉下载弹窗

    from selenium import webdriver import time import urllib2 class Download(): def __init__(self): self ...

  3. redhat 5.6安装wireshark

    mkdir -p /mnt/cdrom mount -t iso9660 /dev/cdrom /mnt/cdrom cd mnt/cdrom/Server rpm -ivh lm_sensors-- ...

  4. Linux驱动之建立一个hello模块

    目标:在开发板上执行insmod hello.ko能在控制台打印出hello init:接着执行rmmod会在控制台打印出hello exit 建立一个hello模块的步骤如下: 1.建立一个hell ...

  5. springBoot整合Quarzt2.3

    首先,你要配置好springboot的配置(在resources下) 我把其改为application.yml # Tomcat server: tomcat: uri-encoding: UTF-8 ...

  6. vs的【warning C4996:'fopen': This function or variable may be unsafe】解决方案

    编译警告:warning C4996 与 Security Enhancements in the CRT 将过去的工程用VS2005打开的时候.你有可能会遇到一大堆的警告:warning C4996 ...

  7. oracle 使用exp命令 sys用户登录 导出表存为dmp文件

    在cmd下面,使用exp命令,格式为 exp \"sys/123456@dbname as sysdba\" file=d:\dmp\test.dmp tables=sys.tes ...

  8. PAT 1081 检查密码（15） （代码+思路）

    1081 检查密码(15 分) 本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能.该网站要求用户设置的密码必须由不少于6个字符组成,并且只能有英文字母.数字和小数点 .,还必须既有字母也 ...

  9. java.lang.NoClassDefFoundError: org/apache/ibatis/cursor/Cursor

    因为mybatis的版本和mybatis-spring的版本不兼容导致的,解决方法:mybatis的3.4.0及以上版本用mybatis-spring1.3.0及以上版本:mybatis的3.4.0以 ...

  10. BZOJ1855或洛谷2569 [SCOI2010]股票交易

    一道单调队列优化\(DP\) BZOJ原题链接 洛谷原题链接 朴素的\(DP\)方程并不难想. 定义\(f[i][j]\)表示到第\(i\)天,手上持有\(j\)股时的最大收益. 转移方程可以分成四个 ...