[b]1、效果图[/b]
[img]http://dl2.iteye.com/upload/attachment/0116/4044/f0fad2a2-26bd-309c-b7f5-8b79436f34b1.png[/img]
[b]2、代码[/b]
[b]js、css[/b]
[b]关键代码[/b]
3、与activiti editor集成时
4、api
[url]http://wix.github.io/angular-tree-control/[/url]
[img]http://dl2.iteye.com/upload/attachment/0116/4044/f0fad2a2-26bd-309c-b7f5-8b79436f34b1.png[/img]
[b]2、代码[/b]
[b]js、css[/b]
<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">
[b]关键代码[/b]
<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" : "市场部", "age" : "21", "children" : [
{ "name" : "国内市场部", "age" : "23", "children" : [
{ "name" : "华东市场", "age" : "32", "children" : [] },
{ "name" : "中部市场", "age" : "34", "children" : [] }
]}
]}
]},
{ "name" : "财务部", "age" : "33", "children" : [
{ "name" : "会计部", "age" : "25", "children" : [] },
{ "name" : "出纳部", "age" : "28", "children" : [] }
]},
{ "name" : "法务部", "age" : "29", "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', ['$scope','$http','myCache', function($scope,$http,myCache){
//add your code
}]);
4、api
[url]http://wix.github.io/angular-tree-control/[/url]