<!DOCTYPE html>
<html ng-app="com.ngbook.demo">
<head>
<Meta name="description" content="ng trrview example">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.4/jquery.min.js"></script>
<Meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
ul {
list-style: none;
}
.text-field {
cursor: pointer;
}
.check-Box {
width: 24px;
height: 18px;
border-radius: 8px;
}
</style>
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
angular.module("com.ngbook.demo",[])
.controller("DemoController",['$http','$scope',function($http,$scope) {
var dataset = [{
"code": "00","name": "总部","level": "0","parentcode": "","parentname": ""
},{
"code": "01","name": "东北","level": "1","parentcode": "00","parentname": "总部"
},{
"code": "02","name": "辽宁","level": "2","parentcode": "01","parentname": "东北"
},{
"code": "03","name": "东南",{
"code": "4","name": "123","parentname": "总部"
}]
$scope.treedata = [];
//遍历取出数据,解析多个层级数据,一维数据解析成树形，如本来就为树形结构，忽略此步骤
/*同getTree函数同种功能,临时变量写法*/
function listTree(data,pid) {
var result = [],temp;
for (var i = 0; i < data.length; i++) {
if (data[i].parentcode == pid) {
var obj = {
"name": data[i].name,"code": data[i].code
}
temp = listTree(data,data[i].code)
if (temp.length > 0) {
obj.children = temp
}
result.push(obj)
}
}
return result
}
function getTree(nodes) {
var gc = function(parentid) {
var cn = [];
for (var i = 0; i < nodes.length; i++) {
var n = nodes[i];
if (n.parentcode == parentid) {
n.children = gc(n.code);
cn.push(n);
};
};
return cn;
};
return gc("");
};
var vm = this;
vm.tree = getTree(dataset);
// vm.tree = listTree(dataset,"");
vm.itemClicked = function($item) {
vm.selectedItem = $item;
console.log($item,'item clicked');
};
vm.itemCheckedChanged = function($item) {
$http.post('/url',$item);
console.log($item,'item checked');
};
return vm;
}])
//自定义指令treeView，编写成组件
.directive('treeView',[function() {
return {
restrict: 'E',templateUrl: '/treeView.html',scope: {//隔离作用域
treeData: '=',canChecked: '=',//隔离scope和父scope的双向绑定
textField: '@',//单向 父scope属性值改变时，directive的scope值也会跟这改变，但是相反就不行
itemClicked: '&',itemCheckedChanged: '&',//当 directive 中有动作需要更新到父 scope 中的时候，可以在父 scope 上下文中执行一段代码或者一个函数.
itemTemplateUrl: '@'
},controller: ['$scope',function($scope) {
$scope.itemExpended = function(item,$event) {
item.$$isExpend = !item.$$isExpend;
$event.stopPropagation();
};
$scope.getItemIcon = function(item) {
var isLeaf = $scope.isLeaf(item);
// if (isLeaf) {
// return 'fa fa-leaf';
// }
return item.$$isExpend ? 'fa fa-minus' : 'fa fa-plus';
};
$scope.isLeaf = function(item) {
return !item.children || !item.children.length;
};
$scope.warpCallback = function(callback,item,$event) {
($scope[callback] || angular.noop)({
$item: item,$event: $event
});
};
}]
};
}]);
</script>
</head>
<body>
<div ng-controller="DemoController as demo" class="container">
<div class="row">
<h2>Tree view</h2>
<tree-view tree-data="demo.tree" text-field="name" value-field='id' item-clicked="demo.itemClicked($item)" item-checked-changed="demo.itemCheckedChanged($item)" can-checked="false"></tree-view>
</div>
<div class="row">
<h2>Item selected</h2>
<pre>{{demo.selectedItem | json}}</pre>
</div>
<script type="text/ng-template" id="/treeView.html">
<ul class="tree-view">
<li ng-repeat="item in treeData" ng-include="itemTemplateUrl || '/treeItem.html'"></li>
</ul>
</script>
<script type="text/ng-template" id="/treeItem.html">
<i ng-click="itemExpended(item,$event);" class="{{getItemIcon(item)}}">click</i>
<input type="checkBox" ng-model="item.$$isChecked" class="check-Box" ng-if="canChecked" ng-change="warpCallback('itemCheckedChanged',$event)">
<span class='text-field' ng-click="warpCallback('itemClicked',$event);">{{item[textField]}}</span>
<ul ng-if="!isLeaf(item)" ng-show="item.$$isExpend">
<li ng-repeat="item in item.children" ng-include="itemTemplateUrl || '/treeItem.html'">
</li>
</ul>
</script>
</div>
</body>
</html>