ASP.net GridView 的一列中的手风琴

Question

我有这样的要求，我需要将手风琴放在 Gridview 列中，每当用户点击手风琴的 header 它应该打开和关闭。

我在 Google 上搜索了解决方案，但我找不到实际的解决方案，而是每个人都解释了 JQuery 手风琴仅在转发器中。

有谁 body 可以帮我解决这个问题吗？

<asp:GridView>
<asp:TemplateField HeaderText="Accordion"
     HeaderStyle-Font-Bold="true"
     HeaderStyle-ForeColor="Black">
     <ItemTemplate>
         **This is where I need to display Accordion**           
     </ItemTemplate>

</asp:TemplateField>
</asp:GridView>

Answer 1

这对我有用。

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
    <div style="width: 100%; height: 511px; border: none; overflow: auto;">
        <asp:GridView ID="GridView2"
            runat="server"
            AutoGenerateColumns="False"
            GridLines="None"
            AllowSorting="True"
            CssClass="tbl_body"
            CellPadding="0"
            CellSpacing="0"
            ShowHeader="false"
            Width="100%">
            <Columns>
                <asp:HyperLinkField DataNavigateUrlFields="runId" DataTextField="runId" HeaderText="RunID" DataNavigateUrlFormatString="RunAnalysis.aspx?runId={0}">
                    <ItemStyle Width="20%" />
                </asp:HyperLinkField>
                <asp:BoundField DataField="prodDate" HeaderText="Date" DataFormatString="{0:MM/dd/yy}">
                    <ItemStyle Width="20%" />
                </asp:BoundField>
                <asp:BoundField DataField="buildNumber" HeaderText="Build Number">
                    <ItemStyle Width="20%" />
                </asp:BoundField>
                <asp:HyperLinkField DataNavigateUrlFields="PercentAnalysed" DataTextField="PercentAnalysed" HeaderText="Percent Analysed">
                    <ItemStyle Width="20%" />
                </asp:HyperLinkField>
                <asp:TemplateField HeaderText="Accordion"
                    HeaderStyle-Font-Bold="true"
                    HeaderStyle-ForeColor="Black">
                    <ItemTemplate>
                        <div class="accordion">
                            <h3>Section 1</h3>
                            <div>
                                <p>
                                    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                                </p>
                            </div>
                            <h3>Section 2</h3>
                            <div>
                                <p>
                                    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet   
                                </p>
                            </div>
                            <h3>Section 3</h3>
                            <div>
                                <p>
                                    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.   
                                </p>
                                <ul>
                                    <li>List item one</li>
                                    <li>List item two</li>
                                    <li>List item three</li>
                                </ul>
                            </div>
                            <h3>Section 4</h3>
                            <div>
                                <p>
                                    Cras dictum. Pellentesque habitant morbi tristique senectus et netus  mauris vel est.
                                </p>
                                <p>
                                    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
                                </p>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    <script>
        $(function () {
            $(".accordion").accordion();
        });
    </script>
</asp:Content>

希望对您有所帮助。

Answer 2

您可以通过在 GridView 中添加一个隐藏的 ItemTemplate 和 Expand/Collapse 图像来代替手风琴面板来实现相同的功能。 GridView Html 看起来像

<Columns>
   <asp:TemplateField>
       <ItemTemplate>
           <a href="javascript:switchViews('div<%# Eval("Id") %>', 'one');">
              <img id="imgdiv<%# Eval("Id") %>" alt="Click to show/hide" border="0" src="../Images/expand_button.png" />
              </a>
       </ItemTemplate>
       <ItemTemplate>
         </td></tr>
          <tr>
             <td colspan="100%">
                 <div id="div<%# Eval("Id") %>" style="display: none; position: relative; left: 25px;">
                    <!-- Your Content Here -->
                  </div>
               </td>
              </tr>
         </ItemTemplate>

而您的 javascript 代码是，

function switchViews(obj, row) {
            var div = document.getElementById(obj);
            var img = document.getElementById('img' + obj);

            if (div.style.display == "none") {
                div.style.display = "inline";
                if (row == 'alt') {
                    img.src = "../Images/expand_button_down.png"; 
                }
                else {
                    img.src = "../Images/expand_button_down.png";
                }
            }
            else {
                div.style.display = "none";
                if (row == 'alt') {
                    img.src = "../Images/expand_button.png"; 
                }
                else {
                    img.src = "../Images/expand_button.png";
                }
                img.alt = "Expand to show orders";
            }
        }

Answer 3

感谢大家发布对我的问题的回答。我已经解决了我的问题并实现了它。我在这里发布我的答案，如果您在这里发现任何不当之处，请发表评论。

首先，我向我的 GridView 添加了一个 OnRowDataBound 事件。

然后我在 asp:TemplateField[=25 中放置了一个 asp:Panel 控件=] 在我的 GridView 中如下所示：

<asp:TemplateField HeaderText="Accordion" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="Black"> <ItemTemplate> <div id="accordion2" class="panel-group"> <asp:Panel ID="pnl" runat="server"> </asp:Panel> </div> </ItemTemplate> </asp:TemplateField>

然后在后面的代码中，我编写了以下代码来将 Accordion 添加到此面板。

protected void LoadAccordion(object sender, GridViewRowEventArgs e) { DataRowView drv = e.Row.DataItem as DataRowView; if (e.Row.RowType == DataControlRowType.DataRow) { Panel p = (Panel)e.Row.FindControl("pnl"); p.Controls.Add(new LiteralControl("<div class='panel'><div class='panel-heading'><a href='#collapse" + e.Row.RowIndex + "' data-parent='#accordion2' data-toggle='collapse' class='accordion-toggle collapsed'>Statistics</a></div><div style='height: 0px;' class='panel-collapse collapse' id='collapse" + e.Row.RowIndex + "'><div class='panel-body'>Sample Text Here...</div></div></div>")); } }

ASP.net GridView 的一列中的手风琴

Accordion in a column of ASP.net GridView

c#

jquery

asp.net

gridview

accordion