ASP.NET GridView Bootstrap 3 手风琴

Question

我遇到了一个问题，需要帮助。我创建了一个 gridview，它指定了用户可以单击并添加到他的购物车的可用服务列表。

我似乎无法弄清楚如何使用 bootstrap 3 我可以将服务列表分组到不同的组。

下面指定了当前没有分组的网格视图的代码

我想做的是使用 bootstrap 3 accordion bootstrap 3 accordion

对这些数据进行分组

我以前从未这样做过，我不知道如何将网格分组到手风琴

非常感谢任何帮助网格的屏幕截图指定如下

<asp:GridView runat="server" ID="GridViewPaslauguSarasas" CssClass="mGrid col-xs-12 col-sm-12 col-md-12 col-lg-12"
    PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" AutoGenerateColumns="False" AllowPaging="false">
    <Columns>
        <asp:TemplateField HeaderText="Paslaugos pavadinimas">
            <ItemTemplate>
                <asp:HiddenField ID="hdn_pasl_ID" Value='<%# DataBinder.Eval(Container, "DataItem.pasl_kodas") %>' runat="server" />
                <asp:Label ID="lbl_pasl_pav" Text='<%# DataBinder.Eval(Container, "DataItem.pasl_pav") %>' runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Paslaugos aprašymas">
            <ItemTemplate>
                <asp:Label ID="lbl_pasl_apras" Text='<%# DataBinder.Eval(Container, "DataItem.pasl_apras") %>' runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Paslaugos kaina, Eur.">
            <ItemTemplate>
                <asp:Label ID="lbl_pasl_kaina" Text='<%# DataBinder.Eval(Container, "DataItem.pasl_kaina") %>' runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Užsakomas kiekis">
            <ItemTemplate>
                <asp:TextBox ID="txt_pasl_kiekis" runat="server" EnableViewState="true" Text='<%# DataBinder.Eval(Container, "DataItem.kiekis") %>'></asp:TextBox>
                <cc1:numericupdownextender id="ajax_pasl_kiekis" runat="server" targetcontrolid="txt_pasl_kiekis" width="100" refvalues="" servicedownmethod="" serviceupmethod="" targetbuttondownid="" targetbuttonupid="" minimum="0" maximum="50" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <EmptyDataTemplate>
        <asp:Label ID="lbl_empty_grid" runat="server" Text="Įrašų nerasta" Font-Bold="true"></asp:Label>
    </EmptyDataTemplate>
</asp:GridView>

Answer 1

如果要拆分行，则不能将 GridView 与手风琴一起使用。您必须使用 <div> 元素创建所有内容，如您提供的 link 所示。您可以为此使用 Repeater。

<div class="panel-group" id="accordion">

    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse<%# Container.ItemIndex %>">Collapsible Group <%# Container.ItemIndex + 1 %></a>
                    </h4>
                </div>
                <div id="collapse<%# Container.ItemIndex %>" class="panel-collapse collapse <%# Container.ItemIndex == 0 ? "in" : "" %>">
                    <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </div>
                </div>
            </div>

        </ItemTemplate>
    </asp:Repeater>

</div>

但是如果你真的要用GridView，就得用多个

<div class="panel-group" id="accordion">

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">

                <asp:GridView ID="GridViewPaslauguSarasas_1" runat="server"></asp:GridView>

            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
            </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">

                <asp:GridView ID="GridViewPaslauguSarasas_2" runat="server"></asp:GridView>

            </div>
        </div>
    </div>

</div>

ASP.NET GridView Bootstrap 3 手风琴

ASP.NET GridView Bootstrap 3 accordion

asp.net

gridview

bootstrap-accordion