您的位置：首页 > Web前端 > JavaScript

CSS+HTML+JS实现的的一个树

2017-03-16 00:00 501 查看

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: silver;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=20);
}

.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 40%;
height: 50%;
padding: 16px;
border: 3px solid slategray;
background-color: white;
z-index: 1002;
overflow: auto;
}
</style>
<script src="../jquery.js"></script>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="js/tree_themes/SimpleTree.css"/>
<script type="text/javascript" src="js/SimpleTree.js"></script>

</head>
<body>
<p>可以根据自己要求修改css样式<a href="javascript:void(0)"
onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a>
</p>
<div id="light" class="white_content">

<a href="javascript:void(0)" style="float:right ; text-decoration:none; "
onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
取消</a></div>
<div id="fade" class="black_overlay">
</div>
</body>
<script>
var jsons = [{
"typeName": "员工服务中心",
"id": "4AC1C287EBA90038E0530A6F0ACB0038",
"title": "111",
"driveRoute": "111"
}, {
"typeName": "员工服务中心",
"id": "4AC1C287EBAA0038E0530A6F0ACB0038",
"title": "333",
"driveRoute": "33"
}, {
"typeName": "员工服务中心",
"id": "4AC1C287EBAB0038E0530A6F0ACB0038",
"title": "222",
"driveRoute": "11"
}, {
"typeName": "员工服务中心",
"id": "4AC1C287EBAC0038E0530A6F0ACB0038",
"title": "222",
"driveRoute": "222"
}, {
"typeName": "员工服务中心",
"id": "4AC1C287EBAD0038E0530A6F0ACB0038",
"title": "111",
"driveRoute": "11111111111"
}, {
"typeName": "员工服务中心",
"id": "4AC1C287EBAE0038E0530A6F0ACB0038",
"title": "333",
"driveRoute": "222222222"
}, {
"typeName": "员工服务中心",
"id": "4AC1C287EBAF0038E0530A6F0ACB0038",
"title": "111",
"driveRoute": "1111111111"
}];
console.log(jsons);
var root = {};
function createNoneLeafNode() {
for (var i = 0; i < jsons.length; i++) {
var json = jsons[i];

function createSecondGrade(json) {
if (!root.hasOwnProperty(json.typeName)) {
root[json.typeName] = {name: json.typeName};
}
}

createSecondGrade(json);
function createThirdGrade(json) {
if (!root[json.typeName].hasOwnProperty(json.title)) {
root[json.typeName][json.title] = {name: json.title}
}
}

createThirdGrade(json);
}
}
createNoneLeafNode();

function insertLeafNodeToTree() {
function insertLeafNode(json) {
root[json.typeName][json.title][json.driveRoute] = {id: json.id, name: json.driveRoute}
}

for (var i = 0; i < jsons.length; i++) {
var json = jsons[i];
insertLeafNode(json);
}
}
insertLeafNodeToTree();
console.log(root);
function layout(root) {
var contentDIV = $('<br/><br/><div class="st_tree"></div>');
$('#light').append(contentDIV);
var rootOl = $('<ul></ul>');

7fe0
contentDIV.append(rootOl);

function showForthGrid(Li, thirdRoot) {
for (var pro in thirdRoot) {
if (thirdRoot.hasOwnProperty(pro)) {
if (pro != 'name') {
var id = thirdRoot[pro].id;
console.log(thirdRoot[pro].id);
var tempLi = $('<li><a href="#"  class="leafNode_a" ref="' + id + '" >' + pro + '</a></li>');
Li.append(tempLi);
}
}
}
}

function showThirdGrid(secondGridLi, secondRoot) {
for (var pro in secondRoot) {
if (secondRoot.hasOwnProperty(pro)) {
if (pro != 'name') {
var tempLi = $('<li><a href="#" ref="">' + pro + '</a></li>');
secondGridLi.append(tempLi);
var tempUl = $('<ul></ul>');
secondGridLi.append(tempUl);
showForthGrid(tempUl, secondRoot[pro]);
}
}
}
}

function showSecondGrid() {
for (var property in root) {
if (root.hasOwnProperty(property)) {
var secondGridLi = $('<li><a href="#" >' + property + '</a></li>');
rootOl.append(secondGridLi);
var secondGridUl = $('<ul></ul>');
rootOl.append(secondGridUl);
showThirdGrid(secondGridUl, root[property]);
}
}
}

showSecondGrid();
}
layout(root);
$(function () {
$(".st_tree").SimpleTree({
click: function (a) {
if (!$(a).attr("hasChild"))
alert($(a).attr("ref"));
}
});
});
function eventBinding() {
$('.leafNode_a').click(function () {
console.log($(this).attr("ref"));
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none'
console.log($(this).text());
})
}
eventBinding();

</script>
</html>

CSS

@charset "utf-8";

.st_tree {
padding: 10px;
font-size: 30px;
}

.st_tree a {
color: #222;
text-decoration: none;
font-size: 22px;
}

.st_tree a:hover {
color: #f33;
text-decoration: underline;
}

.st_tree ul {
padding: 0 0 0 18px;
margin: 0;
}

.st_tree ul li {
font-size: 13px;
color: #222;
line-height: 18px;
cursor: pointer;
list-style: none;
background-repeat: no-repeat;
padding: 0 0 3px 20px;
}

.st_tree ul li ul {
}

.st_tree ul li ul li {
}

.st_tree .folder {
list-style-image: url(imgs/st_icon.png);
background-repeat: no-repeat;
padding: 0 0 0 20px;
}

.st_tree .open {
list-style-image: url(imgs/st_icon_open.png);
background-repeat: no-repeat;
padding: 0 0 0 20px;
}

.st_tree .hover {
background-color: #ffa;
}

$(function () {
$.fn.extend({
SimpleTree: function (options) {
var option = $.extend({
click: function (a) {
}
}, options);
option.tree = this;
option._init = function () {
this.tree.find("ul ul").hide();
this.tree.find("ul ul").prev("li").removeClass("open");
this.tree.find("ul ul[show='true']").show();
this.tree.find("ul ul[show='true']").prev("li").addClass("open");
};
this.find("a").click(function () {
$(this).parents("li").click();
return false;
});
this.find("li").click(function () {
var a = $(this).find("a")[0];
if (typeof(a) != "undefined")
option.click(a);
if ($(this).next("ul").attr("show") == "true") {
$(this).next("ul").attr("show", "false");
} else {
$(this).next("ul").attr("show", "true");
}
option._init();
});

this.find("li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
this.find("ul").prev("li").addClass("folder");
this.find("li").find("a").attr("hasChild", false);
this.find("ul").prev("li").find("a").attr("hasChild", true);
option._init();
}
});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航