伤脑经的树形结构菜单

Question

本帖最后由 daxuejianku 于 2010-06-30 19:32:50 编辑

Answer 1

也贡献一个，是从java转js的
------------------------------------
共三个文件
1：main.def.js: 树数据结构定义
2: main.imp.js: 一些基本的树生成实现（包括树形SELECT, 标准文件夹结构树[可折叠，可添加点击动作]）
3：test.html测试文件main.Impl.js中的图片自己去找，图片文件名可以不一样,不要修改前面的NAMES
BOTTOM:"<IMG src=imgs/WindowsExplorer/nodeBottom.gif>"  适用：IE8 FireFox3.6.X节点数目：在一个节点下不能超过150个子节点，但是分开在不同节点的话，测试超过600个以上折叠展开2s之内使用时按照以下格式生成树对象并插入节点var aTree = new JsTree("TestTree-1","0");
    aTree.addNode(new JsTreeNode({id: 0,pid:-1    ,text:"root"}));
    aTree.addNode(new JsTreeNode({id: 1,pid:0    ,text:"No1"}));
    aTree.addNode(new JsTreeNode({id: 2,pid:0    ,text:"你好"}));        aTree.create();1 main.def.js
/*****************************************************************
 *    文件名        main.def.js
 *    创建时间    2010-6-20 12:19PM
 *    创建人        [email protected]
 *    说明        Js Tree 数据结构定义
  *    用法：        调用者自身保证数据的合理性，比如ID不能重复
                   本js只做基本的检查
******************************************************************/
/*
TreeNode Data input form
var Earth = { 
                id: "Earth"
                , pid:"Sun"    
                , diameter:"7920 miles"
                , distance:"93 million miles"
                , year:"365.25"
                , day:"24 hours"
            };
*/
function JsTreeNode(data)
{  
    this.nodeData        = data;
    this.id             = data.id;
     this.pid             = data.pid;
     
      this.level            = 0;
      this.degree            = 0; 
      
      this.ownerTree        = null;
      this.parentNode     = null; 
      this.ancestorFlag    = null;
      
      this.leftSibling    = null; 
      this.rightSibling     = null; 
      
      this.childNodes     = null;
      this.firstChild     = null; 
      this.lastChild         = null;
      
      this.bCollapsed     = false;
      this.bIterated        = false;
     
     //构造函数
    this.init= function()
    {                  
    }.call(); 
    
    this.isRoot = function()        {    return this.parentNode==null;        }
    this.isLeaf = function()         {    return this.degree==0;                }
    this.isYoungest = function()     {    return this.rightSibling==null;        }    
    this.switchCollapse=function()    {    this.bCollapsed = !this.bCollapsed;            
    }
    this.collapse= function(b)        {    this.bCollapsed = b;                        }
    this.belongFamily= function(s)    {    return this.ancestorFlag.indexOf(s)==0;    }
    
    this.removeChild = function(n) {} 
    
    this.getNode=function(nid)
    { 
        if(!this.childNodes)
            return null;
            
        for(var i=0;i<this.childNodes.length;i++){
            if(this.childNodes[i].id==nid)
                return this.childNodes[i];
        } 
        
        return null; 
    }
    
    this.appendChild=function(childNode)
    {
        if(this.getNode(childNode.id)!=null){
            alert("repeat child: ID="+id);
            return false;    
        }
        if(this.childNodes==null){      
             this.childNodes  = new Array();
             this.firstChild  = childNode;
        } 
        this.childNodes.push(childNode);    
        this.degree++;
        childNode.parentNode  = this; 
        childNode.leftSibling = this.lastChild;
        if(this.lastChild)
            this.lastChild.rightSibling = childNode;
        this.lastChild = childNode;        
        return true;
    }
    
    this._next_LEFTFIRST = function()    //左序优先遍历，深度优先 ，文件夹结构
    {    
        if(this.isRoot()&&this.bCollapsed)
            return null;
        if(!this.isLeaf()&&!this.bCollapsed)    //有子节点
            return this.childNodes[0];            
        //没有子节点或者子节点被折叠了，都到下一个兄弟节点
        if(this.rightSibling)  //找到下一个子节点
            return     this.rightSibling;    
        //遍历返回父节点,直到在某层找到一个兄弟节点
        var pNode = this.parentNode;
        while(!pNode.isRoot())
        {
            if(pNode.rightSibling)  //找到父节点的下一个子节点
                return     pNode.rightSibling;    
            pNode = pNode.parentNode;    
        }
        return null;
    }
    
    this._next_RIGHTFIRST = function()    //右序优先遍历，广度优先，组织架构图
    {  
        var treeLNL = this.ownerTree.getLayeredNodesList();
        
        var sameLayerNodes = treeLNL[this.level]; 
        var nodesCount = sameLayerNodes.length;
        var _index = 0;
        
        for(var i=0;i<sameLayerNodes.length;i++){
            if(sameLayerNodes[i].id==this.id){
                _index = i;    
                break;
            }    
        }  
        _index++;
        if(_index<nodesCount)
            return sameLayerNodes[_index];
        if(this.level+1==treeLNL.length)//最底层
            return null;
            
        return treeLNL[this.level+1][0];
    }
}function JsTree(treeid,rootNodeId)
{  
    var ownedNodes         = new Array();
    var id                 = null;
      var depth            = 0;
      var degree            = 0; 
      var rootID            = null;
      var root            = null;
      var    LayeredNodesList= new Array();
      
      var created         = false;
            
      this.getLayeredNodesList = function()    {    return LayeredNodesList;    }
      this.getRoot=function()    {    return root;    }
      this.hashCode     = function()    {    return this._SUPER.hashCode();    }
    this.getClass     = function()    {    return this._SUPER.getClass();    }       
      //构造函数
    this.init= function()
    { 
        id = treeid ;
        rootID = rootNodeId;
    }.call();
    this.addNode  =     function(newNode)    
    {     
        ownedNodes.push(newNode);    
        newNode.ownerTree = this;
    }
    this.setNodes =  function(newNodes)  
    {    
        ownedNodes=newNodes;    
        for(var i=0;i<ownedNodes.length;i++)
            ownedNodes[i].ownerTree = this;
    }
    this.resetNodes =  function()  
    {    
        for(var i=0;i<ownedNodes.length;i++)
            ownedNodes[i].bIterated = false;
    }
    this.getNode=function(nid)
    {
        for(var i=0;i<ownedNodes.length;i++){
            if(ownedNodes[i].id==nid)
                return ownedNodes[i];
        }
        alert("Development ERROR, CANNOT GET TREENODE: ID="+nid);
        return null; 
    } 
    
    this.collapseNode=function(id)     {    this.getNode(id).switchCollapse();    }
    this.collaspeAll=function(status)
    {
        for(var i=0;i<ownedNodes.length;i++)
            ownedNodes[i].collapse(status);
    }
    
    this.create=function()
    {
        if(created)
            return; //只调用一次
        created = true;    
             
        root = this.getNode(rootID);
        if(root==null){
            alert("root not found: ID="+rootID);
            return;
        } 
        for(var i=0;i<ownedNodes.length;i++){
            var tn = ownedNodes[i];
            if(tn.id==root.id)
                continue;    
            var ptn = this.getNode(tn.pid);
            if(ptn==null)
                return;
            ptn.appendChild(tn);
            if(ptn.degree>degree)
                degree = ptn.degree;
        }
        processNode(root);
        depth++;   //depth=max(node.level)+ 1         
        LayeredNodesList.push(new Array(root)); 
        processLayeredNodesList(0,LayeredNodesList);
    }
     
    function processNode(node)
    {
        if(node.isRoot())
            node.ancestorFlag = node.pid+"_"+node.id;
        else{ 
            node.ancestorFlag = node.parentNode.ancestorFlag+"_"+node.id;
            node.level = node.parentNode.level+1;
        }
        if(depth<node.level)
            depth=node.level;
        if(node.isLeaf())
            return;
        for(var i=0;i<node.childNodes.length;i++){
            processNode(node.childNodes[i])
        }
    }
    
    function processLayeredNodesList(level,allLevel)
    { 
        var newLevel =     level+1;
        var newLevelArray =  new Array();
        var preLevel = allLevel[level];
        for(var i=0;i<preLevel.length;i++){
            var node = preLevel[i]; 
            if(node.isLeaf())
                continue;
            for(var j=0;j<node.childNodes.length;j++)
                newLevelArray.push(node.childNodes[j]);
        } 
        if(newLevelArray.length>0){ 
              allLevel.push(newLevelArray);
              processLayeredNodesList(newLevel,allLevel);    
          }
     }
}

