<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.list {
margin: 0;
padding-left: 20px;
}
.list li {
list-style: none;
}
.hide {
display: none;
}
.control ~ .control-label {
display: inline-block;
width: 0;
height: 0;
border: 6px solid transparent;
border-left-color: #000;
}
.control:checked ~ .control-label {
border-left-color: transparent;
border-top-color: #000;
}
.control ~ .list {
display: none;
}
.control:checked ~ .list {
display: block;
}
.control-label::after {
content: attr(data-title);
display: block;
margin-top: -6px;
margin-left: 0.5em;
width: 10em;
font-size: 12px;
line-height: 12px;
}
</style>
<head>
<body>
<script>
function createItem(data) {
var id = (Math.random()).toString(16).slice(2);
var div = document.createElement('div');
div.className = 'content';
var input = document.createElement('input');
input.type = 'checkbox';
input.className = 'hide control';
input.id = 'control-' + id;
var label = document.createElement('label');
label.className = 'control-label';
label.setAttribute('for','control-' + id);
label.dataset.title = '[' + data.Code + ']' + data.Name;
div.appendChild(input);
div.appendChild(label);
return div;
}
function createTree(data) {
var ul = document.createElement('ul');
ul.className = 'list';
for(var i = 0,len = data.length; i < len; i++) {
var li = document.createElement('li');
var div = createItem(data[i]);
li.appendChild(div);
if(data[i].children && data[i].children.length > 0) {
div.appendChild(createTree(data[i].children));
}
ul.appendChild(li);
}
return ul;
}
var elems = createTree(data);
document.body.appendChild(elems);
</script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
