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

我建議你把記錄的ID作爲ID放在包含你想要切換的字段的TR上。然後在您的expandCollapseClick也傳遞ID，以便您可以將行的樣式設置爲display:block。當然，這假定所有行都以display:none開始。即。

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

，然後在Javascript（僞代碼）

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

然後改變你的按鈕來執行客戶端，如：

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

這將調用代碼以顯示行，傳入正確行的id。當然，這假設當檢索頁面時表格已經完全填充，並且你想要做的只是隱藏/顯示細節。