且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

冻结asp.net网格视图列

更新时间:2023-10-04 22:48:10

是的,这似乎是可能有一些CSS魔法,虽然这带有需要提醒的是溢出:滚动可能不是100%移植的(我已经在IE 8/9和Chrome FWIW测试)

Yes, it seems to be possible with some css magic, although this comes with the caveat that overflow:scroll may not be 100% portable (I've tested on IE 8/9 and Chrome FWIW)

看看这个的jsfiddle这里

在ASPX我用来生成 GridView控件如下。

The ASPX I used to generate the GridView is below.

请注意CSS类固定滚动用于固定和分别滚动栏(适用于标题和项目)

Note the css classes pinned and scrollable for fixed and scrolling columns respectively (applied to headers and items)

但真正的工作是在CSS完成。特别要注意,你需要得到你的列宽正确的左侧,以适应TD固定的/日的。

But the real work is done in the css. Note especially that you need to get your column widths correct to accomodate the fixed td's / th's at the left.

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;
    }