JavaScript TreeView控件的使用方法实例详细源码介绍，本文的JS数是对AJAX TreeView 里的修改，能够继承 Sbqcel_Tree  类 ,Sbqcel_Tree  类的构造函数需显示树HTML的父节点的ID传进来,最好将树的实例名以及父节点ID保持一致,原因是有些事件方法需要用树实例去调用.
继承类里需要注意的问题是:

1).必须实现方法 openNode  ,在这个方法里必须调用方法 openCloseNode
2). 必须指定AJAX所调用的地址:
3).必须实现方法 getHtmlData , 方法里必须调用方法 appendHtml 。getHtmlData 对AJAX获取的数据进行处理,不同的需求获取到的是树HTML数据不一样 ，获取到数据后可能还用调用其它方法进行一些处理,所以对 openNode 单独实现
有几个方法是要用到的:

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 类的代码如下 :
function Sbqcel_Tree(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:"Tbl"},{id:2,name:"Td"},{id:3,name:"Img"},{id:4,name:"Div"}];
this.outBgColor = ”#F8F8F8″;
this.clickBgColor = ”#b6c0db”;
this.overBgColor = ”#e7edee”;
this.target = ”_self”;
this.pageUrl = ”#”;
this.selectNodeID = ”";//存放选中的节点值
this.html = ”";

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 == ”Div0″)   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;
};

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

this.appendHtml = function(nodeId,html)
{
var _this = this;
var objNode = getObjById(nodeId == ”-1″ ? ”Div0″: ”Div”+nodeId);
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.delNode = function(nodeId)
{
var delNode = getObjById(this.TagName[0].name+nodeId);delNode.parentNode.removeChild(delNode);
this.selectNodeID = ”";
};
this.updateNode = function(nodeId,nodeName)
{
getObjById(this.TagName[1].name+nodeId).innerHTML = nodeName;
};
}
可下载示例 下载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 );
}
} 本文链接地址: JavaScript TreeView控件的使用方法实例详细源码介绍