AngularJS tree demo

1、效果图

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" : "市场部", "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
http://wix.github.io/angular-tree-control/

猜你喜欢