tree實現

時間 2019-12-11

標籤 tree 實現简体版

原文原文鏈接

(function($) {javascript

$.fn.createTree = function(options) {
var defaluts = {
"nodes": ""
}; {
for(var i = 0, length = options.nodes.length; i < length; i++) {
options.nodes[i].number = i;
options.nodes[i].open = !options.nodes[i].open
}
}
var ops = $.extend(defaluts, options);
var tools = {
"getParent": function(id, array) { //獲得有相同的pid的id
var arr = [];
for(var key in array) {
if(array[key].pid == id) {
arr.push(array[key])
}
}
return arr;
},
getData: function() { //用一個閉包保存str相同的拼接的的字符串
var str = "";
return function(id, array, open) {
var arr = tools.getParent(id, array); //獲得當前節點
if(arr.length > 0) {
if(open) {
str += '<ul style="display:none;">'
} else {
str += '<ul>'
}
for(var key in arr) {
if(tools.getParent(arr[key].id, array, arr[key]).length > 0) {
str += '<li>' + '<span class="cir" number="' + arr[key].number + '">' + arr[key].name + '</span>';
ops.nodes[arr[key].number].isParent=true;//判斷是不是有子節點
} else {
str += '<li>' + '<span class="cir1" number="' + arr[key].number + '">' + arr[key].name + '</span>';
ops.nodes[arr[key].number].isParent=false;//判斷是否有子節點
}
arguments.callee(arr[key].id, array, arr[key].open); //用遞歸調用
str += '</li>'
}
str += '</ul>'
}
return str;
}
},
getArrayId: function(menuArry) { //這個方法用來求出單一的id
var jsonId = {};
var jsonPid = {}
for(var i = 0; i < menuArry.length; i++) {
jsonId[menuArry[i].id] = menuArry[i];
jsonPid[menuArry[i].pid] = menuArry[i];
}
var temp = []
for(var key in jsonPid) {css

if(!jsonId[key]) {
temp.push({
key: key,
node: jsonPid[key]
});
}
}
return temp;
}html

};java

<!DOCTYPE h<html xmlns="http://www.w3.org/1999/xhtml">jquery

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
padding-left: 20px;
}
li{
list-style: none;
}
.cir{
display: block;
position: relative;
text-indent: 2em;

}
.cir:before{
display: block;
content: "";
position: absolute;
width: 20px;
height: 20px;
left: 0;
top: 0;
background: gray;
border-radius: 50%;
}
.cir1{
text-indent: 2em;
display: block;
position: relative;
}
.cir1:after{
position: absolute;
content: "";
display: block;
left: 0;
top: 0;
width: 20px;
height: 20px;
background: green;
border-radius: 50%;
}
ul li span{
cursor: pointer;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/tree.js" ></script>
</head>
<body>
<div id="bb">

</div>
<div id="cc"></div>
<script type="text/javascript">

//菜單列表html
var menuArry = [
{ id: 1, name: "辦公管理", pid: 0 ,open:false},
{ id: 7, name: "用戶角色", pid: 6 },
{ id: 8, name: "菜單設置1", pid: 6,open:false},
{ id: 81, name: "菜單設置2", pid: 1,open:false},
{ id: 82, name: "菜單設置3", pid: 81 },
{ id: 83, name: "菜單設置4", pid: 82},
{ id: 84, name: "菜單設置5", pid: 83},
{ id: 85, name: "菜單設置6", pid: 81},
{ id: 85, name: "菜單設置7", pid: 810},
{ id: 2, name: "請假申請", pid: 1 ,open:true},
{ id: 3, name: "出差申請", pid: 1 ,open:true},
{ id: 4, name: "請假記錄", pid: 2 ,open:true},
{ id: 5, name: "系統設置", pid: 0 ,open:false},
{ id: 6, name: "權限管理", pid: 5,open:false},
{ id: 111, name: "哈哈", pid: 105,open:true}
];
$(".cir").click(function() {
$(this).siblings().slideToggle('fast')
});
$(".cir1").click(function() {
var m = $(this).attr('bb');
console.log(eval(m))
// console.log(JSON.parse(m))
})
$("#bb").createTree({
'nodes':menuArry,
"onClick":function(treeNode){
if(treeNode.isParent){
alert('父節點')
}
}
})
</script>
</body>
</html>json

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。