2、代码
js、css
<script type="text/javascript" src="editor-app/libs/angular_tree/angular-tree-control.js"></script> <link rel="stylesheet" type="text/css" href="editor-app/libs/angular_tree/tree-control.css"> <link rel="stylesheet" type="text/css" href="editor-app/libs/angular_tree/tree-control-attribute.css">
关键代码
<script type="text/javascript">
angular.module('app',['treeControl']).controller('MyCtrl',['$scope',function($scope){
//treeOptions
$scope.treeOptions = {
nodeChildren: "children",dirSelectable: true,multiSelection:true,injectClasses: {
ul: "a1",li: "a2",liSelected: "a7",iExpanded: "a3",iCollapsed: "a4",iLeaf: "a5",label: "a6",labelSelected: "a8"
}
}
//groupsTreeModel
$scope.groupsTreeModel=
[
{ "name" : "总公司","age" : "29","children" : [
{ "name" : "市场销售部","age" : "21","children" : [
{ "name" : "销售部","age" : "42","children" : [] },{ "name" : "市场部","children" : [
{ "name" : "国内市场部","age" : "23","children" : [
{ "name" : "华东市场","age" : "32",{ "name" : "中部市场","age" : "34","children" : [] }
]}
]}
]},{ "name" : "财务部","age" : "33","children" : [
{ "name" : "会计部","age" : "25",{ "name" : "出纳部","age" : "28","children" : [] }
]},{ "name" : "法务部","children" : [] }
] }
];
}]);
//item click
$scope.onTreeLeafItemClickFunction = function(sel) {
//alert(sel.name);
$scope.selectedNode = sel;
};
//father node expanded
$scope.onTreeFatherNodeExpandFunction=function(exp){
//alert('expand');
alert('expand:'+exp.name);
}
}]);
</script>
<!-- body #s -->
<body ng-controller="MyCtrl">
<div treecontrol
class="tree-light"
tree-model="groupsTreeModel"
on-selection="onTreeLeafItemClickFunction(node)"
on-node-toggle="onTreeFatherNodeExpandFunction(node)"
options="treeOptions"
>{{node.name}}</div>
</body>
<!-- body #e -->
3、与activiti editor集成时
var activitiModeler = angular.module('activitiModeler',[
'ngCookies','ngResource','ngSanitize','ngRoute','ngDragDrop','mgcrea.ngStrap','ngGrid','ngAnimate','pascalprecht.translate','duScroll','treeControl'
]);
/*add tree component: treecontrol*/
angular.module('activitiModeler').controller('myCandidateGroupsController','$http','myCache',function($scope,$http,myCache){
//add your code
}]);
4、api
http://wix.github.io/angular-tree-control/ 原文链接：https://www.f2er.com/angularjs/147543.html
