Angularjs的directive封裝ztree

時間 2019-11-19
標籤 angularjs directive 封裝 ztree 欄目 AngularJS 简体版
原文原文鏈接
通常咱們作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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。