使用 Gridview 并获取可滚动单元格？答案

【问题标题】：Using Gridview and getting scrollable cells?使用 Gridview 并获取可滚动单元格？
【发布时间】：2018-02-27 00:49:31
【问题描述】：

我正在使用 Gridview，我想让单元格可滚动。我已经有一个滚动整个表格的div，但是我需要将单个单元格保持在一定的最大宽度，并为具有超过该宽度的数据的单元格创建一个滚动条。

我尝试添加 <rowstyle Wrap="false"/> 这使数据停止包装，这是我想要的，但现在行非常非常宽。这是我不想要的。

我发现了一些建议，说要在 Gridview 周围添加 div，我这样做了，并添加了像 overflow-x:auto;width:200px; 这样的 css 规则，这并没有帮助单元格仍然非常非常宽。

我有这样的 Gridview 设置：

<asp:GridView ID="PMDataGrid"
    datasourceid="PMDataSource"
    ondatabound="PMDataGrid_DataBound"
    autogeneratecolumns="false"
    emptydatatext="No Data Available"
    allowpaging="true"
    pagesize="25"
    runat="server" 
    showheader="true"
    showfooter="true"
    DataKeyNames="PROJECT"
    allowsorting="true"
    style="overflow-x:auto"
    headerstyle-cssclass="FixedHeader">
    <HeaderStyle BackColor="Black" ForeColor="White" />
    <FooterStyle BackColor="Black" ForeColor="White" />
    <RowStyle BackColor="White" ForeColor="Black" height="50px" Wrap="false" Width="250px" />
    <AlternatingRowStyle BackColor="#e5e5e5" ForeColor="Black" height="50px" />
    <SelectedRowStyle BackColor="#999999" ForeColor="#fff" />

我希望最大宽度为 250 像素，并且当数据太长时有一个滚动条，但我无法找到解决方案。我对 asp.net 中的网络应用相当陌生。

我已经添加了这个：

<asp:TemplateField HeaderText="COE_%_RCVD_BY_LINE" SortExpression="COE_%_RCVD_BY_LINE">
    <ItemTemplate>
        <asp:Label ID="Lable70" runat="server" Text='<%# Bind("COE_%_RCVD_BY_LINE") %>'></asp:Label>
    </ItemTemplate
</asp:TemplateField>

产生此错误的原因：

解析器错误消息：对 Bind 的调用格式不正确。请参阅文档了解正确的 Bind 参数。

我认为是% 导致了错误。有没有办法保留% 并让它工作？

我忘了添加周围的<div></div>。现在看起来像这样： '>

我如何设置这样的 CSS：

.Gridview {
    overflow-x:auto;
    width:250px;
}

我很确定我的设置正确，但列仍然非常宽：并且 CSS 中的规则似乎并不适用：

【问题讨论】：

你试过了吗？ -> forums.asp.net/t/…
是的，你可能应该使用<ItemTemplate> 并将所有内容包装在一个可滚动的 div 中，例如 @theoretisch 发布的
Is it possible to scroll in a cell of a gridview?的可能重复
@theoretisch 我以前没有尝试过。我已经添加了它并遇到了一个新问题。
@zgood 我之前没有尝试过<ItemTemplate>。到目前为止，我还没有看到任何关于它的信息。我已经添加了它，但它产生了一个新错误。有任何想法吗？我更新了我的问题。

标签： css asp.net gridview

【解决方案1】：

我想通了。我有样式的 CSS 文件，这不起作用。当我将样式添加到 div 内联时，它就可以工作了，如下所示：

<asp:TemplateField HeaderText="DESCRIPTION" SortExpression="DESCRIPTION">
    <ItemTemplate>
        <div class="Gridview" style="overflow-x:auto; max-width:250px;">
            <asp:Label ID="Lable1" runat="server" Text='<%# Bind("DESCRIPTION") %>'></asp:Label>
        </div>
    </ItemTemplate>
</asp:TemplateField>

现在可以将滚动条添加到超出我设置的 250px 最大值的任何字段。

这主要可以在类似的问题中找到：Is it possible to scroll in a cell of a gridview?

但我确实了解到style 必须内联才能工作。在 CSS 文件中包含 style 不起作用。

【讨论】：