支援兩種資料結構的極簡單的檔案樹
阿新 • • 發佈：2018-11-28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul, li {
list-style: none;
}
ul {
padding-left: 20px;
}
.close {
display: inline-block;
width: 15px;
height: 15px;
background: url("close.png") no-repeat center;
background-size: contain;
}
.open {
display: inline-block;
width: 15px;
height: 15px;
background: url("open.png") no-repeat center;
background-size: contain;
}
.leaf {
display: inline-block;
width: 15px;
height: 15px;
background: url("leaf.png") no-repeat center;
background-size: contain;
}
.leafName {
color: green;
padding-left: 10px;
padding-right: 10px;
}
.openTrue {
color: gray;
}
</style>
</head>
<body>
<div id="tree"></div>
<script type="text/javascript" src="../../../static/plugins/jquery/jquery-1.9.1.js"></script>
<script>
var arr = [
{
name: "父節點1 - 展開", open: true,
children: [
{
name: "父節點11 - 摺疊",
children: [
{name: "葉子節點111", nid: "nid"},
{name: "葉子節點112",},
{name: "葉子節點113"},
{name: "葉子節點114"}
]
},
{
name: "父節點12 - 摺疊",
children: [
{name: "葉子節點121"},
{name: "葉子節點122"},
{name: "葉子節點123"},
{name: "葉子節點124"}
]
},
{name: "父節點13 - 沒有子節點", isParent: true}
]
},
{
name: "父節點2 - 摺疊",
children: [
{
name: "父節點21 - 展開",
children: [
{name: "葉子節點211"},
{name: "葉子節點212"},
{name: "葉子節點213"},
{name: "葉子節點214"}
]
},
{
name: "父節點22 - 摺疊",
children: [
{name: "葉子節點221"},
{name: "葉子節點222"},
{name: "葉子節點223"},
{name: "葉子節點224"}
]
},
{
name: "父節點23 - 摺疊",
children: [
{
name: "葉子節點231", children: [
{
name: "葉子節點231", children: [
{name: "葉子節點231"},
{name: "葉子節點232"},
{name: "葉子節點233"},
{
name: "葉子節點234", children: [
{name: "葉子節點231"},
{name: "葉子節點232"},
{name: "葉子節點233"},
{
name: "葉子節點234", children: [
{name: "葉子節點231"},
{name: "葉子節點232"},
{name: "葉子節點233"},
{
name: "葉子節點234", children: [
{name: "葉子節點231"},
{name: "葉子節點232"},
{name: "葉子節點233"},
{name: "葉子節點234"}
]
}
]
}
]
}
]
},
{name: "葉子節點232"},
{name: "葉子節點233"},
{name: "葉子節點234"}
]
},
{name: "葉子節點232"},
{name: "葉子節點233"},
{name: "葉子節點234"}
]
}
]
},
{name: "父節點3 - 沒有子節點", isParent: true}
];
var arr1 = [
{id: 1, pId: 0, name: "父節點1 - 展開", open: true},
{id: 11, pId: 1, name: "父節點11 - 摺疊"},
{id: 111, pId: 11, name: "葉子節點111"},
{id: 112, pId: 11, name: "葉子節點112"},
{id: 113, pId: 11, name: "葉子節點113"},
{id: 114, pId: 11, name: "葉子節點114"},
{id: 12, pId: 1, name: "父節點12 - 摺疊"},
{id: 121, pId: 12, name: "葉子節點121"},
{id: 122, pId: 12, name: "葉子節點122"},
{id: 123, pId: 12, name: "葉子節點123"},
{id: 124, pId: 12, name: "葉子節點124"},
{id: 13, pId: 1, name: "父節點13 - 沒有子節點", isParent: true},
{id: 2, pId: 0, name: "父節點2 - 摺疊"},
{id: 21, pId: 2, name: "父節點21 - 展開", open: true},
{id: 211, pId: 21, name: "葉子節點211"},
{id: 212, pId: 21, name: "葉子節點212"},
{id: 213, pId: 21, name: "葉子節點213"},
{id: 214, pId: 21, name: "葉子節點214"},
{id: 22, pId: 2, name: "父節點22 - 摺疊"},
{id: 221, pId: 22, name: "葉子節點221"},
{id: 222, pId: 22, name: "葉子節點222"},
{id: 223, pId: 22, name: "葉子節點223"},
{id: 224, pId: 22, name: "葉子節點224"},
{id: 23, pId: 2, name: "父節點23 - 摺疊"},
{id: 231, pId: 23, name: "葉子節點231"},
{id: 232, pId: 23, name: "葉子節點232"},
{id: 233, pId: 23, name: "葉子節點233"},
{id: 234, pId: 23, name: "葉子節點234"},
{id: 3, pId: 0, name: "父節點3 - 沒有子節點", isParent: true}
];
paintingTree(arr, "tree")
function paintingTree(arr, id) {
if(arr[0]["pId"]!==undefined){
arr=removeEmptyFromPaintData(arr)
}
var str = ""
//渲染樹
function createTree(arr) {
if (arr) {
var children = arr;
str += "<ul>";
for (var j = 0; j < children.length; j++) {
str += "<li>"
if (children[j]["children"]) {
if (children[j]["open"]) {
str += "<div open='true'><span class='close'></span><span class='openTrue'>" + children[j]["name"] + "</span></div>";
} else {
str += "<div open='false'><span class='open'></span><span class='openTrue'>" + children[j]["name"] + "</span></div>";
}
} else {
if(children[j]["isParent"]){
str += "<div open='true'><span class='open'></span>" + children[j]["name"] + "</div>";
}else{
str += "<div><span class='leaf'></span><span class='leafName'></span>" + children[j]["name"] + "</div>";
}
}
createTree(children[j]["children"])
str += "</li>"
}
str += "</ul>";
}
}
createTree(arr)
$("#"+id).hide()
$("#"+id).html(str)
$("[open=true]").each(function () {
$(this).next().show()
})
$("[open=false]").each(function () {
$(this).next().hide()
})
$(document).on("click", ".close", function () {
$(this).parent().next().hide()
$(this).addClass("open").removeClass("close")
})
$(document).on("click", ".open", function () {
$(this).parent().next().show()
$(this).addClass("close").removeClass("open")
})
$("#"+id).show()
//把簡單的資料轉化成渲染資料
function createPaintDataFromSimpleData(zNodes, Nodes) {
for (var i = 0; i < zNodes.length; i++) {
if (!!zNodes[i]) {
zNodes[i]["children"] = [];
for (var j = 0; j < Nodes.length; j++) {
if (!!Nodes[j]) {
if (Nodes[j]["pId"] == zNodes[i]["id"]) {
if (Nodes[j]) {
zNodes[i]["children"].push(Nodes[j])
Nodes[j] = ""
}
}
}
}
if (zNodes[i]["children"].length == 0) {
zNodes[i]["children"] = false
} else {
createPaintDataFromSimpleData(zNodes[i]["children"], zNodes)
}
}
}
return zNodes
}
//對渲染資料清除空元素
function removeEmptyFromPaintData(nodes) {
var data = createPaintDataFromSimpleData(nodes, nodes);
var arr = [];
for (var i = 0; i < data.length; i++) {
if (!!data[i]) {
arr.push(data[i])
}
}
return arr
}
}
</script>
</body>
</html>