angular-ui-tree的使用实例
潘泰
项目用的angular比较老，是1.3.X版本的，所以可以用的配套的树形就比较少，虽然这棵树官方文档上看起来不是太好看，但是修改一下样式还是可以的。
① css样式
.angular-ui-tree {
max-height:150px;
overflow-y: scroll;
margin-bottom: 15px;
}
.angular-ui-tree-handle {
color:#515a6e;
padding-bottom: 2px;
padding-top: 2px;
}
.angular-ui-tree-handle:hover {
background-color: #f4f6f7;;
}
.angular-ui-tree-nodes {
padding-left: 20px;
}
ol:first-child {
padding-left: 3px;
}
.group-title {
background-color: #687074 !important;
color:#fff !important;
}
span .glyphicon {
cursor: pointer;
margin-left: 3px;
}
.nodrap {
background-color: #f2dede;
}
.tree-handle {
padding: 10px;
background: #428bca;
color: #fff;
margin-right: 10px;
}
ol {
list-style: none;
}
② html页面展示
<body>
<script type="text/ng-template" id="node_renderer">
<div ui-tree-handle class="tree-node tree-node-content" ng-click="getChild(this,node)">
<span class="glyphicon"
ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed }"
ng-if="node.child && node.child.length > 0"
data-nodrag
ng-click="toggle(this);$event.stopPropagation();">
</span>
{{node.name}}
</div>
<ol ui-tree-nodes="" ng-model="node.child" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.child" ui-tree-node ng-include="'node_renderer'">
</li>
</ol>
</script>
<div ng-controller="MyTreeController">
<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-nodes">
<li ng-repeat="node in data" ui-tree-node
ng-include="node_renderer" class="ng-scope angular-ui-tree-node" collapsed="false">
</li>
</ol>
</div>
</div>
</body>
③ js页面逻辑
angular.module('appModule')
.controller('MyTreeController',['$scope','$http',function($scope,$http){
$scope.getChild = function(scope,node) {
$http.get("路径?id="+node.org_id).success(function(data){
//这里假如能够直接取到就是data,如果数据结构不太一样就自己操作一下
if (data) {
node.child = data;
}
})
$scope.node = node;
$scope.model.appCode = $scope.node.id;
$scope.model.appName = $scope.node.name;
};
$scope.toggle = function(){
};
// app有两个组织，A和B，需要先判断属于A组织还是B组织，来确定展示A树还是B树，确定第一级树的name
$scope.load = function() {
// 去后台请求判断是A机构树还是B机构树
var url = '路径';
var mydata;
var _this = this;
$http.get(url).success(function(res){
var appType = (res.data)[0].type; //渠道这个类型来判断是A机构树还是B机构树
if (appType === 'A') {
mydata = [
{
org_id : 11,
org_name : "A机构的第一级树",
child : []
}
];
} else if (appType === 'B') {
mydata = [
{
org_id : B000,
org_name : "B机构的第一级树",
child : []
}
];
}
})
};
$scope.load();
}])
④ 效果图：
无
因为本人的代码在只有内网的电脑上，所以无法截图拷贝等一系列操作
类似资料：