ListView에서 특정 요소의 표시 여부 전환

Question

페이지에 목록보기가 있고 트리보기의 토글 효과를 에뮬레이션하려고합니다. 첫 번째 경계에서 세부 요소 (LBL_ActionTitle, LBL_Action, LBL_UrlTitle, LBL_Url)는 visibility = false로 설정됩니다. 요소의 클릭 이벤트 (LB_ExpandCollapse)가 직접 관련된 세부 요소의 가시성을 토글하고 싶습니다. IE는 해당 유형의 모든 요소를 ​​페이지에 포함하지 않습니다. 나는 이것을 성취 할 방법이 확실하지 않거나, 그것을 할 수 있다면, 누군가가 올바른 방향으로 나를 가리킬 수 있기를 바랐다. 여기에 참조 용 컨트롤이 있습니다.

<div id="logContainer"> 
     <asp:ListView ID=LV_Logs runat="server"> 
      <LayoutTemplate> 
       <table border="0" cellpadding="0" cellspacing="0" style="width:100%"> 
        <tr> 
         <td></td> 
         <td style="width:85%" /> 
        </tr> 
        <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> 
       </table> 
      </LayoutTemplate> 
      <ItemTemplate> 
       <tr> 
        <td> 
         <hr /> 
         <asp:LinkButton ID="LB_ExpandCollapse" runat="server" CausesValidation="false" OnClick="expandCollapse_Click">+</asp:LinkButton> 
         <asp:Label ID="LBL_MessageType" runat="server" Text='<%# Eval("messageType") %>'></asp:Label> 
         <hr /> 
        </td> 
        <td style="text-align: right"> 
         <hr /> 
         <asp:Label ID="LBL_Message" runat="server" Text='<%# Eval("messageTime") %>'></asp:Label> 
         <hr /> 
        </td> 
       </tr> 

       <tr style="text-align: left"> 
        <td style="padding-left: 65px"> 
         <asp:Label ID="LBL_ActionTitle" Visibility="false" runat="server" Text="User Action:"></asp:Label> 
        </td> 
        <td style="padding-left: 10px"> 
         <asp:Label ID="LBL_Action" Visibility="false" runat="server" Text='<%# Eval("action") %>'></asp:Label> 
        </td> 
       </tr> 
       <tr style="text-align: left"> 
        <td style="padding-left: 65px"> 
         <asp:Label ID="LBL_UrlTitle" Visibility="false" runat="server" Text="URL:"></asp:Label> 
        </td> 
        <td style="padding-left: 10px"> 
         <asp:Label ID="LBL_Url" runat="server" Visibility="false" Text='<%# Eval("url") %>'></asp:Label> 
        </td> 
       </tr> 

      </ItemTemplate> 

     </asp:ListView> 
     <asp:DataPager ID="DataPagerProducts" runat="server" PagedControlID="LV_Logs" 
      PageSize="20" OnPreRender="DataPagerProducts_PreRender"> 
      <Fields> 
       <asp:NextPreviousPagerField ShowFirstPageButton="True" ShowNextPageButton="False" /> 
       <asp:NumericPagerField /> 
       <asp:NextPreviousPagerField ShowLastPageButton="True" ShowPreviousPageButton="False" /> 
      </Fields> 
     </asp:DataPager> 

Answer 1

토글 한 필드가 들어있는 TR에 ID로 레코드의 ID를 넣는 것이 좋습니다. 그런 다음 expandCollapseClick에서 ID를 전달하여 행 스타일을 display:block으로 설정할 수 있습니다. 물론 이것은 모든 행이 display:none에서 시작한다고 가정합니다. 즉.

<tr id='<%# Eval("recordId") %>' style='display:none'> 

다음 자바 스크립트 (의사 코드)

function expandCollapseClick(row) 
{ 
    document.getElementById(row).style.display = 'block'; 
} 

을에

는 다음과 같이 클라이언트 측을 실행하기 위해 버튼을 변경

<button onclick='expandCollapse(<%# Eval("recordId") %>)'>+</button> 

이것은을 표시하는 코드를 호출 올바른 행의 ID를 전달하는 행. 물론 이것은 페이지가 검색 될 때 테이블이 완전히 채워지고 사용자가 원하는 것은 세부 사항을 숨기거나 표시하는 것으로 가정합니다.