学步园

先看图：

这个功能可以用后台管理中（区域的绑定，商品大类，商品小类，商品信息的管理）；

实现原理如下：

先建设一个数据表如：高校栏目表

截图如下：

ParentID保存父ID的节点，ChildID保存子ID的节点，

如果某一行中的ParentID不为空，子节点为空，说明此行为父节点；而子节点的ParentID对应相应的父节点。

<div>
            <asp:DataList ID="DataList1" runat="server" OnItemDataBound="DataList1_ItemDataBound"  >
                <HeaderTemplate>
                    <table>
                        <thead style="background-color:Silver">
                            <td width="50px">
                                操作</td>
                            <td  width="100px">
                                名称</td>
                            <td >
                                时间</td>
                        </thead>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr style="background-color:#cccccc">
                        <td align="left" width="50px">
                            <img src="expand.gif" onclick="expand('id1_<%#Eval("id") %>')" />
                        </td>
                        <td align="left" width="100px">
                            <%#Eval("Name") %>
                        </td>
                        <td align="left" width="100px">
                            <%#Eval("DataOf", "{0:yyyy-MM-dd}")%>
                        </td>
                    </tr>
                    <tr id="id1_<%#Eval("id") %>" style="display:none; background-color:InfoBackground" >
                        <td colspan="3">
                            <asp:DataList ID="DataList2" runat="server">
                                <ItemTemplate>
                                    <tr>
                                        <td align="left" width="50px">
                                            <img src="collapse.gif" />
                                        </td>
                                        <td align="left" width="100px">
                                            <%#Eval("Name") %>
                                        </td>
                                        <td align="left" width="100px">
                                            <%#Eval("DataOf","{0:yyyy-MM-dd}") %>
                                        </td>
                                    </tr>
                                </ItemTemplate>
                            </asp:DataList>
                        </td>
                    </tr>
                </ItemTemplate>
                <FooterTemplate>
                    </table>
                </FooterTemplate>
            </asp:DataList>
        </div>
 
可以看到 用到了两个DataList数据控件，且用table布局（用DIV布局也可以）；
最主要的一点 可以看到 第二个<tr>标签中 设置其id="id1_<%#Eval("id")%>",这是因为符合条件的数据可能显示多行，只能给其起一个不同的名字作为id，
为方便操作，所以就用这种方式。
 
//js代码如下：
 
function expand(a)
    {
    if(document.getElementById(a).style.display=='none')
    {document.getElementById(a).style.display='block';
    }
    else
    {document.getElementById(a).style.display='none';
    }
    }
    
 
后台代码就很平常啦！，在OnItemDataBound事件中，做了对第二个datalist数据控件的绑定操作。
这个不会出现展开或折叠节点是，发生数据的回发。