js的树形结构怎么实现

来源：互联网发布：php学java要多久编辑：程序博客网时间：2024/06/05 15:19

为部门，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]+"'

//折叠节点分支
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>

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