`

Angularjs的directive封装ztree

angularjsdirective 
阅读更多
一般我们做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>

1
顶
0
踩
分享到：
| weblogic配置集群（二）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AngularJS中的Directive自定义一个表格

    通过使用Directive，我们可以创建可重用的、可定制的、封装好的代码块。 接下来，文章中提到了创建一个表格的Directive，命名为tableHelper。这个Directive可以接受两个作用域属性，一个是datasource，它是表格的...

    AngularJS封装jQuery Datepicker

    **AngularJS 封装 jQuery Datepicker 知识点详解** 在Web开发中，日期选择器是一个常见的组件，用于用户输入日期或选择日期范围。AngularJS 和 jQuery 的结合使用可以为开发者提供更强大的功能和更好的用户体验。这...

    在AngularJS中使用jQuery的zTree插件的方法

    ### AngularJS与jQuery zTree插件的整合使用 #### 知识点一：AngularJS框架介绍 AngularJS是一个强大的前端JavaScript框架，由Google开发和维护。它主要用于构建单页应用程序（SPA），采用MVC（Model-View-...

    详解angularJs中自定义directive的数据交互

    AngularJS中的自定义指令（Directives）是框架的核心特性之一，允许开发者创建可复用的UI组件，并且能够与应用程序的模型（Model）进行数据交互。在这个场景中，我们将深入探讨如何在AngularJS中实现自定义指令的...

    AngularJS directive返回对象属性详解

    写在前面：由于directive部分是angularjs中的重中之重，所以会分多篇章进行讲解。本章主要讲解directive返回对象中比较简单的属性 angularjs中使用.directive()来定义指令，该方法接收两个参数：name（指令的名字）...

    AngularJs directive详解及示例代码

    -- directive: my-dir expression --&gt;` 3. **字符串插值（String Interpolation）** 在AngularJS中，`{{ }}` 用于在HTML中插入表达式的值。如 `&lt;img src="img/{{username}}.jpg"/&gt;Hello {{username}}!` 当`...

    angularjs利用directive实现移动端自定义软键盘的示例

    在本文中，我们将深入探讨如何使用AngularJS的`directive`特性来实现在移动设备上自定义软键盘。AngularJS是一个强大的前端JavaScript框架，它通过`directives`提供了一种方式来扩展HTML，使得我们可以创建自定义的...

    angularJS+requireJS实现controller及directive的按需加载示例

    本文介绍如何利用AngularJS和RequireJS结合实现按需加载controller和directive，以减少首屏加载时间。 ### 知识点一：按需加载的概念与优势 按需加载（也称懒加载或异步加载）指的是将页面中某些不立即需要的资源...

    AngularJS入门心得之directive和controller通信过程

    Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件，接下来通过本文给大家介绍AngularJS入门心得之directive和controller通信过程，对angularjs相关知识感兴趣的朋友一起学习吧

    [AngularJS] AngularJS 权威指南 (英文版)

    Learn how to build an AngularJS directive Create extendable modules for plug-and-play usability Build apps that react in real-time to changes in your data model ☆ 出版信息：☆ [作者信息] Alex ...

    学习AngularJS-1.x.pdf

    十一、AngularJS Directive之间的通讯 * 让Directive之间互相通讯 * transclude 指令：在Directive之间传递数据 十二、总结 * 学习AngularJS的经验和教训 * 如何继续深入学习AngularJS 十三、深入学习AngularJS ...

    angularjs-router-directive

    它提供了丰富的功能，包括数据绑定、依赖注入、指令等，而"angularjs-router-directive"则聚焦于AngularJS中的路由和指令两个核心概念。 路由在AngularJS中是通过`ngRoute`模块实现的，它允许我们在应用中定义多个...

    angularjs自定义指令directive正则表达校验

    在AngularJS中，自定义指令通过`@Directive`装饰器声明，其基本结构包括： ```javascript app.directive('directiveName', function() { return { restrict: 'AECM', // A - attribute, E - element, C - class, ...

    AngularJS中directive指令使用之事件绑定与指令交互用法示例

    主要介绍了AngularJS中directive指令使用之事件绑定与指令交互用法,结合实例形式分析了directive指令在模板的使用，事件的绑定及元素、属性、控制器之间的交互相关操作技巧,需要的朋友可以参考下

Magicbox
Global site tag (gtag.js) - Google Analytics