C# 扩展gridview'；s排

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

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

单击此链接应展开该列并显示完整内容

---

最好的方法是什么？

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

这将对您有所帮助

试试这个

使用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>

您可能想用“（more）”行的文本框来隐藏“toggle”以扩展其余部分

---

让我们知道它是否有效。

我已经在通过ObjectDataSource填充gridview，并使用“”获取完整内容。我可以在插入内容之前对其进行修剪吗？那么您有内容的属性吗？您可以在获取属性时修剪内容。我相信您也可以在不使用ajax的情况下完成。。如果看起来和你想要的相似。

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