AngularJS tree demo

发布时间：2020-12-17 10:35:04 所属栏目：安全来源：网络整理

导读：1、效果图 2、代码 js、css script type="text/javascript"src="editor-app/libs/angular_tree/angular-tree-control.js"/scriptlink rel="stylesheet" type="text/css"href="editor-app/libs/angular_tree/tree-control.css"link rel="stylesheet" type="te

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" : "市场部","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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!