2013-03-25 61 views
0

我使用jQuery的下方添加一個「更多」選項的文本,只顯示前200個字符,並允許用戶點擊閱讀更多查看文本的剩餘部分如何在綁定域內使用jquery?

<head><title>Add Read More Link (from DevCurry.com)</title>  
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery1.4.4.min.js"> </script>  
    <script type="text/javascript" src="http://plugins.learningjquery.com/expander/jquery.expander.js"> </script>  
    <script type="text/javascript"> 
      $(function() { 
       $('div.readmore').expander({ 
       slicePoint: 200, expandText: 'Click Here to Read More', userCollapseText: 'Hide Text' 
       }); 
      } 
     );  
    </script> 
</head> 

要使用的功能,我必須使用以下

<div class="readmore">  The Div Text Comes Here  </div> 

我的問題是,我想使用jQuery的一個GridView綁定列內。我有一列包含很長的描述,需要在其中應用jQuery。

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" 
      AutoGenerateColumns="False" EmptyDataText="No Records" EnableSortingAndPagingCallbacks="True" 
      Width="1017px" ShowFooter="False" DataSourceID="SqlDataSource1" 
      EnableModelValidation="True" PageSize="10" GridLines="None" CssClass="mGrid" 
      PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" > 

     <Columns> 
      <asp:BoundField DataField="CreationDate" HeaderText="Date" SortExpression="CreationDate" dataformatstring="{0:MM/dd/yyyy}" /> 
      <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" /> 
      <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" /> 
      <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" /> 
      <asp:BoundField DataField="Department" HeaderText="Department" SortExpression="Department" /> 

     </Columns> 

    </asp:GridView> 

不幸的是,我不能在boundfield內插入。你有任何其他方式將Jquery應用到boundfield嗎?

+1

這是因爲boundfields是組件,而不是實際的HTML標籤。 Javascript是在客戶端運行的,所以你的HTML在這方面看起來非常不同。嘗試查看您的實時源代碼。 – 2013-03-25 12:43:21

回答

3

您可以取代

<asp:BoundField DataField="Description" HeaderText="Description" 
    SortExpression="Description" /> 

通過

<asp:TemplateField HeaderText="Description" SortExpression="Description"> 
    <ItemTemplate> 
     <div class="readmore"><%# Eval("Description") %></div> 
    </ItemTemplate>             
</asp:TemplateField> 
0

您可以設置一個CSS類和使用類的jQuery。
而且您需要使用TemplateField來顯示數據。