用html+css+js实现一个无限级树形控件
http://t.zoukankan.com/rxbook-p-10975673.html
gg.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
| <!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>树形菜单示例</title>
<style type="text/css">
ul>li {
list-style: none;
}
/* 可展开*/
.switch-open {
margin-left:-12px;
border:6px solid transparent;
display:inline-block;
height:0px;
border-top-color: black;
}
/* 展开完毕*/
.switch-close {
margin-left:-12px;
border:6px solid transparent;
display:inline-block;
height:0px;
border-left-color: black;
margin-bottom: 2px;
}
/* 改变CheckBox样式*/
input[type='checkbox'] {
height: 20px;
-webkit-appearance:none;
-moz-appearance: none;
border: 1px solid #c9c9c9;
border-radius: 3px;
outline: none;
color:white;
text-align: center;
}
input[type='checkbox']:before {
content: '√ ';
color:transparent;
}
input[type=checkbox]:checked {
background-color: #30add6;
}
input[type=checkbox]:checked:before {
content: '√';
color:white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="warp">
<ul id="container">
</ul>
</div>
<script type="text/javascript">
//结构
var json = {
'0-0': {
'0-0-0': {},
'0-0-1': {
'0-0-1-0': {},
'0-0-1-1': {},
'0-0-1-2': {}
},
'0-0-2': {}
},
'0-1': {
'0-1-0': {},
'0-1-1': {}
},
'0-2': {}
};
//这里生成DOM
function generate(json, par)
{
for (var attr in json) {
var ele = document.createElement('li');
if (json[attr].length > 0) {
ele.innerHTML = ' <input type="checkbox"></input>'+attr;
} else {
ele.innerHTML = '<span><span class="switch-open" onclick="toggle(this)"></span><input type="checkbox" onclick="checkChange(this)"></input>'+attr+'</span>';
var nextpar = document.createElement('ul');
ele.appendChild(nextpar);
generate(json[attr], nextpar);
}
par.appendChild(ele);
}
}
generate(json, document.getElementById('container'));
//处理展开和收起
function toggle(eve)
{
var par = eve.parentNode.nextElementSibling;
if (par.style.display == 'none') {
par.style.display = 'block';
eve.className = 'switch-open';
} else {
par.style.display = 'none';
eve.className = 'switch-close';
}
}
//处理全部勾选和全部不选
function checkChange(eve)
{
var oul = eve.parentNode.nextElementSibling;
if (eve.checked) {
for (var i = 0; i < oul.querySelectorAll('input').length; i++) {
oul.querySelectorAll('input')[i].checked = true;
}
} else {
for (var i = 0; i < oul.querySelectorAll('input').length; i++) {
oul.querySelectorAll('input')[i].checked = false;
}
}
}
</script>
</body>
</html>
|