Answer 2

2. main.Impl.js/*****************************************************************
 *     Copyright(c) 
 *    
 *    文件名        main.Impl.js
 *    创建时间    2010-6-22 08:44AM
 *    创建人        [email protected]
 *    说明        Js Tree 遍历+算子封装 及相关
实现 
 
  *    用法：        new JsTreeTraverse(aT,"nodeProcessor","_next_RIGHTFIRST").iterate();
******************************************************************/
//遍历器封装类
function JsTreeTraverse(aTree,np,_type)
{
    var objTree            = null;
    var currentID        = null;
    var nodeProcessor     = null; 
    var travelType         = null;
    
    var strResult        = ""; 
    
    this.getResult = function()    {    return strResult;    }
    //构造函数
    this.init= function()
    { 
        objTree            = aTree;
        currentID        = aTree.getRoot().id;
        nodeProcessor    = np;
        travelType        = _type;
    }.call();  
    
    function visit()
    {  
        var node = objTree.getNode(currentID);
        return eval(nodeProcessor+"(node)");
    }
    
    this.iterate=function()
    {
        do
        {  
            strResult += visit();
            var node = aTree.getNode(currentID);
            node = eval("node."+travelType+"()"); 
            if(node==null)
                return true;
            currentID = node.id;
        }while(true);
        
        return false;            
    }
}//---------------------------Basic 树显示组件遍历执行算子基类
function TreeViewNodeProcessor()
{
    this.init = function()
    { 
    }.call();
                
    this.getSelfLine0=function(imgs,aNode)//不显示折叠图片+-，不提供折叠操作
    {    
        if(!aNode.isRoot()){
            if(aNode.isYoungest())
                return imgs.BOTTOM+imgs.NODE; 
            else
                return imgs.MIDDLE+imgs.NODE;
        }
            
        return imgs.ROOT+imgs.NODE;
    }
    
    this.getSelfLine1=function(imgs,aNode)//显示折叠图片+-，不提供折叠动作
    {    
        this.getSelfLine2(imgs,aNode,null,false)
;     
    }
    
    this.getSelfLine2=function(imgs,aNode,actions,canCollapse)//显示折叠图片，提供折叠动作
    {    
        var _link = "";
        if(canCollapse)
            _link = "<A href=# onclick=javascript:"+actions.collapse+"("+aNode.id+")>";
            
        if(!aNode.isRoot()){
            var ret = "";
            
            if(aNode.isYoungest()){ 
                if(aNode.isLeaf())
                    ret += imgs.BOTTOM;
                else if(aNode.bCollapsed)
                    ret += _link+imgs.ARROWBOTTOMCLOSED+(_link==""?"":"</A>");    
                else
                    ret += _link+imgs.ARROWBOTTOM+(_link==""?"":"</A>");
            }else{
                if(aNode.isLeaf())
                    ret += imgs.MIDDLE;
                else if(aNode.bCollapsed)
                    ret += _link+imgs.ARROWMIDDLECLOSED+(_link==""?"":"</A>");
                else
                    ret += _link+imgs.ARROWMIDDLE+(_link==""?"":"</A>");
            }
            
            if(aNode.isLeaf())
                ret += imgs.LEAF;     
            else
                ret += imgs.NODE;
                
            return ret;
        }
        
        if(aNode.bCollapsed)
            return _link+imgs.ROOTCLOSED+(_link==""?"":"</A>")+imgs.NODE;
        else    
            return _link+imgs.ROOT+(_link==""?"":"</A>")+imgs.NODE;
    }    
    
    this.getFrontLines=function(imgs,aNode)
    {
        if(aNode.isRoot())    return "";
        if(aNode.parentNode.isRoot())    return imgs.EMPTY;
            
        var ret ="";
        
        pNode = aNode.parentNode;
                    
        while(!pNode.isRoot()){
            if(pNode.isYoungest())
                ret = imgs.EMPTY+ret;
            else
                ret = imgs.NULL+ret;
            pNode = pNode.parentNode;
        }
        
        return imgs.EMPTY+ret;
    }
    
    this.printNode=function(aNode) 
    { 
        alert("请重载方法:this.printNode=function(aNode) ");
    }
}    
//--------------------------树形SELECT构造--------------------------
var SelectTreeNodeImgs =  {
             BOTTOM    :"┗"
            ,MIDDLE    :"┣" 
            ,EMPTY    :"　"        
            ,NULL    :"┃"
            ,ROOT    :"☆" 
            ,NODE    :"☉"
    }; 
    
