使用链接按钮在网格视图中显示/隐藏网格视图

Question

我正在尝试显示问题的网格视图，其中一些问题具有更多详细信息，可以通过单击问题编号（链接按钮）来显示，网格视图将直接在问题编号下方显示这些详细信息。 我可以让它与图像而不是链接按钮一起使用，但我无法为每个问题显示图像，我必须使用行数据绑定代码打开/关闭它。这是它停止工作的时候。我尝试了几件事，使用 javascript 作为函数，尝试将其包含在 div 中，等等，但我被卡住了。我相信它在某个地方的 javascript 中，但我没有想法。我愿意使用图像或超链接，只要它可以打开/关闭并在单击时显示网格。谢谢！

后端：

Private Sub grdChanges_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles grdChanges.RowDataBound
    Select Case e.Row.RowType
        Case DataControlRowType.DataRow

Dim rowDat As Model.DocumentModel.DocChangeHistory = DirectCast(e.Row.DataItem, Model.DocumentModel.DocChangeHistory)

Dim lbuttonQuestionText As LinkButton = e.Row.FindControl("linkButtonQuestionNum") ' when click show detailed gridview

Dim lblQuestionText As Label = e.Row.FindControl("lblQuestionNum") 'No details available just show label

If rowDat.details_needed = 1 Then
        lblQuestionText.Visible = False
        lbuttonQuestionText.Visible = True
        Dim QuestionId As Long = convert.ToInt64(grdChanges.DataKeys(e.Row.RowIndex).Value) 
        Dim gvQuestionDetails As GridView = TryCast(e.Row.FindControl("gvQuestionDetails"), GridView)
        Using hDal As New HistoryDAL(CurrentUserId, ProjectID)
            'grabbing information from the database works fine
             gvQuestionDetails.DataSource = <blah Blah> 
             gvQuestionDetails.DataBind()
        End Using
Else  'no details needed just show regular question number as label not linkbutton
        lblQuestionText.Visible = True
        lbuttonQuestionText.Visible = false 
End If

ascx:

<asp:TemplateField HeaderText="#" ItemStyle-CssClass="col-400px" ItemStyle-Width="25px" SortExpression="QuestionNum"  >

<ItemTemplate>
     <asp:Label ID="lblQuestionNum" Font-Bold="true" runat="server" Text='<%# Bind("question_id")%>' Visible="false" ToolTip='<%#Eval("question_text")%>'></asp:Label>
    <asp:LinkButton ID="linkButtonQuestionNum" runat="server"  Text='<%#Bind("question_id")%>' Visible="false" BorderStyle-Right="None" ToolTip='<%#Eval("question_text")%>' />
<asp:Panel ID="pnlTableQuestion" runat="server" Style="display: none">                           
<asp:GridView ID="gvQuestionDetails" runat="server" AutoGenerateColumns="false" >
   <Columns>
      <asp:BoundField ItemStyle-Width="150px" DataField="col_name" HeaderText="Column" />
       <asp:BoundField ItemStyle-Width="150px" DataField="comments" HeaderText="Comments" />
   </Columns>
 </asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>

javascript：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script type="text/javascript">
   $("[src*=plus]").live("click", function () {
       $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + 
        $(this).next().html() + "</td></tr>")
        $(this).attr("src", "images/minus_Expand.jpg");
    });

$("[src*=minus]").live("click", function () {
        $(this).attr("src", "images/plus_Collapse.jpg");
        $(this).closest("tr").next().remove();
    });
</script>

Answer 1

我能够在 Javascript 中找到修复程序。最好的例子在这里：