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

原因：
当前的树控件或多或少存在各种各样的问题，有样式的，有速度的，与IE7兼容性问题的。而且因为没有源码，处理这些问题时非常麻烦。通常，在使用树控件时只需使用很简单的一些功能，收缩/展开，链接等。即然如此，为什么不可以自己实现一个满足这些简单功能的树呢？自已的东西，就算再烂，出现问题时，也知道怎么处理呀。
设计思路：
树控件最后解析成HTML代码的时候是什么呢？有的控件是DIV，有的是Table，本人认为用table更好控制。所以我的方案采取直接绘表格的方式实现，至于添加子节点，其实也就是表格中套表格了。
1、直接画Table，每个节点就是表格的一行。
2、每行分为两列，图标为一列，显示文本为一列。
3、第一级节点与子节点分开实现。
4、实现节点可以添加子节点方法。
5、提供点击事件处理接口，具体的点击方法在使用时由用户自己实现。


效果演示:



类代码：

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帮助中的树控件上下载下来的。
图标的点击事件方法是：),这个方法名已经写死了。山前比较懒不想做得太灵活。够用原则。
该方法就是点击图标实现展开/收缩效果。
方法具体如下：
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中输出。也可以重载Rendercontrol方法

    protected void Page_Load(object sender, EventArgs e)
    }

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

总结：
该类提供了节点的点击事件，而且点击事件的具体方法用户可以随意定制。适用性较强。
而且采用直接绘表格的方式实现，进行样式处理会非常容易，也不会出现与浏览器兼容的问题。