function TreeSelectNodeProcessor() //树状下拉列表视图算子
{
    this._SUPER = new TreeViewNodeProcessor("TreeViewNodeProcessor:TreeSelectNodeProcessor"); 
    this.init = function()
    { 
    }.call();
    
    this.printNode=function(aNode)
    { 
        var line = this._SUPER.getFrontLines(SelectTreeNodeImgs,aNode)
                    +this._SUPER.getSelfLine0(SelectTreeNodeImgs,aNode);
                    
        return  "<OPTION>"+line+aNode.nodeData.text+"</OPTION>";
    }
}var $TreeSelectNodeProcessor = new TreeSelectNodeProcessor(); function $outputTreeSelect(aTree,_misc)
{ 
    var ret = "<SELECT "+_misc+">";
    var tt = new JsTreeTraverse(aTree,"$TreeSelectNodeProcessor.printNode","_next_LEFTFIRST") ;
    tt.iterate();
    ret += tt.getResult();    
    ret += "</SELECT>";    
    
    return ret;
}
//--------------------------树形SELECT构造--------------------------//--------------------------标准动态树(可折叠收起)结构构造，节点点击处理--------
var $WindowStyleTreeNodeImgs =  {
             BOTTOM                :"<IMG src=imgs/WindowsExplorer/nodeBottom.gif>"
            ,MIDDLE                :"<IMG src=imgs/WindowsExplorer/nodeMiddle.gif>"
            ,EMPTY                :"<IMG src=imgs/WindowsExplorer/nodeEmpty.gif>"        
            ,NULL                :"<IMG src=imgs/WindowsExplorer/nodeNull.gif>"
            ,ROOT                :"<IMG src=imgs/WindowsExplorer/root.gif>"
            ,ROOTCLOSED            :"<IMG src=imgs/WindowsExplorer/rootClosed.gif>"
            ,ARROWBOTTOMCLOSED  :"<IMG src=imgs/WindowsExplorer/arrowBottomClosed.gif>"
            ,ARROWBOTTOM          :"<IMG src=imgs/WindowsExplorer/arrowBottom.gif>"
            ,ARROWMIDDLECLOSED  :"<IMG src=imgs/WindowsExplorer/arrowMiddleClosed.gif>"    
            ,ARROWMIDDLE         :"<IMG src=imgs/WindowsExplorer/arrowMiddle.gif>"
            //以上是结构显示图片 (竖线，展开,折叠)
            //以下是节点内容前的图片 ：文件夹？文件,可以替换
            ,CURRENTNODE        :"<IMG src=imgs/WindowsExplorer/openFolder.gif>" 
            ,NODE                :"<IMG src=imgs/WindowsExplorer/folder.gif>" 
            ,LEAF                :"<IMG src=imgs/WindowsExplorer/leaf.gif>"
    };    var $MyStyleTreeNodeImgs =  {
             BOTTOM                :"<IMG src=imgs/standard/nodeBottom.gif>"
            ,MIDDLE                :"<IMG src=imgs/standard/nodeMiddle.gif>"
            ,EMPTY                :"<IMG src=imgs/standard/nodeEmpty.gif>"        
            ,NULL                :"<IMG src=imgs/standard/nodeNull.gif>"
            ,ROOT                :"<IMG src=imgs/standard/root.gif>"
            ,ROOTCLOSED            :"<IMG src=imgs/standard/rootClosed.gif>"
            ,ARROWBOTTOMCLOSED  :"<IMG src=imgs/standard/arrowBottomClosed.gif>"
            ,ARROWBOTTOM          :"<IMG src=imgs/standard/arrowBottom.gif>"
            ,ARROWMIDDLECLOSED  :"<IMG src=imgs/standard/arrowMiddleClosed.gif>"    
            ,ARROWMIDDLE         :"<IMG src=imgs/standard/arrowMiddle.gif>"
            //以上是结构显示图片 (竖线，展开,折叠)
            //以下是节点内容前的图片 ：文件夹？文件,可以替换
            ,CURRENTNODE        :"<IMG src=imgs/standard/openFolder.gif>" 
            ,NODE                :"<IMG src=imgs/standard/folder.gif>" 
            ,LEAF                :"<IMG src=imgs/standard/leaf.gif>"
    }; function StandardDynamicTreeNodeProcessor() 
{  
    var ActionList = null;
    var canClickNode = false;
    var canCollapse  = false; 
    var TreeNodeImgs = null;
    
    this._SUPER = new TreeViewNodeProcessor("TreeViewNodeProcessor:StandardDynamicTreeNodeProcessor"); 
    this.init = function()
    {  
        
    }.call();
    
    this.setActionList = function(al)
      
    {    
        ActionList  = al; 
        canClickNode = ActionList&&ActionList.nodeClicked&&ActionList.nodeClicked!="" ;
        canCollapse  = ActionList&&ActionList.collapse&&ActionList.collapse!="" ;
    } 
    this.setTreeNodeImgs  = function(ss)
 
    {
        TreeNodeImgs  = ss;
    } 
         
    this.printNode=function(aNode)
    { 
        var line = this._SUPER.getFrontLines(TreeNodeImgs,aNode)
                    +this._SUPER.getSelfLine2(TreeNodeImgs,aNode,ActionList,canCollapse);
        
        if(canClickNode)
            return "<TR><TD>"+line+"<SPAN><A href=# onclick=javascript:"+ActionList.nodeClicked+"("+aNode.id+")>"+aNode.nodeData.text+"</A></SPAN></TD></TR>";
        else    
            return "<TR><TD>"+line+"<SPAN>"+aNode.nodeData.text+"</SPAN></TD></TR>";
    }
}var $StandardDynamicTreeNodeProcessor = new StandardDynamicTreeNodeProcessor(); //al : 
//var aL = { collapse:"collapse",nodeClicked:"nodeClicked",nodeMouseOver:"nodeMouseOver" } ,可折叠并其它操作
//var al = null; 无折叠动作
//var aL = { collapse:"collapse" } 只可折叠，无Node点击动作
function $outputStandardTree(aTree,_misc,al,TreeNodeImgs)
{ 
    $StandardDynamicTreeNodeProcessor.setActionList(al);
    $StandardDynamicTreeNodeProcessor.setTreeNodeImgs(TreeNodeImgs);
    var ret ="<TABLE "+_misc+">";
    var tt = new JsTreeTraverse(aTree,"$StandardDynamicTreeNodeProcessor.printNode","_next_LEFTFIRST") ;
    tt.iterate();
    ret += tt.getResult();    
    ret += "</TABLE>";    
    
    return ret;
}
//--------------------------动态树(可折叠收起)结构构造，节点点击处理--------

