冻结 ASP.NET 网格视图列

如何冻结 asp.net 网格视图中最左边的初始 2 -3 列？这样，在水平滚动时，将始终显示冻结的初始 2 - 3 列。

有答案吗？？

是的，似乎可以使用一些 css 魔法，将固定列和可滚动列放在不同的 z 索引上，以将固定列保持在顶部。这伴随着一个警告：overflow:scroll可能不是 100% 可移植（我已经在 IE 8/9 和 Chrome FWIW 上进行了测试）。

看看这个jsFiddle 在这里

我用来生成的 ASPXGridView在下面。

注意 css 类pinned and scrollable分别用于固定列和滚动列（应用于标题和项目）

但真正的工作是在 css 中完成的。特别注意，您需要调整列宽以将固定的 td/th 对齐在左侧。

aspx

<div id="scrolledGridView">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
        <Columns>
            <asp:BoundField DataField="ID" HeaderText="Col 1">
                <HeaderStyle CssClass="pinned col1"></HeaderStyle>
                <ItemStyle CssClass="pinned col1"></ItemStyle>
            </asp:BoundField>
            <asp:BoundField DataField="Name" HeaderText="Column 2">
                <HeaderStyle CssClass="pinned col2"></HeaderStyle>
                <ItemStyle CssClass="pinned col2"></ItemStyle>
            </asp:BoundField>
            <asp:BoundField DataField="Description" HeaderText="Column 3">
                <HeaderStyle CssClass="scrolled"></HeaderStyle>
                <ItemStyle CssClass="scrolled"></ItemStyle>
            </asp:BoundField>
            <asp:BoundField DataField="Cost" HeaderText="Column 4">
                <HeaderStyle CssClass="scrolled"></HeaderStyle>
                <ItemStyle CssClass="scrolled"></ItemStyle>
            </asp:BoundField>
        </Columns>
    </asp:GridView>

css

    #scrolledGridView
    {
        overflow-x: scroll; 
        text-align: left;
        width: 400px; /* i.e. too small for all the columns */
    }

    .pinned
    {
        position: fixed; /* i.e. not scrolled */
        background-color: White; /* prevent the scrolled columns showing through */
        z-index: 100; /* keep the pinned on top of the scrollables */
    }
    .scrolled
    {
        position: relative;
        left: 150px; /* i.e. col1 Width + col2 width */
        overflow: hidden;
        white-space: nowrap;
        min-width: 500px; /* set your real column widths here */
    }
    .col1
    {
        left: 0px;
        width: 50px;
    }
    .col2
    {
        left: 50px; /* i.e. col1 Width */
        width: 100px;
    }

​