可展开和多层折叠并带有表格的树,现把代码分享

Question

效果如下

Answer 1

// 加载页面时显示第一级分类
            SubCategory("0");
                //lb.Items.Add("==请选择==");
                //lb.Items[lb.Items.Count-1].Value="0";
                //lb.Items[lb.Items.Count-1].Selected=true;
                function SubCategory(iid)
{
    ExpandSubtree(iid);
    SortChangeType("divTable");
}
function CheckAll()
  {
  for (var i=0;i<Form2.elements.length;i++)
    {
       var e = Form2.elements[i];
       if (e.Name != "chkAll")
           e.checked = Form2.boxall.checked;
       }
  }
                        //栏目
function ExpandSubtree(iid)
            {
                var dt=null;
                if(iid=="0"){
                      dt=managetreelm.myDataBind(iid).value.Tables[0];
                }else{
                      dt= managetreelm.myDataBind(iid.split("|")[0]).value.Tables[0];
                }
                var dtconut=dt.Rows.length;
                
                var FolderType="",FolderName="",onMouseUp="",ListType="",productid,linkid,IsChild,Layer;
                for (var i = 0;i < dtconut;i++)
                {
                    productid=dt.Rows[i].T_ID;
                    linkid=dt.Rows[i].T_LinkID;
                    FolderName=dt.Rows[i].T_Title;
                    IsChild=dt.Rows[i].IsChild;
                    Layer=dt.Rows[i].T_Layer;
                    ListType="";
                    for(var l=1;l<Layer;l++){
                        ListType+="<img src='images/SortEnd_Listline.gif' height='25' width='15' align=\"left\">";    
                    }
                    if (IsChild == 0) //叶子节点
                    {
                        if (i==dtconut-1)
                        {
                            FolderType="<img src='images/Sort_File_End.gif' height='25' width='15' align=\"left\">";
                        }
                        else
                        {
                            FolderType="<img src='images/Sort_File.gif' height='25' width='15'  align=\"left\">";
                        }
                        
                    }
                    else
                    {
                       
                        if (i==dtconut-1)
                        {
                            FolderType="<a href='#' id='a" + productid + "' onclick=\"EndSortChange('"+productid + "|" + iid + "');\"><img src='images/SortEnd_Folder_Close.gif' id='img" + productid + "' height='25' width='15' border=0  align=\"left\"></a>";
                        }
                        else
                        {
                            FolderType="<a href='#' id='a" + productid + "' onclick=\"SortChange('"+productid + "|" + iid + "');\"><img src='images/Sort_Folder_Close.gif' height='25' width='15' id='img" + productid + "' border=0  align=\"left\"></a>";
                        }
                    }
                          var objTable= document.getElementById("divTable");
                          var j=1;     
                          if(iid!=0){
                                  
                                  for( var k=objTable.rows.length-1;k>1;k--){
                                     if(objTable.rows[k]!=null){
                                        if(objTable.rows[k].id.indexOf("tr" + iid)!=-1){
                                           j=k+i;
                                        }
                                      }
                                   }
                           } 
                           else{ 
                                  j=(objTable.rows.length-2);
                           }
                                  
                                    
                           
                                    var newTr = objTable.insertRow(j+1);
                                    //添加三列 
                                    var newTd0 = newTr.insertCell(); 
                                    var newTd1 = newTr.insertCell(); 
                                    var newTd2 = newTr.insertCell(); 
                                    var newTd3 = newTr.insertCell();
                                    var newTd4 = newTr.insertCell();
                                    newTd0.innerHTML="<input type=\"checkbox\" name=\"elements\" id=\"box" + productid + "\" value=\"" + productid + "\"/>";  
                                    newTd1.innerHTML=productid;
                                    newTd2.innerHTML= ListType + FolderType + "<a href=\"manageprodlb.aspx?Action=Re&id="+ productid +"\" Class=\"FolderName\">" + FolderName + "</a>";  
                                    newTd3.innerHTML="<input type=\"text\" name=\"Linktxt\" id=\"Linktxt" + productid + "\" value=\"" + linkid + "\" class=\"Linktxt\" style=\"width:32px;\"/><input type=\"hidden\" name=\"hiddenID\" id=\"hiddenID" + productid + "\" value=\"" + productid + "\"/>"; 
                                    newTd4.innerHTML="<b><a href='managetreelm.aspx?Action=Add&id="+ productid +"'>添加子类</a><font color='#367BDA'>&nbsp;|&nbsp;</font><a href='managetreelm.aspx?Action=Edit&id="+ productid +"'>修改</a><font color='#367BDA'>&nbsp;|&nbsp;</font><a href=javascript:ConfirmDelSort('managetreelm.aspx?Action=Del&id=','"+ productid + "') >删除</a><font color='#367BDA'>&nbsp;|&nbsp;</font><a href=\"javascript:EditLinkID('managetreelm.aspx','" + productid + "')\">修改排序</a></b>";
                                    newTd2.setAttribute("align","left");
                                    newTd0.setAttribute("width","40");
                                    newTd1.setAttribute("width","50");
                                    newTd3.setAttribute("width","50");
                                    newTd4.setAttribute("width","350");
                                    newTr.id="tr" + productid + "|" + iid;
                                   
                        
                          
                }
            }