Answer 3

3.test.htm<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<SCRIPT src=main.def.js></SCRIPT>
<SCRIPT src=main.Impl.js></SCRIPT> 
<link rel="stylesheet" href="main.css" type="text/css"><SCRIPT> 
                
        var aTree = new JsTree("TestTree-1","0");
        aTree.addNode(new JsTreeNode({id: 0,pid:-1        ,text:"root"}));
        aTree.addNode(new JsTreeNode({id: 1,pid:0        ,text:"No1"}));
        aTree.addNode(new JsTreeNode({id: 2,pid:0        ,text:"你好"}));
        
        aTree.addNode(new JsTreeNode({id: 11,pid:1        ,text:"No11"}));
        aTree.addNode(new JsTreeNode({id: 12,pid:1        ,text:"No12"}));
        aTree.addNode(new JsTreeNode({id: 13,pid:1        ,text:"No13"}));
        aTree.addNode(new JsTreeNode({id: 21,pid:2        ,text:"No21"}));
        aTree.addNode(new JsTreeNode({id: 22,pid:2        ,text:"No22"}));
        
        aTree.addNode(new JsTreeNode({id: 211,pid:21        ,text:"No211"}));
        aTree.addNode(new JsTreeNode({id: 212,pid:21        ,text:"No212"}));
        aTree.addNode(new JsTreeNode({id: 213,pid:21        ,text:"No213"}));
        aTree.addNode(new JsTreeNode({id: 214,pid:21        ,text:"No214"}));
        aTree.addNode(new JsTreeNode({id: 31,pid:3        ,text:"No31"}));
        aTree.addNode(new JsTreeNode({id: 32,pid:3        ,text:"No32"}));
        aTree.addNode(new JsTreeNode({id: 33,pid:3        ,text:"No33"})); 
        aTree.addNode(new JsTreeNode({id: 34,pid:3        ,text:"No34"})); 
        aTree.addNode(new JsTreeNode({id: 35,pid:3        ,text:"No35"})); 
        aTree.addNode(new JsTreeNode({id: 36,pid:3        ,text:"No36"})); 
        aTree.addNode(new JsTreeNode({id: 37,pid:3        ,text:"No37"})); 
        aTree.addNode(new JsTreeNode({id: 38,pid:3        ,text:"No38"}));
        aTree.addNode(new JsTreeNode({id: 39,pid:3        ,text:"No39"}));
        
        
        for(var i=40;i<=140;i++)
        {
                aTree.addNode(eval("new JsTreeNode({id: 35"+i+",pid:35        ,text:'No35"+i+"'})"));         
        } 
        
        for(var i=40;i<=140;i++)
        {
                aTree.addNode(eval("new JsTreeNode({id: 36"+i+",pid:36        ,text:'No36"+i+"'})"));         
        } 
        
        for(var i=40;i<=140;i++)        {
                aTree.addNode(eval("new JsTreeNode({id: 38"+i+",pid:38        ,text:'No38"+i+"'})"));         
        } 
                 
        for(var i=40;i<=140;i++)        {
                aTree.addNode(eval("new JsTreeNode({id: 39"+i+",pid:39        ,text:'No39"+i+"'})"));         
        } 
        for(var i=40;i<=140;i++)        {
                aTree.addNode(eval("new JsTreeNode({id: 37"+i+",pid:37        ,text:'No37"+i+"'})"));         
        }  
        for(var i=40;i<=140;i++)        {
                aTree.addNode(eval("new JsTreeNode({id: 34"+i+",pid:34        ,text:'No34"+i+"'})"));         
        } 
        aTree.addNode(new JsTreeNode({id: 3,pid:0        ,text:"No3"}));
        aTree.create();
                
        var actions = {collapse:"collapse",nodeClicked:"nodeClicked"}
        
        function showSelect()
        { 
                //document.getElementById("TREESELECT").innerHTML = $outputTreeSelect(aTree,"size=16");
                document.getElementById("TREEVIEW").innerHTML = $outputStandardTree(aTree,"border=0 style='border-collapse:collapse;'",actions,$WindowStyleTreeNodeImgs);        
        }
        
        function collapse(id)        {
                n = aTree.getNode(id);
                n.switchCollapse();
                document.getElementById("TREEVIEW").innerHTML = $outputStandardTree(aTree,"border=0 style='border-collapse:collapse;'",actions,$MyStyleTreeNodeImgs);        
        } 
        function nodeClicked(id)
        {  
                n = aTree.getNode(id);
                alert(n.nodeData.text);
        }          
