asp.net - 卡住asp.net GridView 列

Question

如何在 asp.net 网格 View 中卡住最初的 2 -3 最左边的列？以便在水平滚动时始终显示卡住的初始 2 - 3 列。

有答案吗？？

Answer 1

是的，似乎可以使用一些 css 魔法，在不同的 z 索引上固定和滚动列以保持固定在顶部。需要注意的是 overflow:scroll可能不是 100% 便携(我已经在 IE 8/9 和 Chrome FWIW 上测试过)。

看看这个jsFiddle here

我用来生成 GridView 的 ASPX在下面。

注意 css 类 pinned和 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;
    }