使用 Ajax 的树视图和表格答案

【问题标题】：Treeview and Table with Ajax使用 Ajax 的树视图和表格
【发布时间】：2011-08-15 15:38:15
【问题描述】：

我想要一个带有 group by 和 ajax 功能的表格。

例子：

表头（每列都有排序功能）

+/-（要折叠或展开的图像）按 Element1 分组
- Element1 的所有元素的表格视图
+/-（要折叠或展开的图像）按 Element2 分组
- Element2 的所有元素的表格视图
+/-（要折叠或展开的图像）按 Element3 分组
- Element3 的所有元素的表格视图

如果您单击“按 Element1 分组”，则应该有一个 ajax 请求来加载 Element1 的所有元素的表格视图。 Element2 和 Element3 等也一样。

我希望你明白我想要什么:-)

最好的方法是什么？ Ajax、asp:Treeview等？

谢谢

【问题讨论】：

标签： jquery asp.net ajax listview treeview

【解决方案1】：

这很有可能，但我会使用 ListView 或 DataList 作为您的父容器。试一试：

<table width="595px">
    <asp:DataList BackColor="#ffffff" id="DataList1" DataKeyField="<ID>" OnItemDataBound="DataList1_ItemDataBound" runat="server" Width="100%">     
        <ItemTemplate>
           <tr>
              <td>
                  <asp:LinkButton ID="LinkButton1" runat="server" Text="+" OnCommand="LinkButton1_Command" CommandArgument='<%#Container.ItemIndex%>'></asp:LinkButton>    
              </td>
              <td><%#Eval("<COLUMN NAME>")%></td>
              <td><%#Eval("<COLUMN NAME>")%></td>
              <td><%#Eval("<COLUMN NAME>")%></td>
           </tr>
           <asp:Panel ID="pnlChildView" runat="server">
               <asp:DataList ID="DataList2" runat="server" Width="100%">
                   <ItemTemplate>
                       <tr>
                          <td><%#Eval("<CHILD OLUMN NAME>")%></td>
                          <td><%#Eval("<CHILD COLUMN NAME>")%></</td>
                          <td><%#Eval("<CHILD COLUMN NAME>")%></</td>                           
                       </tr>
                   </ItemTemplate>
               </asp:DataList>
           </asp:Panel>
        </ItemTemplate>
    </asp:DataList>
</table>

当用户点击 DataList1 中的 LinkButton/Button 时，执行如下操作：

protected void LinkButton1_Command(object sender, CommandEventArgs e)
{
    //pass index of item in command argument
    int itemIndex = Convert.ToInt32(e.CommandArgument);      

    //find the pnlChildView control
    Panel childViewPanel = (Panel)DataList1.Items[itemIndex].FindControl("pnlChildView");
    if (childViewPanel != null)
    {
        //toggle visibility of childViewPanel and bind child list if panel is visible

        if (childViewPanel.Visible)
        {
            DataList childList = childViewPanel.FindControl("DataList2");
            if (childList != null)
            {
                int keyValue = (int)DataList1.DataKeys[itemIndex];

                //bind the list using DataList1 data key value
                childList.DataSource = <DATA SOURCE>; //get data using keyValue
                childList.DataBind();
            }  
        }
    }
}

【讨论】：

【解决方案2】：

有几种产品可能适合您的需求：

还有其他人……

【讨论】：