冻结asp.net网格视图列 [英] Freeze asp.net grid view column

问题描述

我怎么能冻结asp.net网格视图最初2-3最左边的列？因此，虽然水平滚动最初的2 - 即冻结了3列将始终显示

How can i freeze initial 2 -3 leftmost column in asp.net grid view? so that while horizontal scrolling initial 2 - 3 columns that got freezes will always be display.

任何答案？

推荐答案

是的，这似乎是可能有一些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;
    }

这篇关于冻结asp.net网格视图列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！