<!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": "东南",
"level": "1",
"parentcode": "00",
"parentname": "总部"
}, {
"code": "4",
"name": "123",
"level": "1",
"parentcode": "00",
"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', item, $event)">
<span class='text-field' ng-click="warpCallback('itemClicked', item, $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>
