Treeview и таблица с Ajax

Question

Я хотел бы иметь таблицу с функциями group by и ajax.

Пример:

Заголовок таблицы (с функцией сортировки в каждом столбце)

• + / - (изображение, чтобы свернуть или развернуть) Группировать по Элементу1
  • представление таблицы всех элементов Элемента1
• + / - (изображение, чтобы свернуть или развернуть)Группировка по Element2
  • табличное представление всех элементов Element2
• + / - (изображение, чтобы свернуть или развернуть) Группировка по Element3
  • табличное представление извсе элементы Element3

Если вы нажмете «Группировать по элементу1», то должен быть ajax-запрос для загрузки табличного представления всех элементов Element1.То же самое для Element2 и Element3 и т. Д.

Я надеюсь, вы понимаете, что я хочу: -)

Какой лучший способ сделать это?Ajax, asp: Treeview и т. Д .?

Спасибо

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

И когда пользователь нажимает кнопку LinkButton / Button в DataList1, выполните что-то вроде этого:

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

Answer 2

Существует несколько продуктов, которые могут удовлетворить ваши потребности:

• JQTreeTable
• Tree и TreeTable
• jQuery treeTable

и другие ...