用AJAX实现从数据库读取数据实现TreeView（二）

2、TreeView的实现:
     此部分参考了梅花雪的TreeView。
    TreeView.js

/**//*
    设置TreeView样式
*/
function setTreeStyle()
...{
    var style = "<style>";
    style += "DIV.zhTreeView DIV IMG{border: 0px solid #FFFFFF;} ";
    style += "DIV.zhTreeView DIV SPAN IMG{border: 0px solid #FFFFFF;} ";
    style += "DIV.zhTreeView DIV{ height: 20px;line-height: 20px;} ";
    style += "DIV.zhTreeView SPAN{ vertical-align:top; font-size: 10pt; height: 20px; color: #D4D0C8; cursor: default;overflow:hidden;} ";
    style += ".zhALink {  color: #000000;text-decoration:none} ";
    style += "</style>";
    document.write( style );
}
/**//*
TreeView控件脚本
Author:    zh
execRequestHandler:    RequestHandler对象执行AJAX请求数据的函数名称,其参数为ID值
iconArray:            节点图标图片,
    iconArray各元素说明:+└┌├
    0:    "|"
    1:    "├"
    2:    "└"
    3:    "+┌"
    4:    "+├"
    5:    "+└"
    6:    "-┌"
    7:    "-├"
    8:    "-└"
    9:    "folderopen"    //展开时的图标
    10:    "folderclose"    //收缩时的图标
    11:    无子分类的图标
    12:    空白图片
    13:    "+-"
    14:    "--";
    
targetFrame:        目录框架名称
colorMouseOver:        OnMouseOver事件时的背景色
*/

function OnMouseOverHandler( obj,objSpan )
...{    
    SetBackgroundColor( obj.MouseOverColor,objSpan );    
}

/**//*
    处理OnMouseOut事件
*/
 function OnMouseOutHandler( objSpan )
...{
    SetBackgroundColor( "",objSpan );
}

/**//*
    设置控件的背景颜色
*/
function SetBackgroundColor( colorBackground,objSpan )
...{
    var objStyle = objSpan.getAttribute( "style" );
    //如果Style属性存在
    if( objStyle != null && objStyle != undefined )
    ...{
        //设置背景颜色
        objStyle.backgroundColor = colorBackground;
    }
}
    
/**//*
    处理双击展开或收缩节点事件
    node:    双击的节点
    */
function ClickHandler ( node )
...{            
    var bExpand = node.Expand;        
    
    if( bExpand )    //展开,将要执行的是收缩,将的有子节点设置为关闭
    ...{
        CollapseAllSubNodes( node );        
    }
    else    //收缩,将要执行的是展开
    ...{
          var level = eval( node.Level );
                level += 1;
        //如果有数据，则直接展开
        if( !node.IsRefresh && node.hasChilds && level > 1 ) //没有数据，提取数据
        ...{                    
                //如果有子节点,创建一提示等待节点
                waitNode = node.Tree.AppendNode( "正在加载数据,请稍候...","","tmpNode","",false,level,1,true,false,node );
                node.appendChild( waitNode );
                //设置父节点
                node.ExecRequestHandler.parentNode = node;                    
                node.ExecRequestHandler.strID = node.Tag;
                node.IsRefresh = true;
                //请求数据
                node.ExecRequestHandler.RequestData();
        }
        else
        ...{
            ExpandNextNodes( node );
        }            
    }
    //设置当前节点状态
    node.Expand = !bExpand;
    setIndetiferIcon( node,!bExpand );
    setExpandCollapseImage( node,bExpand );
}
    
/**//*
    设置指定节点的标识图标
    node:    欲设置图标的节点
    bExpand:状态,true:展开,false:收缩
*/
setIndetiferIcon = function ( node,bExpand )
...{
    //获取node的img对象
    var imgObject = document.getElementById( "img_" + node.Tag );
    if( imgObject != null && imgObject != "undefined" )
    ...{
        if( bExpand )
        ...{            

            imgObject.src = node.IconArrays[ 9 ];
        }
        else
        ...{
            imgObject.src = node.IconArrays[ 10 ];
        }
    }
    node.Expand = bExpand;
}
    
/**//*
    展开指定节点的下一级子节点
    parentNode:    欲展开的节点
*/
ExpandNextNodes = function ( parentNode )
...{        
    var node = null;
    for( var i = 1; i < parentNode.childNodes.length; ++i )
    ...{
        node = parentNode.childNodes[i];
        node.style.display = "";            
    }         
}