Answer 2

//分类节点展开和折叠-------------------------------------------------------------------
function EndSortChange(iid)
{
    var id;
         id=iid.split("|")[0];
     var a= document.getElementById("a" + id);
     var img= document.getElementById("img" + id);
        img.src="images/SortEnd_Folder_Open.gif";
     var objTable= document.getElementById("divTable");
     var j=1;     
     for( var k=objTable.rows.length-1;k>1;k--){
          if(objTable.rows[k]!=null){
                var id2=objTable.rows[k].id.split("|");
                for(var m=0;m<id2.length;m++){
                   if(id2[m]==id){
                        j=0;
                   }
                }
          }
     }
     if(j==0){
          for( var k=objTable.rows.length-1;k>1;k--){
              if(objTable.rows[k]!=null){
                   var id2=objTable.rows[k].id.split("|");
                   for(var m=0;m<id2.length;m++){
                      if(id2[m]==id){
                          var index=objTable.rows[k].rowIndex;
                          objTable.deleteRow(index);
                      }
                   }
               }
          }
          img.src="images/SortEnd_Folder_Close.gif";
     }else{
          SubCategory(iid); 
     }
}
function SortChange(iid)
{
     var id;
         id=iid.split("|")[0];
     var a= document.getElementById("a" + id);
     var img= document.getElementById("img" + id);
        img.src="images/Sort_Folder_Open.gif";
     var objTable= document.getElementById("divTable");
     var j=1;     
     for( var k=objTable.rows.length-1;k>1;k--){
          if(objTable.rows[k]!=null){
                   var id2=objTable.rows[k].id.split("|");
                   for(var m=0;m<id2.length;m++){
                      if(id2[m]==id){
                          j=0;
                      }
                   }
          }
     }
     if(j==0){
          for( var k=objTable.rows.length-1;k>1;k--){
              if(objTable.rows[k]!=null){
                    var id2=objTable.rows[k].id.split("|");
                    for(var m=0;m<id2.length;m++){
                        if(id2[m]==id){
                          var index=objTable.rows[k].rowIndex;
                          objTable.deleteRow(index);
                        }
                    }
               }
          }
          img.src="images/Sort_Folder_Close.gif";
     }else{
          SubCategory(iid); 
     }
}
function SortChangeType(table)
{
     var objTable= document.getElementById(table); 
     var len=objTable.rows.length;
     if(table=="divTable"){
         len=objTable.rows.length-2;
      }else{
         len=objTable.rows.length-1;
      }
               
             for( var k=len;k>0;k--){
                       if(objTable.rows[k]!=null){
                                   if(k%2!=0){
                                       objTable.rows[k].setAttribute("className","P_over");
                                       objTable.rows[k].onmouseover=(function getdiv(d){
                                          return function(){
                                                 d.className="P_out";
                                          }
                                       })(objTable.rows[k]); 
                                       objTable.rows[k].onmouseout=(function getdiv(d){
                                          return function(){
                                                    d.className="P_over";
                                          }
                                       })(objTable.rows[k]);   
                                    }else{
                                       objTable.rows[k].setAttribute("className","P_over2");
                                       objTable.rows[k].onmouseover=(function getdiv(d){
                                          return function(){
                                                 d.className="P_out2";
                                          }
                                       })(objTable.rows[k]); 
                                       objTable.rows[k].onmouseout=(function getdiv(d){
                                          return function(){
                                                    d.className="P_over2";
                                          }
                                       })(objTable.rows[k]);   
                                    }          
                          }
                }
     
}