一个树控件类的实现---打造自己的树控件

原因：

当前的树控件或多或少存在各种各样的问题，有样式的，有速度的，与IE7兼容性问题的。而且因为没有源码，处理这些问题时非常麻烦。通常，在使用树控件时只需使用很简单的一些功能，收缩/展开，链接等。即然如此，为什么不可以自己实现一个满足这些简单功能的树呢？自已的东西，就算再烂，出现问题时，也知道怎么处理呀。

设计思路：

树控件最后解析成HTML代码的时候是什么呢？有的控件是DIV，有的是Table，本人认为用table更好控制。所以我的方案采取直接绘表格的方式实现，至于添加子节点，其实也就是表格中套表格了。

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Text;

using System.Text.RegularExpressions;

namespace Shanqian.Component

代码说明：

图标文件：0.gif;e.gif;c.gif放在images文件夹中，在需要用该树的时候加到工程中。这三个图标文件山前是从MSDN帮助中的树控件上下载下来的。

图标的点击事件方法是：imgclick(this),这个方法名已经写死了。山前比较懒不想做得太灵活。够用原则。

该方法就是点击图标实现展开/收缩效果。

方法具体如下：

function imgclick(obj)

{

var ii=obj.parentElement.id;

var di;

di = window.document.getElementById("tb"+ii).style.display;

if(di=="")

{

window.document.getElementById("tb"+ii).style.display = "none";

var img =window.document.getElementById("img"+ii).src;

if(img.indexOf("images/e.gif")<0)

{

window.document.getElementById("img"+ii).src = "images/c.gif";

}

}

else if(di=="none")

{

window.document.getElementById("tb"+ii).style.display = "";

var img =window.document.getElementById("img"+ii).src;

if(img.indexOf("images/e.gif")<0)

{

window.document.getElementById("img"+ii).src = "images/o.gif";

}

}

}

这个类怎么用呢？我们的设计思想是以直接绘表格的方式绘制树的。绘好之后肯定就是一段HTML代码。如果要请树在界面上显示出来。只需将树的Nodestring输出到界面即可。

给个示例

示例：

您可以在Page_load中输出Nodestring。也可以重载Rendercontrol方法

protected void Page_Load(object sender, EventArgs e)

{

treenode tnf = new firstNode();

tnf.Text = "一级节点一";

tnf.IsExpand = true;

tnf.Script = "nodeclick(this);";

treenode tnc = new childNode();

tnc.Text = "二级节点一";

tnc.Script = "nodeclick(this);";

treenode tnc2 = new childNode();

tnc2.Text = "二级节点二";

tnc2.Script = "nodeclick(this);";

treenode tnc3 = new childNode();

tnc3.Text = "三级节点一";

tnc3.Script = "nodeclick(this);";

tnc.addChildNode(tnc3);

tnf.addChildNode(tnc);

tnf.addChildNode(tnc2);

this.Response.Write(tnf.Nodestring.ToString());

}

其中nodeclick(this)的代码你可以写在aspx文件夹中。代码如下：

var selectobj;

function nodeclick(obj)

{

var ii=obj.parentElement.id;

var di;

di = window.document.getElementById("tb"+ii).style.display;

if(di=="")

{

window.document.getElementById("tb"+ii).style.display = "none";

var img =window.document.getElementById("img"+ii).src;

if(img.indexOf("images/e.gif")<0)

{

window.document.getElementById("img"+ii).src = "images/c.gif";

}

}

else if(di=="none")

{

window.document.getElementById("tb"+ii).style.display = "";

var img =window.document.getElementById("img"+ii).src;

if(img.indexOf("images/e.gif")<0)

{

window.document.getElementById("img"+ii).src = "images/o.gif";

}

}

if(selectobj!=null)

{

selectobj.style.backgroundColor = "#FFFFFF";

}

obj.style.backgroundColor = "#666666";

selectobj = obj;

}

总结：

该类提供了节点的点击事件，而且点击事件的具体方法用户可以随意定制。适用性较强。

而且采用直接绘表格的方式实现，进行样式处理会非常容易，也不会出现与浏览器兼容的问题。