/**//*
    收缩指定节点的所有子节点
    parentNode:    欲收缩的节点
*/
CollapseAllSubNodes = function ( parentNode )
...{
    var node = null;
    var expand = null;
    for( var i = 1; i < parentNode.childNodes.length; ++i )
    ...{
        node = parentNode.childNodes[i];
        node.style.display = "NONE";
        expand = node.getAttribute( "Expand" );
        if( node.hasChilds == true && expand != null && expand != undefined )
        ...{
            //设置图标
            setIndetiferIcon( node,false );
            setExpandCollapseImage( node,true );                
        }
        //递归调用
        CollapseAllSubNodes( node );            
    } 
}

/**//*
    设置展开或收缩图片
    node:    点击的节点
    state:    true:展开,false:收缩
*/
setExpandCollapseImage = function( node,state )
...{
    var headerImage = document.getElementById( "header_img_" + node.Tag );
    if( headerImage != null && headerImage != undefined )
    ...{            
        if( !state )    //展开
        ...{
            headerImage.src = node.IconArrays[ node.Tree.getIcons( false,node.Location,node.Level,node.hasNext ) ];
        }
        else    //收缩
        ...{
            headerImage.src = node.IconArrays[ node.Tree.getIcons( true,node.Location,node.Level,node.hasNext ) ];
        }
    }
}

