Angularjs的directive封装ztree

程序员文章站 2022-06-12 09:55:01

...

一般我们做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

AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】

Angularjs使用directive自定义指令实现attribute继承的方法详解

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

AngularJS中的Directive自定义一个表格

AngularJS中的Directive实现延迟加载

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

AngularJS 验证信息框架的封装

详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用

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

angularjs封装$http为factory的方法