Skip to content

Commit f372946

Browse files
feibirdfeibird
committed
完成了全选,展开收起,添加节点,删除(有部分bug)
1 parent 5f03136 commit f372946

File tree

4 files changed

+163
-46
lines changed

4 files changed

+163
-46
lines changed

‎css/index.css‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
*{padding: 0;margin: 0;border: 0;list-style-type:none !important;}
2-
.tree{border:1px solid #ccc;width: 400px;min-height: 400px;padding: 20px;box-sizing: border-box;}
2+
.tree{border:1px solid #ccc;width: 500px;min-height: 400px;padding: 20px;box-sizing: border-box;margin: 0 auto;}
33
.tree .tree_ul li{position: relative;margin: 5px 0;}
4+
.tree .tree_ul .checkbox{margin: 0;display: inline-block;}
45
.tree .tree_ul li ul{padding-left: 20px;margin: 5px 0;}
5-
.fa{cursor: pointer;margin-right: 3px;margin-top: -1px;}
6+
.fa{cursor: pointer;margin-right: 3px;margin-top: -1px;width: 11px;}
7+
.group{width: 100%;position: relative;}
68
.tree_btngroup{position: absolute;top: 0;right: 0;}
7-
.tree_group{display: inline-block;}
8-
.tree_group .checkbox{display: inline-block;margin-right: 5px;}
9-
.fun_group{display: inline-block;}
9+
.tree_group{height: 27px;}
10+
.tree_group .checkbox{display: inline-block;margin-right: 5px;margin-top: 3px;margin-bottom: 0;}
11+
.fun_group{display: inline-block;position: absolute;right: 0px;top:0;}
1012
.tree_btn{display: inline-block;height: 26px;line-height: 26px;border-radius: 4px;border:1px solid #ccc;padding: 0 5px;}
1113
.tree_btn:hover{text-decoration:none;background-color: #e6e6e6; border-color: #adadad;color: #333;}
1214
.tree_input{border: 1px solid #66afe9;padding: 2px 5px;outline: none;border-radius: 4px;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);}
13-
.tree input[type=text]{height: 26px;}
15+
.tree input[type=text]{height: 26px;}
16+
.addDiv{position: relative;margin: 5px 0;}

‎template/tree.dirctive.js‎

Lines changed: 104 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,126 @@
1-
app.directive('tree',function($http){
1+
app.directive('tree', function ($http) {
22
return {
3-
restrict:'E',
4-
replace:true,
5-
scope:{
6-
param:"="
3+
restrict: 'E',
4+
replace: true,
5+
scope: {
6+
param: "="
77
},
8-
templateUrl:"template/tree.html",
9-
link:function(scope,elem,attr){
10-
$http.get('./tree.json').then(function(res){
8+
templateUrl: "template/tree.html",
9+
link: function (scope, elem, attr) {
10+
$http.get('./tree1.json').then(function (res) {
1111
scope.list = rendar(res.data);
1212
console.log(scope.list)
1313
})
14-
15-
scope.tree_edit = function(data){
16-
data.isEdit=!data.isEdit;
17-
if(!data.isEdit){
14+
//编辑修改操作
15+
scope.tree_edit = function (data) {
16+
data.isEdit = !data.isEdit;
17+
if (!data.isEdit) {
1818
//这里进行修改操作。
1919
}
2020
}
21-
scope.addchildren = function(data,name){
22-
var obj = new Object();
23-
obj.name=name;
24-
obj.id=1;
25-
obj.children=[]
26-
obj.status=false;
27-
data.children.push(obj)
28-
data.add=false;
21+
//删除操作
22+
scope.del = function (id) {
23+
console.log(id)
24+
eachDel(scope.list, id);
2925
}
3026

31-
function rendar(data){
32-
data.forEach(function(i){
33-
i.isEdit=false;
34-
if(i.children && i.children.length>0){
35-
i.status = false;
36-
rendar(i.children);
27+
//展开,收起
28+
scope.Allstatus = function(is){
29+
All(scope.list,is,'status')
30+
}
31+
32+
//全选操作
33+
scope.All = function (is) {
34+
if (is) {
35+
All(scope.list,true,'ischeckbox');
36+
} else {
37+
All(scope.list,false,'ischeckbox');
38+
}
39+
}
40+
41+
function All(data,is,prs){
42+
data.forEach(function(e){
43+
e[prs]=is;
44+
if(e.children){
45+
All(e.children,is)
3746
}
3847
})
39-
return data;
4048
}
41-
42-
function init(res){
43-
if(res){
4449

45-
}else{
46-
res.isAllshow=true; //是否全部展开
50+
function eachis(data, param) {
51+
var prs = param;
52+
for (var i = 0; i < data.length; i++) {
53+
// if(data[i][prs])
4754
}
4855
}
4956

57+
function eachDel(data, delId) {
58+
for (var i = 0; i < data.length; i++) {
59+
if (data[i].id == delId) {
60+
if (data[i].children.length > 0) {
61+
if (window.confirm('检测到当前类别下有子级,确定要删除吗？(删除后，当前所以子级消失)')) {
62+
data.splice(i, 1);
63+
alert("删除成功！");
64+
return false;
65+
}
66+
} else {
67+
data.splice(i, 1);
68+
alert("删除成功！");
69+
return false;
70+
}
71+
} else {
72+
if (data[i].children.length > 0) {
73+
eachDel(data[i].children, delId);
74+
}
75+
}
76+
}
77+
return data
78+
}
5079

80+
//添加子类操作
81+
scope.addchildren = function (data,name) {
82+
console.log(data);
83+
if (data == 0) {
84+
if (name.length > 0) {
85+
var obj = new Object();
86+
obj.name = name;
87+
obj.id = 1;
88+
obj.children = []
89+
scope.list.push(obj)
90+
scope.newTop="";
91+
} else {
92+
return false;
93+
}
94+
} else {
95+
if (name.length > 0) {
96+
var obj = new Object();
97+
obj.name = name;
98+
obj.id = 1;
99+
obj.children = []
100+
data.children.push(obj)
101+
data.add = false;
102+
} else {
103+
return false;
104+
}
105+
}
51106

107+
}
108+
/**
109+
* 递归，将每条数据附上状态
110+
* status:用来管理展开收缩
111+
* isEdit:用来管理是否编辑
112+
*/
113+
function rendar(data) {
114+
data.forEach(function (i) {
115+
i.isEdit = false;
116+
i.ischeckbox = false;
117+
if (i.children && i.children.length > 0) {
118+
i.status = false;
119+
rendar(i.children);
120+
}
121+
})
122+
return data;
123+
}
52124
}
53125
}
54126
})

‎template/tree.html‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,36 @@
11
<div class="tree">
2-
<div class="tree_group">
3-
<div class="checkbox"><label><input type="checkbox">全选</label></div>
2+
<div class="group">
3+
<div class="tree_group">
4+
<div class="checkbox"><label><input type="checkbox" ng-model="is" ng-change="All(is)">全选</label></div>
5+
<a href="javascript:;" class="tree_btn" ng-click="Allstatus(true)">展开</a>
6+
<a href="javascript:;" class="tree_btn" ng-click="Allstatus(false)">收起</a>
7+
<a href="javascript:;" class="tree_btn" ng-click="addTop=true;">添加顶级节点</a>
8+
</div>
9+
<div class="fun_group" ng-show="is">
10+
操作:
11+
<a href="javascript:;" class="tree_btn">删除</a>
12+
<a href="javascript:;" class="tree_btn">编辑</a>
13+
<a href="javascript:;" class="tree_btn">添加子级</a>
14+
</div>
415
</div>
5-
<div class="fun_group">
6-
<a href="javascript:;" class="tree_btn">删除</a>
16+
<div ng-show="addTop" class="addDiv">
17+
<i class="fa fa-file-text"></i>
18+
<input type="text" class="tree_input" ng-model='newTop' placeholder="请输入节点名称" >
19+
<div class="btn-group tree_btngroup">
20+
<a href="javascript:;" class="tree_btn" ng-click="addchildren(0,newTop)">添加</a>
21+
<a href="javascript:;" class="tree_btn" ng-click="addTop=false;">取消</a>
22+
</div>
723
</div>
824
<ul class="tree_ul">
925
<li ng-repeat="item in list">
26+
<div class="checkbox"><label><input type="checkbox" ng-model="item.ischeckbox">{{($index+1)>9?($index+1):"0"+($index+1)}}</label></div>
1027
<i class="fa" ng-class="{false:'fa-plus',true:'fa-minus'}[item.status]" ng-click="item.status=!item.status"></i>
1128
<input type="text" value="{{item.name}}" ng-class="{true:'tree_input',false:''}[item.isEdit]" ng-disabled="!item.isEdit">
1229
<ul ng-show="item.status" ng-include="'tree_template'" ng-init="children = item.children"></ul>
1330
<div class="btn-group tree_btngroup">
1431
<a href="javascript:;" class="tree_btn" ng-click="tree_edit(item)">{{item.isEdit==true ? '保存':'修改'}}</a>
32+
<a href="javascript:;" class="tree_btn" ng-click="del(item.id)">删除</a>
1533
<a href="javascript:;" class="tree_btn" ng-click="item.add=true;item.status=true">添加子类</a>
16-
<a href="javascript:;" class="tree_btn" ng-click="del(item)">删除</a>
1734
</div>
1835
</li>
1936
</ul>
@@ -23,16 +40,18 @@
2340
<input type="text" class="tree_input" ng-model='newChildren' placeholder="请输入你要增加子类名称" >
2441
<div class="btn-group tree_btngroup">
2542
<a href="javascript:;" class="tree_btn" ng-click="addchildren(item,newChildren)">添加</a>
26-
<a href="javascript:;" class="tree_btn" ng-click="">取消</a>
43+
<a href="javascript:;" class="tree_btn" ng-click="item.add=false;">取消</a>
2744
</div>
2845
</li>
2946
<li ng-repeat="item in children">
47+
<div class="checkbox"><label><input type="checkbox" ng-model='item.ischeckbox'>{{($index+1)>9?($index+1):"0"+($index+1)}}</label></div>
3048
<i class="fa" ng-class="{false:'fa-plus',true:'fa-minus'}[item.status]" ng-click="item.status=!item.status"></i>
3149
<input type="text" value="{{item.name}}" ng-class="{true:'tree_input',false:''}[item.isEdit]" ng-disabled="!item.isEdit">
32-
<ul ng-if="item.children.length>0 && item.status" ng-include="'tree_template'" ng-init="children = item.children"></ul>
50+
<ul ng-if="item.status" ng-include="'tree_template'" ng-init="children = item.children"></ul>
3351
<div class="btn-group tree_btngroup">
3452
<a href="javascript:;" class="tree_btn" ng-click="tree_edit(item)">{{item.isEdit==true ? '保存':'修改'}}</a>
35-
<a href="javascript:;" class="tree_btn">删除</a>
53+
<a href="javascript:;" class="tree_btn" ng-click="del(item.id)">删除</a>
54+
<a href="javascript:;" class="tree_btn" ng-init="item=item;item.add=true;" ng-click='item.status=true' >添加子类</a>
3655
</div>
3756
</li>
3857
</script>

‎tree1.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
[
2+
{"name":"虹桥一组","id":1,"children":[
3+
{"name":"虹桥一队1","id":10,"children":[]},
4+
{"name":"虹桥一队2","id":11,"children":[]},
5+
{"name":"虹桥一队3","id":12,"children":[]},
6+
{"name":"虹桥一队4","id":13,"children":[]},
7+
{"name":"虹桥一队5","id":14,"children":[]}
8+
]},
9+
{"name":"虹桥二组","id":2,"children":[
10+
{"name":"虹桥二队1","id":20,"children":[]},
11+
{"name":"虹桥二队2","id":21,"children":[]},
12+
{"name":"虹桥二队3","id":22,"children":[]},
13+
{"name":"虹桥二队4","id":23,"children":[]},
14+
{"name":"虹桥二队5","id":34,"children":[]}
15+
]},
16+
{"name":"虹桥三组","id":3,"children":[
17+
{"name":"虹桥三队1","id":30,"children":[]},
18+
{"name":"虹桥三队2","id":31,"children":[]},
19+
{"name":"虹桥三队3","id":32,"children":[]},
20+
{"name":"虹桥三队4","id":43,"children":[]},
21+
{"name":"虹桥三队5","id":54,"children":[]}
22+
]}
23+
]

0 commit comments

Comments
 (0)