html css实现树,CSS+HTML+JS实现的的一个树

.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;

}

Title

可以根据自己要求修改css样式

οnclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口

οnclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">

取消

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 = $('

$('#light').append(contentDIV);

var rootOl = $('

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 = $('

' + pro + '');

Li.append(tempLi);

}

}

}

}

function showThirdGrid(secondGridLi, secondRoot) {

for (var pro in secondRoot) {

if (secondRoot.hasOwnProperty(pro)) {

if (pro != 'name') {

var tempLi = $('

' + pro + '');

secondGridLi.append(tempLi);

var tempUl = $('

secondGridLi.append(tempUl);

showForthGrid(tempUl, secondRoot[pro]);

}

}

}

}

function showSecondGrid() {

for (var property in root) {

if (root.hasOwnProperty(property)) {

var secondGridLi = $('

' + property + '');

rootOl.append(secondGridLi);

var secondGridUl = $('

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();

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;

}

js

$(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();

}

});

});