Question

我有一个要求，我需要将Accordion放在Gridview列中，每当用户点击手风琴的标题时，它应该打开和关闭。

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

任何身体可以帮助我吗？

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

Check the image

希望这有帮助。

Answer 2

您可以通过在GridView ItemTemplate和Expand / Collapse图像中添加隐藏来实现相同的功能，而不是Accordion面板。 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

感谢大家发布我的问题的答案。我已经解决了我的问题并实现了它。在这里，我发布了我的答案，如果你发现任何不当的地方，那么plz也会留下相同的评论。

首先，我向GridView添加了<strong> OnRowDataBound 事件。

然后我在GridView中的 asp：TemplateField 中放置了一个 asp：Panel 控件，如下所示：

<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添加到此Panel。

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的一列中

3 个答案: