중첩 GRIDVIEW 행이 다음과 같이

Question

내가 중첩의 GridView를 클릭/축소 확대해야

<asp:GridView ID="gvParent" runat="server" DataKeyNames="id"> 
    <Columns> 
     <asp:TemplateField> 
      <ItemTemplate> 
       <asp:GridView ID="gvChild" runat="server"> 
        <Columns> 
         <asp:TemplateField> 
          <ItemTemplate> 
           <asp:Label ID="lblChild1" runat="server"/> 
          </ItemTemplate> 
         </asp:TemplateField> 
         //... some more child columns 
        </Columns> 
       </asp:GridView> 
      </ItemTemplate> 
     </asp:TemplateField> 

     <asp:TemplateField> 
      <ItemTemplate> 
       <asp:Label ID="lblParent1" runat="server"/> 
      </ItemTemplate> 
     </asp:TemplateField> 
     //... some more parent columns 
     <asp:TemplateField> 
      <ItemTemplate> 
       <asp:HiddenField ID="IsExpanded" ClientIDMode="Static" runat="server" /> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

사용자가 부모 행의 아무 곳이나 클릭 할 때 내가하고 싶은 것은, 자식 행이 보여주는, 확장을 부모와 관련된 하위 GridView의 모든 행을 다시 클릭하면 축소됩니다.

데이터를 GridViews로 가져올 수 있으며 this tutorial처럼 확장/축소 작업을 수행 할 수 있지만 이미지를 클릭 할 수 없도록하려면 전체 행을 클릭 할 수 있어야합니다. 적어도 시도하고 그것이 내가 튜토리얼에서 같은 논리를 확장 할에 도착

:

$(function() { 
    $("[id*=gvParent] td").click(function() { 
     $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>"); 
    }); 
}); 

그러나 그것으로 해당 행 내에서 클릭 된 열의 오른쪽에 바로 복사 칼럼의 내용을 다음 행 (snip 참조). 아마 간단 할거라 확신하지만 어디서나 답을 찾을 수 없습니다!

UPDATE :

지금이 :

나 개폐 개별 행하지만 하나 개의 행이 열려 다음 다른 열 때, 그 옆에있는 행이 삭제 될 수 있습니다

$("[id*=gvFileUploadAdmin] td").click(function() { 
    if ($("#IsExpanded").val() == "expanded") { 
     debugger; 
     collapseRow(this); 
    } 
    else if (typeof $("#IsExpanded").val() == 'undefined' 
      || $("#IsExpanded").val() == "collapsed") { 
     expandRow(this); 
    } 
}); 

function expandRow(row) { 
    $(row) 
     .closest("tr") 
     .after("<tr><td></td><td colspan = '999'>" + 
      $("[id*=pnlFiles]", $(row).closest("tr")).html() + 
      "</td></tr>");  
    $("#IsExpanded").val("expanded"); 
}; 

function collapseRow(row) { 
    $(row).closest("tr").next().remove(); 
    $("#IsExpanded").val("collapsed"); 
} 

. 고유 ID로 계속 진행되고 있지만 수정 방법을 잘 모릅니다. 나는이 일을 백그라운드에서 몇 가지 C#을해야합니까 :

HiddenField IsExpanded = row.FindControl("IsExpanded") as HiddenField; 
var uniqueId = IsExpanded.UniqueID; 
IsExpanded.Value = Request.Form[uniqueId]; 

을하지만 제거 때 그것은으로 Request.Form는 [가 UniqueID] 반환 널 (null) 때문에 그것이 작동하는 방법에 차이가 없습니다.

Answer 1

그래서 나는 마침내 그것을 작동시킬 수 있었다!여기에 내가 (사용자가 해당 행 내에서 버튼을 누를 때이 행을 확장하지 않습니다) 무슨 짓을했는지 : 나는 또한 정적에서 ClientIDMode를 변경

$(function() { 
    $("[id*=gvParent] td").click(function() { 
     if ($(this).parents('tr').find('input[type="hidden"]').val() == "expanded") 
      collapseRow(this); 
     else 
      expandRow(this); 
    }); 

    // Ensure the row doesn't expand/collapse if a button is clicked 
    $("[id*=gvParent] td .btn").click(function (e) { 
     e.stopPropagation(); 
    }); 
    //Ensures any clicks on the child row aren't registered 
    $("[id*=gvParent] td .gvChild").click(function (e) { 
     e.stopPropagation(); 
    }); 
}); 

function expandRow(row) { 
    $(row).closest("tr").after("<tr><td></td><td colspan = '999'>" + 
       $("[id*=pnlFiles]", $(row).closest("tr")).html() + 
       "</td></tr>"); 
    $(row).parents('tr').find('input[type="hidden"]').val("expanded"); 
}; 

function collapseRow(row) { 
    $(row).closest("tr").next().hide(); 
    $(row).parents('tr').find('input[type="hidden"]').val("collapsed"); 
} 

: AutoID에

<asp:HiddenField ID="IsExpanded" ClientIDMode="Static" runat="server" /> 

:

답장을 보내

<asp:HiddenField ID="IsExpanded" ClientIDMode="AutoID" runat="server" /> 

Answer 2

Gridview 대신 Listview를 사용해 보셨나요? LinkButton을 사용하여 행 확장을 활성화/비활성화합니다.

1. ItemTemplate에서 표시 셀을 LinkButton 정의로 묶습니다.

   <ItemTemplate> 
    
       <tr> 
    
       <td> 
    
        <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Select"> 
    
        LOC: 
    
        <asp:Label Text='<%# Eval("LocationCode") %>' runat="server" ID="LocationCodeLabel" /></span> 
    
        </asp:LinkButton> 
    
       </td> 
    
       <td> 
    
        <asp:Button ID="editLocation" runat="server" Text="EDIT" CommandName="Edit" CommandArgument='<%# Eval("LocationID") %>' /> 
    
        <asp:Button ID="deleteLocation" runat="server" Text="DELETE" CommandName="Delete" CommandArgument='<%# Eval("LocationID") %>' /> 
    
       </td> 
    
       </tr> 
    
   </ItemTemplate>

1. 는 "선택"는 ItemTemplate을의의 LinkButton 명령 이름 = 부여 - 이것은 SelectedItemTemplate를 활성화하는 효과가 있습니다.

2. SelectedItemTemplate에서 다른 LinkButton으로 데이터 셀을 묶습니다. LinkButton CommandName = "UnSelect".

ListView는 무료로 Select 명령을 처리합니다. UnSelect는 Listview1_ItemCommand() 이벤트 처리기에서 처리해야합니다.

protected void LocationView_ItemCommand(object sender, ListViewCommandEventArgs e) 
{ 
    if (e.CommandName == "UnSelect") 
    { 
     ListView1.SelectedIndex = -1; 
     ListView1.DataBind(); 
    } 
} 

GridItem을 SelectedItemTemplate의 Div에 삽입 할 수 있습니다. 그러나 SelectedItemTemplate의 다른 ListView Embedded가 이상적입니다.