JavaScript TreeView

这个JS数是对AJAX TreeView 里的进一步修改，可以 继承 Sbqcel_Tree  类 ,该类的构造函数需要显示树HTML的父节点的ID传进来,这里最好让树的实例名和父节点ID一致,因为有些事件方法需要用树实例去调用.
在继承类里需要注意的是:
1). 必须指定AJAX调用的地址:
2).必须实现方法 openNode  ,在这个方法里必须调用方法 openCloseNode
3).必须实现方法 getHtmlData , 在这个方法里必须调用方法 appendHtml
getHtmlData 是对AJAX获取到的数据进行处理,因为不同的需求获取到的是树HTML数据不一样
获取到数据后可能还用调用其它方法进行一些处理,所以对 openNode 单独实现

2008-03-06更新：修复一个页面只能有一个Tree实例的BUG,修改删除节点实现方式,新增更新结点方法(给出使用Json示例)

有几个方法是要用到的:

String.prototype.Replace  =  function(oldValue,newValue) 
{ 
     return   this .replace( new  RegExp(oldValue, " gi " ), newValue); 
}
String.prototype.Trim  =  function()
{
     return   this .replace( / ( ^ \s * ) | (\s * $) / g,  "" );
}

function getObjById(id)
{   
     if  ( typeof (id)  !=   " string "   ||  id  ==   "" )  return   null ;
     if  (document.getElementById)  return  document.getElementById(id);
     if  (document.all)  return  document.all(id);            
     try  { return  eval(id);}  catch (e){  return   null ;}
}

Sbqcel_Tree 类的代码如下 :

