如何通過jquery或javascript在Gridview的列上添加'More ...'按鈕

我在Gridview中有一個TemplateField，它可能很長。我想剪切或修剪它，如果它有超過100個字符，而是更換一個按鈕「更多...」，如果用戶點擊它，整個文本將顯示爲jquery或javascript。如何通過jquery或javascript在Gridview的列上添加'More ...'按鈕

這是我的GridView：

<asp:GridView ID="GVProjects" runat="server" CssClass="GVAdmin"> 
 
    
 
<Columns> 
 
<asp:TemplateField HeaderText=" Info "> 
 
    <ItemTemplate> 
 
    
 
    <asp:Label ID="labelinfo" runat="server" CssClass="GVAdmin" 
 
    Text='<%# Eval("Information") %>' ></asp:Label> 
 
               
 
    </ItemTemplate>          
 
    </asp:TemplateField> 
 
    </Columns> 
 
    </asp:GridView>

而且我希望有這樣的事情：

來源

2016-12-26 zaf y

在@Anand Systematix的回答，您可以修改這個背後jquery

<asp:TemplateField HeaderText="Description"> 
<ItemTemplate> 
     <asp:Label ID="lblDescription" runat="server" 
       Text='<%# Limit(Eval("Description"),40) %>' 
       Tooltip='<%# Eval("Description") %>'> 
     </asp:Label> 
</ItemTemplate> 
</asp:TemplateField>

代碼使用限制字符串

protected string Limit(object desc, int maxLength) 
{ 
    var description = (string)desc; 
    if (string.IsNullOrEmpty(description)) { return description; } 
    return description.Length <= maxLength ? 
     description : description.Substring(0, maxLength)+ "<a class='lnkReadMore' href='javascript:void(0);'>...</a>"; 
}

jquery處理lnkReadMore點擊

$('.lnkReadMore').click(function(e) 
{ 
    var labelElement = $(this).closest("[id*='lblDescription']") 
    var fullText = $(labelElement).attr("title"); 
    $(labelElement).text(fullText); 
});

來源

2016-12-26 12:13:01

是在jQuery中的功能嗎？不管我嘗試是錯的！ –

嘗試編輯'jquery'部分 –

您可以通過下面的例子做到這一點： -

<asp:TemplateField HeaderText="Description"> 
<ItemTemplate> 
     <asp:Label ID="lblDescription" runat="server" 
       Text='<%# Limit(Eval("Description"),40) %>' 
       Tooltip='<%# Eval("Description") %>'> 
     </asp:Label> 
     <asp:LinkButton ID="ReadMoreLinkButton" runat="server" 
       Text="Read More" 
       Visible='<%# SetVisibility(Eval("Description"), 40) %>' 
       OnClick="ReadMoreLinkButton_Click"> 
     </asp:LinkButton> 
</ItemTemplate> 
</asp:TemplateField>

而對於代碼隱藏

protected bool SetVisibility(object desc, int maxLength) 
{ 
    var description = (string)desc; 
    if (string.IsNullOrEmpty(description)) { return false; } 
    return description.Length > maxLength; 
} 

protected void ReadMoreLinkButton_Click(object sender, EventArgs e) 
{ 
    LinkButton button = (LinkButton)sender; 
    GridViewRow row = button.NamingContainer as GridViewRow; 
    Label descLabel = row.FindControl("lblDescription") as Label; 
    button.Text = (button.Text == "Read More") ? "Hide" : "Read More"; 
    string temp = descLabel.Text; 
    descLabel.Text = descLabel.ToolTip; 
    descLabel.ToolTip = temp; 
} 

protected string Limit(object desc, int maxLength) 
{ 
    var description = (string)desc; 
    if (string.IsNullOrEmpty(description)) { return description; } 
    return description.Length <= maxLength ? 
     description : description.Substring(0, maxLength)+ "<a>...</a>"; 
}

編輯： -

從標籤如果只使用JavaScript可以添加/調用JavaScript功能，可以刪除「的OnClick =」從itemtemplate中的ReadMoreLinkButton_Click「」。

來源

2016-12-26 11:52:15

而不是' ...'返回'anchor'標籤，這將使其成爲一個鏈接。 –

非常感謝，但我只想通過** jquery或javascript **來完成，正如我在標題中提到的那樣，因爲某些原因，我無法使用Ajax，因此我不想再次加載頁面！ –

爲此，您可以從標記添加/調用java腳本功能，並可以從itemtemplate中刪除「OnClick =」ReadMoreLinkButton_Click「」。 –

如何通過jquery或javascript在Gridview的列上添加'More ...'按鈕

回答

相關問題