</SCRIPT><BODY onload=showSelect()>
        <DIV id=TREESELECT></DIV>
        <DIV id=TREEVIEW CLASS=STANDARDTREECONTAINER></DIV>
</BODY>
可以到我空间下载压缩包，里面有图片

Answer 4

嵌套两个循环，栏目级别用字段控制<select name="ClassID" id="ClassID">
    <%
   Dim Sqlp,Rsp,TempStr
   Sqlp ="select * from 栏目表 Where TopID = 0"   
   Set Rsp=server.CreateObject("adodb.recordset")   
   rsp.open sqlp,conn,1,1 
   Response.Write("<option value="""">请选择栏目</option>") 
   If Rsp.Eof and Rsp.Bof Then
      Response.Write("<option value="""">请先添加栏目</option>")
   Else
      Do while not Rsp.Eof   
         Response.Write("<option value=" & """?ClassID=" & Rsp("ID") & """" & "")
 If int(request("ClassID"))=Rsp("ID") then
Response.Write(" selected" ) 
 End if
         Response.Write(">|-" & Rsp("ClassName") & ")
    Set Rspp=server.CreateObject("adodb.recordset")   
    rspp.open sqlpp,conn,1,1
Do while not Rspp.Eof 
Response.Write("<option value=" & """?ClassID=" & Rspp("ID") & """" & "")
If int(request("ClassID"))=Rspp("ID") then
Response.Write(" selected" ) 
End if
          Response.Write(">　|-" & Rspp("ClassName") ")
Response.Write("</option>" ) 
Rspp.Movenext   
       Loop

         Response.Write("</option>" ) 
      Rsp.Movenext   
      Loop   
   End if
%>
        </select>

Answer 5

楼上这位同志，我们是集团下的信息化公司。集团所有信息化都自己搞。你说要我们管不。集团涉及的大行业有7个。集团下的公司我是无法算。估计几十个吧。就这位同志。victor_woo 说到点上。
先吹一下自己。像我好逮也万把分了。不会提太幼稚的问题。
如果是普通的树形菜单。我自己都自己写。我的意思是如何把树形菜单的形式换成 组织结构图那样。
竖向
横向
当然比这复杂多了。一直到下面，估计得9层以上。如果用树形菜单。第一看着不明确。你用树形菜单搞个9层试试。你看还像样不。

Answer 6

victor_woo
的，我觉得用纯JS生成。当然可以，我想看一下。想树形菜单那样。先显示数据<li><ul><li></li></ul></li>。然后再用js样式化。

Answer 7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <style type="text/css">
        p, span, div, table, tr, td, input
        {
            font-family: Tahoma;
            font-size: 11px;
        }
        .sectionPaddig
        {
            padding-left: 4;
            padding-right: 4;
            filter: progid:DXImageTransform.Microsoft.dropShadow( Color=BCBCBC,offX=2,offY=2,positive=true);
        }
        .inline
        {
            display: inline;
            vertical-align: text-top;
        }
        .dotbox
        {
            display: inline;
            height: 1px;
        }
        .sectionStyle1
        {
            padding-left: 2;
            padding-right: 2;
            border: 1px solid #000000;
            border-top-color: #000000;
            border-left-color: #000000;
            border-right-color: #000000;
            border-bottom-color: #000000;
            background-color: #abcdef;
            text-align: center;
            cursor: hand;
        }
    </style>    <script type="text/javascript">
        //ID ParentID Name结构的数据
        //Javascript脚本递归函数生成部门树结构
        var Sys_Group = new Array();
        var MaxStack;
        Sys_Group[0] = new Array(1, 0, "总经理");
        Sys_Group[1] = new Array(2, 1, "人事部");
        Sys_Group[2] = new Array(6, 1, "财政部");
        Sys_Group[3] = new Array(4, 2, "人1事部");
        Sys_Group[4] = new Array(3, 2, "人2事部");
        Sys_Group[5] = new Array(5, 3, "人3事部");
        Sys_Group[6] = new Array(7, 1, "财和事部");
        Sys_Group[7] = new Array(8, 5, "财和事ds部");
        Sys_Group[8] = new Array(9, 3, "财和sd事ds部");
        Sys_Group[9] = new Array(10, 9, "a");
        Sys_Group[10] = new Array(11, 9, "b");
        Sys_Group[11] = new Array(12, 10, "aa1");
        Sys_Group[12] = new Array(13, 10, "aa2");
        Sys_Group[13] = new Array(14, 11, "bb1");
        Sys_Group[14] = new Array(15, 11, "bb2");
        Sys_Group[15] = new Array(16, 1, "人aaaa事部");
        Sys_Group[16] = new Array(17, 16, "cccc");
        Sys_Group[17] = new Array(18, 16, "dd");
        Sys_Group[18] = new Array(19, 6, "人ssss事部");
        Sys_Group[19] = new Array(20, 6, "人rrr事部");
        Sys_Group[20] = new Array(21, 4, "人1111事部");
        Sys_Group[21] = new Array(22, 4, "人1111事部");
        Sys_Group[22] = new Array(23, 21, "人1111事部");
        Sys_Group[23] = new Array(24, 22, "人1111事部");  
        MaxStack=Sys_Group.length;
        var str;
        var Old_Group=new Array(),Yu_Group =new Array();
        for(var i=0; i<MaxStack; i++) {
            Old_Group[i]=new Array(null, null, null);
        }
        i=0;
        Yu_Group=Sys_Group;
        str='<table border="0" id=T0 align="center" cellpadding="0" cellspacing="0" class="inline">';
        str+='   <tr>';
        str+='    <td align="left" valign="top"></td>';
        str+='   </tr>';
        str+='   <tr>';
        str+='    <td align="center" valign="top"></td>';
        str+='   </tr>';
        str+='   <tr>';
        str+='    <td align="center" valign="top" class="sectionPaddig"><table width="80" height="30" border="0" align="center" cellpadding="0" cellspacing="0" class="inline" >';
        str+='     <tr>';
        str+='      <td align="center" onclick="openDlg('+Sys_Group[0][0]+');return;T0.style.display=\'none\';" class="sectionStyle1">'+Sys_Group[0][2]+'</td>';
        str+='     </tr>';
        str+='     </table>';
        str+='    </td>';
        str+='   </tr>';
        str+='   <tr>';
        str+='    <td align="center" valign="top">';
        if (MaxStack>1){
            str+='<table border="0" cellpadding="0" cellspacing="0" bgcolor=#000000 width=1 height=15 class="inline" >';
            str+='      <tr>';
            str+='       <td align=center>';
            str+='       </td>';
            str+='      </tr>';
            str+='     </table>';
        }
        str+='    </td>';
        str+='   </tr>';
        str+='   <tr>';
        str+='    <td align="center" valign="top">';
        Old_Group[0]=Yu_Group[0];
        Yu_Group[0]=new Array(null, null, null);
        Grouplist(1,0);
        str+='    </td>';
        str+='   </tr>';
        str+='</table>';        //alert(str);
        document.write(str);        function Grouplist(InGroup_ID,A){
            var Old_Find,Yu_Find,YuID_Find,TempGroup_ID,TestStr;  
            if (A==MaxStack){
                return;
            }
            for(var i=0; i<MaxStack; i++) {
                if (Yu_Group[i][1]!=null && Yu_Group[i][1]== InGroup_ID  ){          
                    str+='<table border="0" id=T'+Sys_Group[i][0]+' align="center" cellpadding="0" cellspacing="0" class="inline">';
                    for (var j=0; j<MaxStack; j++){
                        Old_Find=false;
                        if(Yu_Group[i][1]!=null && Old_Group[j][1]!=null && Old_Group[j][1]==Yu_Group[i][1]){
                        Old_Find=true;
                        break;          
                    }          
                }
                for (var j=0; j<MaxStack; j++){
                    Yu_Find=false;
                    if(i!=j && Yu_Group[i][1]!=null && Yu_Group[j][1]==Yu_Group[i][1] && Yu_Group[j][0]!=Yu_Group[i][0] ){
                        Yu_Find=true;
                        break;
                    }          
                }
                for (var j=0; j<MaxStack; j++){
                    YuID_Find=false;
                    if( i!=j && Yu_Group[i][1]!=null && Yu_Group[j][1]==Yu_Group[i][0]){
                        YuID_Find=true;
                        break;
                    }
                }         
                str+='   <tr>';
                if(Old_Find==false&&Yu_Find==false){
                    str+='   <td align="center" valign="top" >';
                    str+='<table border="0" cellpadding="0" cellspacing="0" bgcolor=#000000 width=1 class="dotbox" >';
                    str+='      <tr>';
                    str+='       <td align=center ></td>';
                    str+='      </tr>';
                    str+='     </table>';
                    str+='</td>';
                }
                if (Old_Find==true&&Yu_Find==false){
                    str+='   <td align="left" valign="top">';
                    str+='<table border="0" cellpadding="0" cellspacing="0" bgcolor=#000000 width=50%  class="dotbox" >';
                    str+='      <tr>';
                    str+='       <td align=center ></td>';
                    str+='      </tr>';
                    str+='     </table>';
                    str+='</td>';
                }
                if (Old_Find==true&&Yu_Find==true){
                    str+='   <td align="center" valign="top">';
                    str+='<table border="0" cellpadding="0" cellspacing="0" bgcolor=#000000 width=100%  class="dotbox" >';
                    str+='      <tr>';
                    str+='       <td align=center ></td>';
                    str+='      </tr>';
                    str+='     </table>';
                    str+='</td>';
                }
                if (Old_Find==false&&Yu_Find==true){
                    str+='   <td align="right" valign="top">';
                    str+='<table border="0" cellpadding="0" cellspacing="0" bgcolor=#000000 width=50% class="dotbox" >';
                    str+='      <tr>';
                    str+='       <td align=center ></td>';
                    str+='      </tr>';
                    str+='     </table>';
                    str+='</td>';
                }
                str+='  </tr>';
                str+='  <tr>';
                str+='   <td align="center" valign="top"><img src="line_4.gif" width="60" height="15" class="inline"></td>';
                str+='  </tr>';   
                str+='  <tr>';
                str+='   <td align="center" valign="top" class="sectionPaddig"><table width="80" height="30" border="0" align="center" cellpadding="0" cellspacing="0" class="inline" >';
                str+='    <tr>';
                str+='     <td align="center" onclick="openDlg('+Sys_Group[i][0]+');return;T'+Sys_Group[i][0]+'.style.display=\'none\';" class="sectionStyle1">'+Sys_Group[i][2]+'</td>';
                str+='    </tr>';
                str+='    </table>';
                str+='   </td>';
                str+='  </tr>';
                str+='  <tr>';
                str+='   <td align="center" valign="top">';
                if(YuID_Find==true){
                    str+='   <table border="0" cellpadding="0" cellspacing="0" class="inline" >';
                    str+='    <tr>';
                    str+='     <td>';
                    str+='     <img src="line_4.gif" width="60" height="15" class="inline">';
                    str+='     </td>';
                    str+='    </tr>';
                    str+='   </table>';
                }
                str+='   </td>';
                str+='  </tr>';
                str+='  <tr>';
                str+='   <td align="center" valign="top">';
             
                Old_Group[i]=Yu_Group[i];
                TempGroup_ID=Yu_Group[i][0];
                  
                Yu_Group[i]=new Array(null, null, null);
                //alert(TempGroup_ID);
                  
                Grouplist(TempGroup_ID,i); 
                   
                str+='   </td>';
                str+='  </tr>';   
                str+='</table>';    
            }                
        }
    }
    function openDlg(str){
        alert(str);
    }
    </script>
</head>
<body></body>
</html>

Answer 8

楼上你。很N嘛。用TABLE居然也搞定。
再顶一下。还有么。

Answer 9

既然是组织结构图，为什么要写程序来弄？你上面不是给出了很好的图么？这个图要用作Web系统的功能菜单？不用的话就用visio画一个交差，做好版本，有调整再修改就行了我给的程序是有按层统计节点的，但是节点的定位未考虑；树形菜单本身只是一个技术实现，你们集团有9层那就用9层树菜单了，为避免全部展开太乱，任意时刻任一层只能展开一个节点。

Answer 10

this._next_RIGHTFIRST = function()    //右序优先遍历，广度优先，组织架构图
考虑过的，实现不了，呵呵另外：你认为资源管理器的文件夹视图看着很乱？没法看？层数实在太多，能否处理为分级的组织结构图，I级只显示到集团-行业-公司，点击公司后再显示这个公司的组织结构；一个太过复杂的内容展现无论横向还是纵向还是其他方式都有问题。

Answer 11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
无标题页
</title>
    <script src="../Js/jquery.js" type="text/javascript"></script>
    <style type="text/css">
        p, span, div, table, tr, td, input
        {
            font-family: Tahoma;
            font-size: 11px;
        }
        .sectionPaddig
        {
            padding-left: 4;
            padding-right: 4;
            filter: progid:DXImageTransform.Microsoft.dropShadow( Color=BCBCBC,offX=2,offY=2,positive=true);
        }
        .inline
        {
            display: inline;
            vertical-align: text-top;
        }
        .dotbox
        {
            display: inline;
            height: 1px;
        }
        .sectionStyle1
        {
            padding-left: 2;
            padding-right: 2;
            border: 1px solid #000000;
            border-top-color: #000000;
            border-left-color: #000000;
            border-right-color: #000000;
            border-bottom-color: #000000;
            background-color: #abcdef;
            text-align: center;
            cursor: hand;
        }       
    </style>    <script type="text/javascript">
    //id pId name结构的数据        
    var Sys_Group=[];
    var MaxStack;
    var str;
    var Old_Group=[],Yu_Group =[];
    function CreateDepartTree(json){
        if(typeof(json)=="undefined")return;
        Sys_Group=json;
        MaxStack=Sys_Group.length;            
        for(var i=0; i<MaxStack; i++) {
            Old_Group[i]={};
        }
        //i=0;
        Yu_Group=Sys_Group;
        str='<table border="0" id="T0" align="center" cellpadding="0" cellspacing="0" class="inline">';
        str+='   <tr>';
        str+='    <td align="left" valign="top"></td>';
        str+='   </tr>';
        str+='   <tr>';
        str+='    <td align="center" valign="top"></td>';
        str+='   </tr>';
        str+='   <tr>';
        str+='    <td align="center" valign="top" class="sectionPaddig"><table width="80" height="30" border="0" align="center" cellpadding="0" cellspacing="0" class="inline" >';
        str+='     <tr>';
        str+='      <td align="center" onclick="openDlg(\''+Sys_Group[0].id+'\',this);" class="sectionStyle1">'+Sys_Group[0].name+'</td>';
        str+='     </tr>';
        str+='     </table>';
        str+='    </td>';
        str+='   </tr>';
        str+='   <tr>';
        str+='    <td align="center" valign="top">';
        if (MaxStack>1){
            str+='<table border="0" cellpadding="0" cellspacing="0" bgcolor=#000000 width=1 height=15 class="inline" >';
            str+='      <tr>';
            str+='       <td align=center>';
            str+='       </td>';
            str+='      </tr>';
            str+='     </table>';
        }
        str+='    </td>';
        str+='   </tr>';
        str+='   <tr>';
        str+='    <td align="center" valign="top">';
        Old_Group[0]=Yu_Group[0];        
        Yu_Group[0]={};
        Grouplist("001",0);
        str+='    </td>';
        str+='   </tr>';
        str+='</table>';            
        return str;
    }
    function Grouplist(InGroup_ID,A){
        var Old_Find,Yu_Find,YuID_Find,TempGroup_ID,TestStr;  
        if (A==MaxStack){
            return;
        }
        for(var i=0; i<MaxStack; i++) {
            if (Yu_Group[i].pId!=null && Yu_Group[i].pId==InGroup_ID  ){          
                str+='<table border="0" id="T'+Sys_Group[i].id+'" align="center" cellpadding="0" cellspacing="0" class="inline">';
                for (var j=0; j<MaxStack; j++){
                    Old_Find=false;
                    if(Yu_Group[i].pId!=null && Old_Group[j].pId!=null && Old_Group[j].pId==Yu_Group[i].pId){
                    Old_Find=true;
                    break;          
                }          
            }
            for (var j=0; j<MaxStack; j++){
                Yu_Find=false;
                if(i!=j && Yu_Group[i].pId!=null && Yu_Group[j].pId==Yu_Group[i].pId && Yu_Group[j].id!=Yu_Group[i].id){
                    Yu_Find=true;
                    break;
                }          
            }
            for (var j=0; j<MaxStack; j++){
                YuID_Find=false;
                if( i!=j && Yu_Group[i].pId!=null && Yu_Group[j].pId==Yu_Group[i].id){
                    YuID_Find=true;
                    break;
                }
            }         
            str+='   <tr>';
            if(Old_Find==false&&Yu_Find==false){
                str+='   <td align="center" valign="top" >';
                str+='<table border="0" cellpadding="0" cellspacing="0" bgcolor=#000000 width=1 class="dotbox" >';
                str+='      <tr>';
                str+='       <td align=center ></td>';
                str+='      </tr>';
                str+='     </table>';
                str+='</td>';
            }
            if (Old_Find==true&&Yu_Find==false){
                str+='   <td align="left" valign="top">';
                str+='<table border="0" cellpadding="0" cellspacing="0" bgcolor=#000000 width=50%  class="dotbox" >';
                str+='      <tr>';
                str+='       <td align=center ></td>';
                str+='      </tr>';
                str+='     </table>';
                str+='</td>';
            }
            if (Old_Find==true&&Yu_Find==true){
                str+='   <td align="center" valign="top">';
                str+='<table border="0" cellpadding="0" cellspacing="0" bgcolor=#000000 width=100%  class="dotbox" >';
                str+='      <tr>';
                str+='       <td align=center ></td>';
                str+='      </tr>';
                str+='     </table>';
                str+='</td>';
            }
            if (Old_Find==false&&Yu_Find==true){
                str+='   <td align="right" valign="top">';
                str+='<table border="0" cellpadding="0" cellspacing="0" bgcolor=#000000 width=50% class="dotbox" >';
                str+='      <tr>';
                str+='       <td align=center ></td>';
                str+='      </tr>';
                str+='     </table>';
                str+='</td>';
            }
            str+='  </tr>';
            str+='  <tr>';
            str+='   <td align="center" valign="top"><img src="img/line_4.gif" width="60" height="15" class="inline"></td>';
            str+='  </tr>';   
            str+='  <tr>';
            str+='   <td align="center" valign="top" class="sectionPaddig"><table width="80" height="30" border="0" align="center" cellpadding="0" cellspacing="0" class="inline" >';
            str+='    <tr>';
            str+='     <td align="center" onclick="openDlg(\''+Sys_Group[i].id+'\',this);" class="sectionStyle1">'+Sys_Group[i].name+'</td>';
            str+='    </tr>';
            str+='    </table>';
            str+='   </td>';
            str+='  </tr>';
            str+='  <tr>';
            str+='   <td align="center" valign="top">';
            if(YuID_Find==true){
                str+='   <table border="0" cellpadding="0" cellspacing="0" class="inline" >';
                str+='    <tr>';
                str+='     <td>';
                str+='     <img src="img/line_4.gif" width="60" height="15" class="inline">';
                str+='     </td>';
                str+='    </tr>';
                str+='   </table>';
            }
            str+='   </td>';
            str+='  </tr>';
            str+='  <tr>';
            str+='   <td align="center" valign="top">';
         
            Old_Group[i]=Yu_Group[i];
            TempGroup_ID=Yu_Group[i].id;
              
            Yu_Group[i]={};                
              
            Grouplist(TempGroup_ID,i); 
               
            str+='   </td>';
            str+='  </tr>';   
            str+='</table>';    
            }                
        }
    }
    var curNode=null;
    function openDlg(str,obj){
        alert(str);        
        if(curNode){
            if(curNode==obj){
                $(curNode).css("color","");
                curNode=null;
                $("#hiddenCurNode").val("");
            }else{
                $(curNode).css("color","");
                $(obj).css("color","red");
                curNode=obj;                
                $("#hiddenCurNode").val(str);
            }
        }else{
            if($(obj).css("color")=="red"){
                $(obj).css("color","");
                curNode=null;
                $("#hiddenCurNode").val("");                
            }else{
                $(obj).css("color","red");
                curNode=obj;
                $("#hiddenCurNode").val(str);
            }
        }
    }
    $(document).ready(function(){    
        //var json='[{"id":"001","name":"test","pId":"0"},{"id":"001001","name":"test1","pId":"001"},{"id":"001001001","name":"a","pId":"001001"},{"id":"001002","name":"test4","pId":"001"},{"id":"001002002","name":"b","pId":"001002"},{"id":"001002003","name":"c","pId":"001002"},{"id":"001003","name":"003","pId":"001"},{"id":"001003001","name":"b","pId":"001003"},{"id":"001003002","name":"a","pId":"001003"}]';        
        var json='[{"id":"001","name":"总经理","pId":"0"},{"id":"001001","name":"人事部","pId":"001"},{"id":"001001001","name":"人事部A","pId":"001001"},{"id":"001001002","name":"人事部B","pId":"001001"}]';
        json=eval('('+json+')');
        var outHTML=CreateDepartTree(json);        
        $("#myDiv").html(outHTML);
    })
    </script></head>
<body>
    <div id="myDiv">
    </div>
    <input type="hidden" id="hiddenCurNode" />
</body>
</html>
改改采用json数据

Answer 12

如果集团统一系统的话 应该有组织结构表吧 上面应该有每个部门的上级部门是什么
用ajax+div 每次点击打开节点就请求生成该部门下的所有部门 这样不可以么？

Answer 13

以楼主能力，普通树形菜单自己都能写，其实再自己写一个这种组织结构图，也完全一样的。
在某种程度上说，也可能你的JS只需要小作改动（为了配合CSS），只要好好改改CSS就可以。
难道楼主只熟悉JS，对CSS不熟悉吗？可以让写CSS的同事给你做出一个样子来，你只要能动态生成结果就行了。

Answer 14

公司电脑里有个DIV做的，横向，纵向都有，明天上班我贴是来