angular-ui-tree

转自：http://www.cnblogs.com/crazyJavaBoy/p/5057347.html

angular-ui-tree的github项目地址：https://github.com/angular-ui-tree/angular-ui-tree

DEMO目录结构如下：

bootstrap.css为3.0以上

app.css内容
.btn {
margin-right: 8px;
}

.angular-ui-tree-handle {
background: #f8faff;
border: 1px solid #dae2ea;
color: #7c9eb2;
padding: 10px 10px;
}

.angular-ui-tree-handle:hover {
color: #438eb9;
background: #f4f6f7;
border-color: #dce2e8;
}

.angular-ui-tree-placeholder {
background: #f0f9ff;
border: 2px dashed #bed2db;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

tr.angular-ui-tree-empty {
height:100px
}

.group-title {
background-color: #687074 !important;
color: #FFF !important;
}


/* --- Tree --- */
.tree-node {
border: 1px solid #dae2ea;
background: #f8faff;
color: #7c9eb2;
}

.nodrop {
background-color: #f2dede;
}

.tree-node-content {
margin: 10px;
}
.tree-handle {
padding: 10px;
background: #428bca;
color: #FFF;
margin-right: 10px;
}

.angular-ui-tree-handle:hover {
}

.angular-ui-tree-placeholder {
background: #f0f9ff;
border: 2px dashed #bed2db;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

ol{list-style:none;}

angular_tree.html内容

<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/angular.js"></script> <script src="js/angular-ui-tree.js"></script> <script type="text/ng-template" id="nodes_renderer"> <div ui-tree-handle class="tree-node tree-node-content"> <a class="btn btn-success btn-xs " ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"> <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span></a> {{node.title}} </div> <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}"> <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer'"> </li> </ol> </script> <div ng-controller="MyController"> <div ui-tree id="tree-root" class="ng-scope angular-ui-tree" data-drag-enabled="false"> <ol ui-tree-nodes ng-model="data" class="ng-pristine ng-untouched ng-valid ng-scope angular-ui-tree-nodes"> <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer'" class="ng-scope angular-ui-tree-node" collapsed="false"> </li> </ol> </div> </div> <script> var myAppModule = angular.module('MyApp',['ui.tree']); myAppModule.controller('MyController',function($scope) { $scope.treeOptions = { accept: function(sourceNodeScope,destNodesScope,destIndex) { return true; } } $scope.data = [ { "id": 1,"title": "node1","nodes": [ { "id": 11,"title": "node1.1","nodes": [ { "id": 111,"title": "node1.1.1","nodes": [] } ] },{ "id": 12,"title": "node1.2",{ "id": 2,"title": "node2","nodrop": true,"nodes": [ { "id": 21,"title": "node2.1","nodes": [] },{ "id": 22,"title": "node2.2",{ "id": 3,"title": "node3","nodes": [ { "id": 31,"title": "node3.1","nodes": [] } ] } ]; }); // 页面加载完成后,再加载模块 angular.bootstrap(document,["MyApp"]); </script>

（编辑：李大同）

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