冻结asp.net网格视图列

Question

如何在asp.net网格视图中冻结最初的2 -3最左列？因此,当水平滚动时,始终显示已冻结的初始2 - 3列.

任何答案？

Answer 1

是的,似乎有可能用一些css魔法,虽然这附带overflow:scroll可能不是100%便携的警告(我已经在IE 8/9和Chrome FWIW上测试过)

在这里看看这个jsFiddle

我用来生成的ASPX GridView如下.

请分别注意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;
    }

​

Answer 2

我写的jQuery插件可以修复header和freeze列,它可以应用于GridView.看图像:

看看网站:http://gridviewscroll.aspcity.idv.tw/

支持的浏览器

• Internet Explorer 7,8(IE 9兼容性)
• Internet Explorer 9(9.0.8112)
• Windows 7预览版中的Internet Explorer 10
• 谷歌浏览器(23.0.1271.64米)
• Mozilla Firefox(16.0.2)
• Apple Safari(5.1.7)