AngularJS tree demo

最新推荐文章于 2019-06-25 16:45:10 发布

揽峰moc

最新推荐文章于 2019-06-25 16:45:10 发布

阅读量220

点赞数

分类专栏： angularjs 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/big1989wmf/article/details/84775559

版权

angularjs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

[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]


<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]

揽峰moc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
AngularJS tree demo

[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][code="java"][/code][b]关键代码[/b][code...
复制链接

扫一扫

专栏目录