Question

我有一个gridView和一列。 col为<asp:boundfield>，我使用databind（）从服务器填充数据。这就是我到目前为止所做的：

<asp:GridView ID="gvMichtavim" runat="server" AutoGenerateColumns="False" RowStyle-CssClass="row1"
    AlternatingRowStyle-CssClass="row2" ClientIDMode="Static" HeaderStyle-CssClass="table_title"
    Width="100%" class="table_title" ScrollBars="Auto" RowStyle-Height="30px" HeaderStyle-Height="20px">
    <AlternatingRowStyle CssClass="row2" />
    <Columns>
        <asp:ButtonField HeaderText="watch Pdf" CommandName="Select" HeaderStyle-Width="100px"
            ButtonType="Image" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"
            ItemStyle-Width="100px" HeaderStyle-Wrap="false" ControlStyle-CssClass="adobe_pdf"></asp:ButtonField>
        <asp:BoundField DataField="IchzurYeshutNimaan" HeaderText="idNum" DataFormatString="{0:000000000}"
            HeaderStyle-Width="100px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"
            ItemStyle-Width="100px" HeaderStyle-Wrap="false"></asp:BoundField>
        <asp:BoundField DataField="IchzurShemNimaan" HeaderText="full Name" HeaderStyle-Width="200px" ItemStyle-Width="200px"
            ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Center"></asp:BoundField>
        <asp:BoundField DataField="IchzurNadonMichtav" HeaderText="Subject" HeaderStyle-Width="200px"
            ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Center"></asp:BoundField>
    </Columns>
    <HeaderStyle CssClass="table_title" />
    <RowStyle CssClass="row1" />
</asp:GridView>

当我填写cols时，如果数据很长，请说明下周检查时主题为＆＃34;酒店付款＆＃34;，它会将单元格扩展为2行。（图片中）

我想只显示第一行和第二个点（＆＃34;当您检查时为酒店付款...＆＃34;），当用户点击该行时，它会展开单元格并显示所有内容我想我需要javascript，但我不知道从哪里开始。我想也许有一种方法可以抛出asp选项。

谢谢。

Answer 1

您可以使用后面的代码中的方法和一些jQuery以及对GridView的一些小修改来完成您想要的任务。首先将Method添加到后面的代码中。

public string trimString(string input)
{
    int trimLength = 25;

    if (!string.IsNullOrEmpty(input) && input.Length > trimLength)
    {
        return string.Format("<div>{0}<span>... </span><span style=\"display:none\">{1}</span></div>", input.Substring(0, trimLength), input.Substring(trimLength, input.Length - trimLength));
    }
    else
    {
        return input;
    }
}

然后将BoundField更改为TemplateField。

<asp:TemplateField>
    <ItemTemplate>
        <%# trimString(Eval("Subject").ToString()) %>
    </ItemTemplate>
</asp:TemplateField>

最后，javascript函数将向GridView中的<div>项添加一个监听器，当点击它时将隐藏第一个<span>并显示第二个。{/ p>

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%= GridView1.ClientID %> div').click(function () {
            $(this).find("span:nth-child(1)").hide();
            $(this).find("span:nth-child(2)").show();
    });
});
</script>

Answer 2

您可以使用css ellipsis styling并将字段数据放在Text和ToolTip属性中。我不是网格视图中细胞动画的粉丝。它看起来很光滑，但对于那些需要不断查看这些数据的用户来说，它会分散注意力。

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block
}

您仍然需要将BoundField转换为Template，因为BoundFields不允许您访问ToolTip属性

<asp:TemplateField>
  <ItemTemplate>
    <asp:Label ID="lblSubject" 
               CssClass="truncate" 
               Text='<%# Eval("IchzurNadonMichtav") %>' 
               ToolTip='<%# Eval("IchzurNadonMichtav") %>'>
    </asp:Label>
  </ItemTemplate>
</asp:TemplateField>

在行动中看到它：

请记住，您正在为渲染结果设置样式，而不是asp标记。

＆＃13;

table {
  width:500px;
  border: 1px solid red;
}
table td {
  border: 1px solid green;
}
.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block
}

＆＃13;

<table>
  <tr>
    <td>xxx</td>
    <td>
      <span id="some_id" 
            class="truncate" 
            title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tortor ultricies, volutpat neque at, dictum arcu. Nam dictum, enim vitae ultricies consectetur, justo quam consectetur ligula, eget lobortis nisi lectus in elit. Aenean enim nisl, lacinia sit amet neque eu, feugiat porttitor mauris. Proin neque enim, vulputate sed libero">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tortor ultricies, volutpat neque at, dictum arcu. Nam dictum, enim vitae ultricies consectetur, justo quam consectetur ligula, eget lobortis nisi lectus in elit. Aenean enim nisl, lacinia sit amet neque eu, feugiat porttitor mauris. Proin neque enim, vulputate sed libero
      </span>
    </td>
    <td>xxx</td>
  </tr>
</table>

＆＃13;

如何在gridView ASP.net中展开或折叠单元格？

2 个答案:

在行动中看到它：