学步园

接上篇用于Web的TreeListView控件(多列的树形控件)

这次增加了线条，线条还是比较完美的，行高可以任意调整 ：）

如下图：

 

下载演示

 

如何使用，请下载演示，看下就清楚了。

下面粘贴部分使用代码：

 

 

Employee e1 = new Employee("Nancy", "Davalio");
            Employee e2 = new Employee("Andrew", "Fuller");
            Employee e3 = new Employee("Huang", "Hurry");
            Employee e4 = new Employee("Jin", "Faster");
            Employee e5 = new Employee("aa", "dd");
            Employee e6 = new Employee("bb", "aa");

            TreeListNode root = new TreeListNode();
            root.Text = "root";
            root.DataSource = e1;
            root.ImageUrl = "knowledge.gif";

            TreeListNode node = new TreeListNode();
            node.Text = "node1";
            node.DataSource = e2;
            node.ImageUrl = "knowledge.gif";

            TreeListNode node12 = new TreeListNode();
            node12.Text = "node12";
            node12.DataSource = e3;
            node12.ImageUrl = "knowledge.gif";

            TreeListNode node13 = new TreeListNode();
            node13.Text = "node13";
            node13.DataSource = e5;
            node13.ImageUrl = "knowledge.gif";

            TreeListNode node2 = new TreeListNode();
            node2.Text = "node2";
            node2.DataSource = e4;
            node2.ImageUrl = "knowledge.gif";

            node.ChildNodes.Add(node12);
            root.ChildNodes.Add(node);
            root.ChildNodes.Add(node2);

            node.ChildNodes.Add(node13);

            this.TreeListView1.IsShowRootNode = true;
            this.TreeListView1.DataSource = root;
            this.TreeListView1.DataBind();

 

 

 

 <Home:TreeListView ID="TreeListView1" runat="server" EnableViewState="false">
    <HeaderTemplate>
    <table width="500" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999">
    <tr height="30" bgcolor="#FFFFFF">
    <td>ID</td>
    <td width="120px">Text</td>
    <td width="80px">FirstName</td>
    <td width="80px">LastName</td>
    </tr>
    </HeaderTemplate>
    <ItemTemplate>
    <tr <%# ((TreeListNode)Container.DataItem).TreeTr%> bgcolor="#FFFFFF">
        <td height="50" style="padding-left:0px;"><%# ((TreeListNode)Container.DataItem).TreeImage%></td>
        <td><%# ((TreeListNode)Container.DataItem).Text%></td>
        <td><%# ((Employee)((TreeListNode)Container.DataItem).DataSource).FirstName%></td>
        <td><%# ((Employee)((TreeListNode)Container.DataItem).DataSource).LastName%></td>
     </tr>
    </ItemTemplate>
    <FooterTemplate>
    </table>
    </FooterTemplate>
    </Home:TreeListView>

 

 2008-8-18补充下，折叠部分的js代码，还是比较的精炼的（还可以记住子节点状态）

 

<script>
function gid(id){return document.getElementById(id);}
function TreeNodeClick(obj)
{
    var strDisplay=obj.src.indexOf("Collapse.gif")>0 ? "none":"";
    var children=gid(obj.id.replace("img_","")).childids;
    if (children=="") return;
    var arr=children.split(",");
    for(var i=0,j=arr.length;i<j;i++)
    {
        gid(arr[i]).style.display=strDisplay;
        ExpandTreeNode(gid(arr[i]),strDisplay);
    }
    if (strDisplay=="none")
        obj.src=obj.src.replace("Collapse.gif","Expand.gif");
    else
        obj.src=obj.src.replace("Expand.gif","Collapse.gif");
}
function ExpandTreeNode(obj,mode)
{
    if(obj==null) return;
    var img=gid("img_"+obj.id)
    if(img==null) return;
    var strDisplay=img.src.indexOf("Collapse.gif")>0 ? "":"none";
    if (strDisplay=="none" && mode=="block") return;
    var objchildren=gid(obj.id.replace("img_",""));
    if(objchildren==null) return;
    var children=objchildren.getAttributeNode("childids").nodeValue;
    if (children=="") return;
    var arr=children.split(",");
    for(var i=0,j=arr.length;i<j;i++)
    {
        gid(arr[i]).style.display=mode;
        ExpandTreeNode(gid(arr[i]),mode);
    }
}
</script>