扩大gridview的行

gridview的列之一是一个“内容”列，可以有几行文本（它可以是文字，文本框或标签）。扩大gridview的行

在“默认”模式下，我希望它只显示第一行和一个链接按钮：“（more）”或“（read）”。

点击此链接应展开栏目并显示完整内容。

这样做的最好方法是什么？

2009-06-16 markiz

选择内容文本的前10个字符并将其用作链接文本是更好的方法。这将减少数据的大小，从数据库中检索这样的：

SELECT ContentId, SUBSTRING(Content, 0, 10) AS Content 
FROM ContentTable;

然后你可以使用模板列此列，其中包括标签和链接。 Lbel的描述文字，链接的细节。

<asp:TemplateColumn> 

    <ItemTemplate> 
     <asp:Label 
      Text='<%# Eval("Content") %>' 
      runat="server"/> 
     <a href='<%# Eval("ContentId", "contentdetails.aspx?id={0}") %>'>More</a> 
    </ItemTemplate> 

</asp:TemplateColumn>

来源

2009-06-16 12:02:13 Canavar

我已经通过ObjectDataSource填充gridview并使用'<％＃Eval（“Content”）％>'来获取完整内容。我可以在插入内容之前修剪内容吗？ – markiz 2009-06-16 12:22:07

那么你有一个内容的财产？您可以在属性的getter处修剪内容。 – Canavar 2009-06-16 12:27:40

这会帮助你。

http://www.asp.net/community/control-gallery/Item.aspx?i=1465

来源

2009-06-16 13:38:35

试试这个。 http://mosesofegypt.net/post/BuildingjQueryAndASPNetAJAXEnabledControlsjQueryCollapsiblePanelExtenderPart2.aspx

来源

2009-06-16 18:08:24

使用CSS的力量！

将它放在gridview行中。它自然会将行推出到您的内容的高度，或所需的行数。

<div class="toggle"> 
    <div class="toggle-header"> 
    Toggle! 
    </div> 
    <div class="toggle-height"> 
    <div class="toggle-transform"> 
     <p>2nd line of text</p> 
     <p>3rd line</p> 
     <p>4th line</p> 
     <p>etc</p> 
    </div> 
    </div> 
</div>

，并使用该CSS ...

body { 
    font-family: sans-serif; 
} 

.toggle { 
    position: relative; 
    border: 2px solid #333; 
    border-radius: 3px; 
    margin: 5px; 
    width: 200px; 
} 

.toggle-header { 
    margin: 0; 
    padding: 10px; 
    background-color: #333; 
    color: white; 
    text-align: center; 
    cursor: pointer; 
} 

.toggle-height { 
    background-color: tomato; 
    overflow: hidden; 
    transition: max-height .6s ease; 
    max-height: 0; 
} 

.toggle:hover .toggle-height { 
    max-height: 1000px; 
} 

.toggle-transform { 
    padding: 5px; 
    color: white; 
    transition: transform .4s ease; 
    transform: translateY(-100%); 
} 

.toggle:hover .toggle-transform { 
    transform: translateY(0); 
}

你可能想掩饰“切换”与您“（更多）”行拓展休息的一个文本框。

让我们知道它是否工作。

来源

2017-03-21 01:03:43 Fandango68

扩大gridview的行

回答

相关问题