这个JS数是对类 ,该类的构造函数需要显示树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, “”);
}
if (document.getElementById) return document.getElementById(id);
if (document.all) return document.all(id);
try {return eval(id);} catch(e){ return null;}
}
{
return this.replace(new RegExp(oldValue,“gi“), newValue);
}
String.prototype.Trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, “”);
}
function getObjById(id)
{
if (document.getElementById) return document.getElementById(id);
if (document.all) return document.all(id);
try {return eval(id);} catch(e){ return null;}
}
Sbqcel_Tree 类的代码如下 :
{
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;
}
{
Type type = Type.GetType( className );
object dObj = Activator.CreateInstance( type , new object[ ] { httpContext } );
MethodInfo method = type.GetMethod( methodName );
return method.Invoke( dObj , null );
}
}
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 );
}
}