Sbqcel_Tree
function Sbqcel_Tree(objTreeID)
{
    this.treeName = objTreeID;
    this.objTree = getObjById(objTreeID);
    this.ajaxPath = "";
    this.IMG = [{id:1,imgSrc:"../images/open.gif",imgTitle:"点击折叠"},{id:2,imgSrc:"../images/close.gif",imgTitle:"点击展开"}];
    this.TagName = [{id:1,name:this.treeName+"Tbl"},{id:2,name:this.treeName+"Td"},{id:3,name:this.treeName+"Img"},{id:4,name:this.treeName+"Div"}];
    this.outBgColor = "#F8F8F8";
    this.clickBgColor = "#b6c0db";
    this.overBgColor = "#e7edee";            
    this.target = "_self";
    this.pageUrl = "#";                
    this.selectNodeID = "";//存放选中的节点值
    
    this.ID = function()
    {
        var _this = this; 
        return _this.selectNodeID != "" ? _this.selectNodeID.Replace(_this.TagName[1].name,"") : "";
    };
    
    this.openNode = function(objNode)
    {
        //该方法由继承类实现
        //实现方法里必须调用openCloseNode方法
    };
    
    this.getHtmlData = function(param)
    {
        //该方法由继承类实现
        //实现方法里必须调用appendHtml方法
    };
    //关闭/打开结点处理方法
    this.openCloseNode = function(objNode,param)
    {
        var _this = this; 
        var divObj = getObjById((objNode.id).Replace(_this.TagName[2].name,_this.TagName[3].name));
        if(divObj.id == this.TagName[3].name+"0")   return null;
        if(_this.nodeType == "0")   return divObj;
        if(objNode.title == _this.IMG[1].imgTitle)
        {  
            objNode.src = _this.IMG[0].imgSrc;
            objNode.title = _this.IMG[0].imgTitle;
            
            divObj.style.display = "block";        
            if(!divObj.innerHTML.length>0)
            { 
                divObj.innerHTML="loading.";
                _this.getHtmlData(param+divObj.id.Replace(_this.TagName[3].name,""));
            }
       }
       else
       {
           objNode.src = _this.IMG[1].imgSrc;
           objNode.title = _this.IMG[1].imgTitle;
           divObj.style.display = "none";
       }
       return divObj;
    };
    //调用AJAX获取数据
    this.callAjax = function(param)
    {
        var _this = this; 
        var ajaxPath = _this.ajaxPath;
        if(ajaxPath=="")  
        {
            alert("请指定AJAX取数据路径");
            return;
        }
        if(ajaxPath.indexOf('?')==-1)
        {
            ajaxPath = ajaxPath + "?";
        }
        var httpRequest;
        if (typeof XMLHttpRequest != 'undefined') 
        {
            httpRequest = new XMLHttpRequest();
        }
        else if (typeof ActiveXObject != 'undefined') 
        {
            httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
        }
        if (httpRequest) 
        {
            httpRequest.open('get', ajaxPath+param+"&"+Math.random(), false);
            httpRequest.send(null);
            if(httpRequest.status == 200)
            {
                return httpRequest.responseText;
            }
        }
    };
    //将HTML数据填充到数结点
     this.appendHtml = function(node,html)
     {
        var _this = this;
        var objNode = typeof node == "object" ? node : getObjById(this.TagName[3].name + (node == "-1" ? "0": node));
        objNode.innerHTML = html;
        if(html.length==0)
        {
            objNode.style.height = "1px";
            objNode.style.overflow="hidden";
        }
     };
    //点击结点事件
     this.tdClick = function(objNode,nodeType)
     {
        var _this = this;
        var tdNodeID = objNode.id.Replace(_this.TagName[2].name,_this.TagName[1].name);
        if(_this.selectNodeID == "")
        {
            _this.selectNodeID = tdNodeID;
        }
        else if(tdNodeID != _this.selectNodeID)
        {
            getObjById(_this.selectNodeID).style.backgroundColor = _this.outBgColor;
            _this.selectNodeID = tdNodeID;
        }
        _this.nodeType = nodeType;
        if(objNode.id.indexOf(_this.TagName[2].name)==0)
        {
             getObjById(tdNodeID).style.backgroundColor = _this.clickBgColor;
            _this.openNode(objNode); 
        }
        else
        {
            objNode.style.backgroundColor = _this.clickBgColor;
            _this.openNode(getObjById(objNode.id.Replace(_this.TagName[1].name,_this.TagName[2].name))); 
        }
     };
     //鼠标经过事件
     this.mouseOver = function(objNode)
     {
        var _this = this;
        if(objNode.id != _this.selectNodeID)
        {
            objNode.style.backgroundColor = _this.overBgColor;
        }
     }
     //鼠标移出事件
     this.mouseOut = function(objNode)
     {
        var _this = this;
        if( objNode.id != _this.selectNodeID)
        {
            objNode.style.backgroundColor = _this.outBgColor;
        }
     };
    //更新节点
    this.updateNode = function(nodeId,nodeName)
    {
        getObjById(this.TagName[1].name+nodeId).innerHTML = nodeName;
    };
    //删除节点
    this.delNode = function(nodeId)
    {
        var delNode = getObjById(this.TagName[0].name+nodeId);
        var parentNode = delNode.parentNode;
        parentNode.removeChild(getObjById(this.TagName[3].name+nodeId));
        parentNode.removeChild(delNode);        
        this.selectNodeID = "";
        if(parentNode.innerHTML.length ==0)
        {
            parentNode.style.height = "1px";
            parentNode.style.overflow="hidden";
        }
    };
    //获取指定结点ID的父结点
    this.getParentNode = function(nodeId)
    {   
        var _this = this;
        var currentNode = getObjById(_this.TagName[0].name + nodeId);
        if(currentNode!=null)
        {
            var parentDivNode = currentNode.parentNode;
            if(parentDivNode!=null && parentDivNode.id.indexOf(_this.TagName[3].name)==0)
            {
                return parentDivNode;
            }
        }
        return null;
    }
    //删除父结点下的所有结点
    this.deleteParentAllChild = function(nodeId)
    {
        var _this = this;
        var parentNode = _this.getParentNode(nodeId);
        if(parentNode != null)
        {
            parentNode.innerHTML = "";
            _this.selectNodeID = parentNode.id.Replace(_this.TagName[3].name,_this.TagName[1].name);
            var imgObj = getObjById(_this.selectNodeID.Replace(_this.TagName[1].name,_this.TagName[2].name));
            imgObj.src = _this.IMG[nodeId == "0"?0:1].imgSrc;
            imgObj.title = _this.IMG[nodeId == "0"?0:1].imgTitle;
        }
    }
    //更新结点
    this.refreshNode = function(nodeId)
    {
        var _this = this;
        var currentNode = getObjById(_this.TagName[3].name + nodeId);
        if(currentNode != null)
        {
            currentNode.innerHTML = "";
            var imgObj = getObjById(_this.TagName[2].name + nodeId);
            imgObj.src = _this.IMG[1].imgSrc;
            imgObj.title = _this.IMG[1].imgTitle;
            currentNode.style.display = "none";
            _this.openNodeByNodeId(nodeId);            
            imgObj.src = _this.IMG[0].imgSrc;
            imgObj.title = _this.IMG[0].imgTitle;
            currentNode.style.display = "block";
            currentNode.style.height = "";
        }
    }
}

可下载示例 下载Demo
在示例里将要调用的方法和方法所在的类名传递回服务器,在服务器端通过反射执行相关的方法:

using  System;
using  System.Web;
using  System.Reflection;

///   <summary>
///  AjaxUtil 的摘要说明
///   </summary>
public   class  AjaxUtil
{
     private  HttpContext httpContext;
     public  AjaxUtil( HttpContext httpContext )
    {
         this .httpContext  =  httpContext;
    }

     public   object  callMethod(  string  className, string  methodName )
    {
        Type type  =  Type.GetType( className );
         object  dObj  =  Activator.CreateInstance( type ,  new   object [ ] { httpContext } );
        MethodInfo method  =  type.GetMethod( methodName );
         return  method.Invoke( dObj ,  null  );
    }
}

转载于:https://www.cnblogs.com/doll-net/archive/2007/08/05/javascripttreeview.html