js的树形结构怎么实现
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js的树形结构怎么实现相关的知识，希望对你有一定的参考价值。
这个问题，我建议你去下载下树形菜单。网上已经实现的js很多，下载下来一看就明白了， 参考技术A 我感觉这个还挺好用的，给你吧<html>
<head>
<script type="text/javascript">
var treeDate = new Array();
var selectedUser = "";
//数据类型：0节点ID，1所在层次，2父节点，3是否有子节点，4节点内容ID,5节点显示内容，6类型（1为部门，2为用户组，3为用户）（根节点id为0，层次为0）
treeDate[0] = new Array(1,1,0,1,'dept1','部门1',1);
treeDate[1] = new Array(2,1,0,1,'group1','用户组1',2);
treeDate[2] = new Array(3,1,0,0,'user1','用户1',3);
treeDate[3] = new Array(4,2,1,0,'user2','用户2',3);
treeDate[4] = new Array(5,2,1,1,'dept2','部门2',1);
treeDate[5] = new Array(6,2,1,0,'user3','用户3',3);
treeDate[6] = new Array(7,2,1,0,'user4','用户4',3);
treeDate[7] = new Array(8,2,2,0,'user5','用户5',3);
treeDate[8] = new Array(9,2,2,0,'user6','用户6',3);
treeDate[9] = new Array(10,3,5,0,'user7','用户7',3);
treeDate[10] = new Array(11,3,5,0,'user6','用户6',3);
//取一级节点
function getLv1Nodes()
for(var i=0;i<treeDate.length;i++)
if(treeDate[i][1]==1)
document.write("<tr id ='node"+treeDate[i][0]+"'><td height=20>");
if(treeDate[i][3]==0)
document.write(" <image id ='img"+treeDate[i][0]+"' src='leaf.gif'/>");
else
document.write(" <image id ='img"+treeDate[i][0]+"' src='add.gif' onClick='closeNode("+treeDate[i][0]+")' style='cursor:hand'/>");
document.write(" <input type='checkbox' name='isCheck' id='isCheck"+treeDate[i][0]+"' onclick=\"setChecked("+treeDate[i][0]+")\">");
if(treeDate[i][6]==3)
document.write(treeDate[i][5]);
else
document.write("<b>"+treeDate[i][5]+"</b>");
document.write("<td/><tr/>");
if(treeDate[i][3]==1) getChildNodes(treeDate[i][0]);
checkSelected();
checkParent();
//递归取所有子分支
function getChildNodes(parentNodeId)
for(var i=0;i<treeDate.length;i++)
if(treeDate[i][2]==parentNodeId)
document.write("<tr id ='node"+treeDate[i][0]+"' style='display:none'><td height=20>");
for(var j=0;j<treeDate[i][1]-1;j++)
document.write(" ");
if(treeDate[i][3]==0)
document.write(" <image id ='img"+treeDate[i][0]+"' src='leaf.gif'/>");
else
document.write(" <image id ='img"+treeDate[i][0]+"' src='add.gif' onClick='closeNode("+treeDate[i][0]+")' style='cursor:hand'/>");
document.write(" <input type='checkbox' name='isCheck' id='isCheck"+treeDate[i][0]+"' onclick=\"setChecked("+treeDate[i][0]+")\">");
if(treeDate[i][6]==3)
document.write(treeDate[i][5]);
else
document.write("<b>"+treeDate[i][5]+"</b>");
document.write("<td/><tr/>");
if(treeDate[i][3]==1) getChildNodes(treeDate[i][0]);
//折叠节点分支
function closeNode(nodeId)
var targetImg = document.getElementById("img"+nodeId);
targetImg.outerHTML = "<image id ='img"+nodeId+"' src='add.gif' onClick='openNode("+nodeId+")' style='cursor:hand'/>"
for(var i=0;i<treeDate.length;i++)
if(treeDate[i][2]==nodeId)
var targetNode = document.getElementById("node"+treeDate[i][0]);
targetNode.style.display = "none";
if(treeDate[i][3]==1) closeNode(treeDate[i][0]);
//展开节点分支
function openNode(nodeId)
var targetImg = document.getElementById("img"+nodeId);
targetImg.outerHTML = "<image id ='img"+nodeId+"' src='reduce.gif' onClick='closeNode("+nodeId+")' style='cursor:hand'/>"
for(var i=0;i<treeDate.length;i++)
if(treeDate[i][2]==nodeId)
var targetNode = document.getElementById("node"+treeDate[i][0]);
targetNode.style.display = "";
//if(treeDate[i][3]==1) openNode(treeDate[i][0]);
//选中默认的节点（来自selectedUser）
function checkSelected()
var selectedArray = selectedUser.split("_");
for(var j=0;j<selectedArray.length;j++)
//alert(selectedArray[j]);
for(var i=0;i<treeDate.length;i++)
if(treeDate[i][4]==("user"+selectedArray[j]))
var targetCheck = document.getElementById("isCheck"+treeDate[i][0]);
//alert(targetCheck.outerHTML);
targetCheck.checked=true;
//从树的最底层向上遍历确定底层节点对上层的影响
function checkParent()
var maxLv = 0;
for(var i=0;i<treeDate.length;i++)
if(maxLv<treeDate[i][1]) maxLv=treeDate[i][1];
while(--maxLv>0)
for(var i=0;i<treeDate.length;i++)
if((treeDate[i][6]!=3)&&(treeDate[i][1]==maxLv))
var allChildrenchecked = true;
for(var j=0;j<treeDate.length;j++)
if(treeDate[i][0]==treeDate[j][2])
var targetChild = document.getElementById("isCheck"+treeDate[j][0]);
if(targetChild.checked==false) allChildrenchecked=false;
//alert("父："+treeDate[i][5]+",子："+treeDate[j][5]+","+targetChild.checked);
var targetParent = document.getElementById("isCheck"+treeDate[i][0]);
targetParent.checked=allChildrenchecked;
//根据所选节点的状态影响所有下级分支状态
function checkChild(parentId)
var targetParent = document.getElementById("isCheck"+parentId);
for(var i=0;i<treeDate.length;i++)
if(parentId==treeDate[i][2])
var targetChild = document.getElementById("isCheck"+treeDate[i][0]);
targetChild.checked=targetParent.checked;
if(treeDate[i][3]==1) checkChild(treeDate[i][0]);
//根据树的当前状态确定右侧列表的选项
function insertUser()
var checkedUser = document.getElementById("checkedUser");
checkedUser.length=0;
for(i=0;i<treeDate.length;i++)
if(treeDate[i][6]==3)
//alert(treeDate[i][5]);
var targetNode = document.getElementById("isCheck"+treeDate[i][0]);
if(targetNode.checked)
//alert(treeDate[i][5]);
needAdd = true;
for(var j=0;j<checkedUser.length;j++)
if(checkedUser.options[j].value==treeDate[i][4]) needAdd=false;
if(needAdd) checkedUser.options[checkedUser.length] = new Option(treeDate[i][5],treeDate[i][4]);
//从列表中去除所选用户，并同时将左侧树的相应节点取消选中
function removeUser()
var checkedUser = document.getElementById("checkedUser");
if(checkedUser.selectedIndex==-1)
alert("请选择要移除的用户！");
else
if(confirm("确认要删除选定的用户？"))
for (i=0;i<checkedUser.options.length;i++)
var current = checkedUser.options[i];
if(current.selected)
for(j=0;j<treeDate.length;j++)
if(treeDate[j][4]==current.value)
//alert(treeDate[j][5]);
var targetNode = document.getElementById("isCheck"+treeDate[j][0]);
targetNode.checked=false;
checkChild(treeDate[j][0]);
checkParent();
insertUser();
//点选复选框时触发的方法
function setChecked(targetId)
checkChild(targetId);
checkParent();
insertUser();
//取得当前的选中用户，返回给调用此页面的上级页面
function getSelectedUsers()
var checkedUser = document.getElementById("checkedUser");
var resultStr = "";
for (i=0;i<checkedUser.options.length;i++)
if(i==0)
resultStr = resultStr + checkedUser.options[i].value.substring(4,checkedUser.options[i].value.length);
else
resultStr = resultStr + "_" + checkedUser.options[i].value.substring(4,checkedUser.options[i].value.length);
return resultStr;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>权限分配</title>
</head>
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0">
<table width="600" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse; border-color:#333333">
<tr>
<td height="200" width="300px">
<div style="overflow-x:auto; overflow-y:scroll; width:300px; height:200px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<script type="text/javascript">
getLv1Nodes();
</script>
</table>
</div>
</td>
<td width="300px"height="200" >
<input name="removeUserBTN" type="button" onClick="removeUser()" value="删除">（可按住Ctrl或Shift多选）<br>
<select name="select" size="10" id="checkedUser" style="width:150" multiple="multiple">
</select></td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
insertUser();
</script>
以上是关于js的树形结构怎么实现的主要内容，如果未能解决你的问题，请参考以下文章