function TreeView( execRequestHandler,iconArray,targetFrame,colorMouseOver )
...{
    this.execRequestHandler = execRequestHandler;
    this.iconArray = iconArray;
    this.targetFrame = targetFrame;
    this.colorMouseOver = colorMouseOver
    /**//*
        添加节点到父容器
        parentNode:            父节点容器
        nodeName:            节点名称
        urlText:            节点链接地址
        id:                    节点标识符
        hasChilds:            当前节点是否还有子节点
        displayStatus:        是否显示当前节点
        nodeLevel:            当前节点级别                
        nodeLocation:        当前节点在当前级别的排序位置:1起始位置,2:中间位置,3:末尾位置
        hasParent:            是否有父节点
        hasNext:            当前节点是否还有后续数据
        expand/collapse
    */    
    this.AppendNode = function( nodeName,urlText,id,displayStatus,hasChilds,nodeLevel,nodeLocation,hasParent,hasNext,parentNode )
    ...{    
        //检查父节点
        //parentNode = CheckParentNode( parentNode );
        //创建节点
        var newNode = document.createElement( "div" );
        newNode.noWrap = "True";
        newNode.id = "div_" + id;                        //节点ID标识符
        newNode.Tag = id;                                //节点标识符,根据此属性值提取数据
        newNode.style.display = displayStatus;            //节点是否显示
        newNode.setAttribute( "hasChilds",hasChilds );    //此节点是否有子分类，根据此值确定图标状态
        newNode.setAttribute( "Expand",false );            //节点是否展开，当发生Click事件时根据此值确定节点是展开还是收缩
        newNode.setAttribute( "Level",nodeLevel );        //节点级别
        newNode.setAttribute( "ExecRequestHandler",execRequestHandler );
        newNode.setAttribute( "IconArrays",iconArray );
        newNode.setAttribute( "MouseOverColor",colorMouseOver );
        newNode.setAttribute( "Location",nodeLocation );
        newNode.setAttribute( "hasNext",hasNext );
        newNode.setAttribute( "parent",parentNode );
        newNode.setAttribute( "hasParent",hasParent );    //是否有父节点
        newNode.setAttribute( "IsRefresh",false );      //是否已读取过子节点数据,如果已读取过,则不再读取
        newNode.setAttribute( "Tree",this );            //对当前对象的引用
        //newNode.setAttribute( "Location",nodeLocation );//节点位置
        var strText = "<NOBR><span id="span_" + id + "" url="" + urlText + "" onmouseover='OnMouseOverHandler( div_" + id + ",span_" + id + ")' onmouseout='OnMouseOutHandler( span_" + id + ")' >";
        if( nodeLevel > 1 )
        ...{
            strText += this.getSpaceIdentify( parentNode,nodeLevel );
        }
        
        var index = this.getIcons( hasChilds,nodeLocation,nodeLevel,hasNext );
        if( hasChilds == true )    //有子节点
        ...{
            strText += "<img id="header_img_" + id + "" align="center" src="" + iconArray[ index ]  + "" onclick='ClickHandler(div_" + id + ")' >";
        }
        else    //无子节点
        ...{
            strText += "<img id="header_img_" + id + "" align="center" src="" + iconArray[ index ] + "">";
        }
            
        strText += "<img id="img_" + id + "" align="center" src="" + iconArray[ this.getIndetiferIcon( hasChilds ) ] + "">";        
        strText += "<a href="" + urlText + "" target="" + targetFrame + "" class="zhALink">" + nodeName + "</a>";
        strText += "</span>";        
        newNode.innerHTML = strText;
        //添加到父节点    
        //parentNode.appendChild( parentNode );
        //返回新节点
        return newNode;
    }
    
    /**//*
        检查父节点
    */
    this.CheckParentNode = function( parentNode )
    ...{
        if( parentNode == null || parentNode == undefined )
        ...{
            var body = document.getElementById( "body" );
            parentNode = document.createElement( "div" );
            parentNode.setAttribute( "style","zhTreeView" );
        }        
        return parentNode;        
    }
    
    /**//*
        获取从当前节点开始一直到顶级节点的前导图片
        parentNode:    当前节点的父节点
        nodeLevel:    当前节点级别
    */
    this.getSpaceIdentify = function( parentNode,nodeLevel )
    ...{
        var result = "";
        //如果当前节点是第一级，则无前导图片，直接返回
        if( nodeLevel > 1 )
        ...{            
            //检查当前节点的父节点是否为空
            if( parentNode != null && parentNode != undefined )
            ...{
                //如果父节点有下一级节点
                if( parentNode.hasNext )
                ...{
                    result = "<img align="center" src="" + iconArray[0] + "">";
                }
                else
                ...{
                    result = "<img align="center" src="" + iconArray[12] + "">";                
                }
                //递归读取父节点
                if( parentNode.parent != null && parentNode.parent != undefined )
                ...{
                    result = this.getSpaceIdentify( parentNode.parent,parentNode.Level ) + result;
                }
            }
        }
        return result;
    }    

    /**//*
        处理OnMouseOver事件
    */
    TreeView.OnMouseOverHandler = function ( obj )
    ...{
        this.SetBackgroundColor( obj,colorOnMouseOver );        
    }
    
    /**//*
        处理OnMouseOut事件
    */
    TreeView.OnMouseOutHandler = function ( obj )
    ...{
        this.SetBackgroundColor( obj,"" );
    }
    
    /**//*
        设置控件的背景颜色
    */
    TreeView.SetBackgroundColor = function ( obj,colorBackground )
    ...{
        var objStyle = obj.getAttribute( "style" );
        //如果Style属性存在
        if( objStyle != null && objStyle != undefined )
        ...{
            //设置背景颜色
            objStyle.backgroundColor = colorBackground;
        }
    }
    
    /**//*
        获取标识图标索引
    */
    this.getIndetiferIcon = function ( hasChilds )
    ...{
        var index = 11;
        if( hasChilds == true )
        ...{
            index = 10;
        }
        return index;
    }
    
    /**//*
        获取节点的图标
        hasChilds:        是否有子分类
        location:        节点位置
        nodeLevel:        当前节点级别
        hasNext:        当前节点后是否还有同级数据
    */
    this.getIcons = function ( hasChilds,location,nodeLevel,hasNext )
    ...{        
        var index = 7;    //默认为"-├"
        if( hasChilds == true )
        ...{
            switch( location )
            ...{
                case 1:    
                    if( nodeLevel == 1 )
                    ...{
                        if( hasNext )
                        ...{
                            index = 3;
                        }
                        else
                        ...{
                            index = 13;
                        }
                    }
                    else
                        index = 4;    
                    break;            
                case 2:
                    index = 4;
                    break;
                case 3:
                    index = 5;
                    break;
            }
        }
        else
        ...{
            switch( location )
            ...{    
                case 1:
                    if( nodeLevel == 1 )
                    ...{
                        if( hasNext )
                        ...{
                            index = 6;;
                        }
                        else
                        ...{
                            index = 14;
                        }
                    }
                    else 
                        return 7;
                    break;
                case 2:
                    index = 7;
                    break;
                case 3:
                    index = 8;
                    break;
            }
        }
        return index;
    }
    
}    //end TreeView