ASP '데이터리스트'셀을 확장/축소 가능하게 만들려면 어떻게해야합니까?

Question

DataTable으로 채워지는 asp DataList이 있습니다.

<asp:PlaceHolder ID="ph3" runat="server"> 
    <asp:DataList ID="dlspec" runat="server" GridLines="Vertical" OnItemDataBound="dlspec_ItemDataBound"> 
     <FooterStyle BackColor="#CCCCCC" /> 
     <AlternatingItemStyle CssClass="alt-grey" /> 
     <SelectedItemStyle BackColor="#000099" Font-Bold="True" ForeColor="White" /> 
     <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" /> 
     <ItemTemplate> 
      <table width="320px"> 
       <tr> 
        <td class="leftcol"> 
         <asp:Label ID="lblDimension" runat="server" Text='<%# Eval("Dimension") %>'></asp:Label>: 
        </td> 
        <td class="ProductDetailData"> 
         <asp:Label ID="lblName" runat="server" Text='<%# Eval("Attribute") %>'></asp:Label> 
        </td> 
       </tr> 
      </table> 
     </ItemTemplate> 
    </asp:DataList> 
</asp:placeholder> 

문제

는 난 단지 데이터 목록의 첫 번째 다섯 개 요소를 표시 할 필요가 나는 세포의 나머지 부분을 숨기고 요청에 그들을 "확장"할 필요가있다. DataList 컨트롤 내에서 어떻게이 작업을 수행 할 수 있습니까? 나는 내가 이것을 달성하기 위해 특정 "div"태그에 대해 사용할 수있는 JQuery 플러그인이 있다는 것을 알고 있지만 "DataList Control"내에서이를 수행 할 수있는 방법을 모른다.

도움이 곧 필요합니다 .. 귀하의 모든 소중한 조언을 감사드립니다.

Answer 1

필요한 것은 페이지 매김입니다. Here은 완료하는 방법을 보여주는 기사입니다.

업데이트 : 클라이언트 쪽에서 jQuery를 사용하면 모양이 here입니다. 기본적으로 ItemTemplate의 표에 클래스를 추가하고 Show more 링크를 클릭하고 자바 스크립트 코드를 페이지의 어딘가에 추가하십시오.

여기에 jQuery를 스크립트를 추가

은 (행 가정하면 항목 클래스이며, showMore이 경우, 더 많은 항목을 표시하는 링크입니다 그들 모두는 간단하게하기) :

$(function() { 
    $(".row").slice(2).hide(); 

    $("#showMore").click(function() { 
     $(".row").show(); 
    }); 
}); 

당신은 추가로 재생할 수 있습니다 더 흥미로운 동작을 추가하는 slice() 함수.

페이지가 느린 경우 사용자에게 전체 테이블이 표시되고 페이지로드가 완료되면 목록에있는 대부분의 행이 사라집니다. 당신이 데이터리스트를 렌더링 한 직후에 자바 스크립트를 실행하는 것을 피하기 위해서.