在GridView中嵌套面板 [英] Nesting A Panel Within a GridView

问题描述

我需要显示与gridview记录关联的数据。



我试图使用 http://www.aspsnippets.com/Articles/Nested-GridView-Example-in-ASPNet-using-C-and-VBNet.aspx 替换带有标签的嵌套gridview无济于事：

 <  表    id   =  tblShiftSumry >  
 < ;   tr  >  
  <   td     class   =  summaryCost >  
 <   asp：GridView     ID   =  gvShift    runat   =  server    AutoGenerateColumns   =  False   高度  =  95px  
   
                                                          样式  =  margin-right：1px   宽度  =  790px    OnRowDataBound   =  OnRowDataBound >  
 <  列 >  
 <   asp：TemplateField     HeaderText   = 频率 >  
 &l t;   itemtemplate  >  
 <   img     alt   =     style   =  cursor：pointer    src   =  Resources / Images / plus.png    /  >  
 <   asp：Panel     ID   =  pnlOrders    runat   = 服务器   样式  =  display：none >  
 <   asp：标签    ID   =  lblMsg    runat   =  server   文本  = 测试1 ... 2 ... 3 >  
 
 <   / itemtemplate  >  
 <   HeaderStyle    宽度  =  15px    /  >  
 
 <   asp：TemplateField     HeaderText   =  Shift＃ >  
 <   itemtemplate  >  
 <   asp：TextBox     ID   =  txtShftNo    runat   =  server    ReadOnly   =  True    
   
          < span class =code-attribute>                                                      < span class =code-attribute>                  文字  ='  <％＃DataBinder.Eval（Container.DataItem，  Shift＃）％>'  
   
                                                                                  宽度  =  <％＃ 25 ％>    CssClass   =  summaryCost >  
 <   / itemtemplate  >  
 <   HeaderStyle    宽度  =  75px    /  >  
 
 
 
在<   head  > 部分，我放置：
 <   script     src   = 〜/ Scripts / jquery-1.9.1.js    type   =  text / javascript >  
 $（  [src * = plus]）。live（  click，  function （）{
 $（ this ）。nearest（  tr）。after（  + $（ this ）。next（）。html（）+  ）
 $（ this ）。attr（  src， 〜 /resources/images/minus.png）; 
}）; 
 $（  [src * = minus]）。live（ 点击， function （）{
 $（ this ）。attr（  src， 〜/ resources / images / edit.png）; 
 $（  this ）。nearest（  tr ）.next（）。remove（）; 
}）; 
 <   /   script  >  

代码后面的部分，我得到一个错误，pnlOrders在当前上下文中不存在：

  protected   void  OnRowDataBound（ object  sender，GridViewRowEventArgs e）
 {
  if （e.Row.RowType == DataControlRowType.DataRow）
 {
 pnlOrders.visible = 真; 
} 
} 
 

我需要嵌套面板（而不是标签）将包含gridview中的表格，单选按钮，文本框和复选框。当用户点击第一列中的加号或减号时，将显示/隐藏该数据。

解决方案

（ [src * = plus]）。live（ < span class =code-string> click， function （）{

（ this ）。nearest（ tr）。after（ +

（此）。next（）。html（）+ ）

I need to show data associated with a record of a gridview.

I tried to employ the technique used in "http://www.aspsnippets.com/Articles/Nested-GridView-Example-in-ASPNet-using-C-and-VBNet.aspx" replacing the nested gridview with a label, to no avail:

<table id="tblShiftSumry">
                <tr>
                    <td class="summaryCost">
                        <asp:GridView ID="gvShift" runat="server" AutoGenerateColumns="False" Height="95px"

                            Style="margin-right: 1px" Width="790px" OnRowDataBound="OnRowDataBound">
                            <columns>
                                <asp:TemplateField HeaderText="Frequency">
                                    <itemtemplate>
                                        <img alt="" style="cursor: pointer" src="Resources/Images/plus.png" />
                                        <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                                            <asp:Label ID="lblMsg" runat="server" Text="Testing 1...2...3">
                                        
                                    </itemtemplate>
                                    <HeaderStyle Width="15px" />
                                
                                <asp:TemplateField HeaderText="Shift #">
                                    <itemtemplate>
                                        <asp:TextBox ID="txtShftNo" runat="server" ReadOnly="True" 

                                        Text='<%# DataBinder.Eval(Container.DataItem, "Shift #") %>'

                                        Width="<%# 25 %>" CssClass="summaryCost">
                                    </itemtemplate>
                                    <HeaderStyle Width="75px" />
                                


In the <head> section, I placed:
<script src="~/Scripts/jquery-1.9.1.js" type="text/javascript">
    $("[src*=plus]").live("click", function () {
        $(this).closest("tr").after("" + $(this).next().html() + "")
        $(this).attr("src", "~/resources/images/minus.png");
    });
    $("[src*=minus]").live("click", function () {
        $(this).attr("src", "~/resources/images/edit.png");
        $(this).closest("tr").next().remove();
    });
</script>

In the code behind section, I get an error that pnlOrders does not exist in the current context:

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
   {
       if (e.Row.RowType == DataControlRowType.DataRow)
       {
           pnlOrders.visible = true;
       }
   }

Instead of the label, I need to nest a panel (which will contain a table, radio button, text box and check box) within the gridview. That data will be shown/hidden when the user clicks on the "plus" or "minus" sign in the first column.

解决方案

("[src*=plus]").live("click", function () {

(this).closest("tr").after("" +

(this).next().html() + "")

这篇关于在GridView中嵌套面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！