Question

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

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

点击此链接可展开列并显示完整内容。

这样做的最佳方式是什么？

Answer 1

选择内容文本的前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>

Answer 2

这会对你有帮助。

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

Answer 3

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

Answer 4

使用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);
}

您可能想要伪装＆＃34;切换＆＃34;使用＆＃34;（更多）＆＃34;的文本框继续扩大其余部分。

告诉我们是否有效。

扩展gridview行

4 个答案: