如何实现一个带有group by和ajax功能的表？

我想要一个带有group by和ajax功能的表，例如：

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

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

如果单击“按Element1分组”，则应该有一个ajax请求来加载Element1的所有元素的表视图，Element2和Element3同样如此。 执行此操作的最佳方法是什么？ Ajax、asp:Treeview？

There are several products which will possibly suit your needs:

• JQTreeTable
• Tree and TreeTable
• jQuery treeTable

and others...

That's very possible, but I would use a ListView or DataList as your parent container. Give this a shot:

<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>

And when the user clicks the LinkButton/Button in DataList1, do something like this:

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();
            }  
        }
    }
}