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