Question

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

我似乎无法弄清楚如何使用引导程序3将服务列表分为不同的组。

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

我想要做的是使用bootstrap 3手风琴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>元素来创建所有内容。您可以为此使用中继器。

<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手风琴

1 个答案: