如何获取带有冻结的标题和列的GridView的水平和垂直滚动条? [英] How to get horizontal and vertical scroller for the GridView with freezed header and column?

问题描述

我试图冻结GridView的Header和First列.我正在使用本教程，并且一切正常.我现在所需要的只是拥有垂直和水平滚动条，并能最小化GridView的宽度.我试图通过将GridView放在下面的div中来做到这一点，但是对我来说效果不佳.冻结的列和标题不在表格中:

I am trying to freeze the Header and the First columns for the GridView. I am using this tutorial and everything works fine. All what I need now is just having vertical and horizontal scroller with minimizing the width for GridView. I tried to do that by putting the GridView inside the following div, but it did not work well with me. The Freezed column and header go out of the table:

<div style="width:700px; height:300px; overflow:auto; overflow-y:auto;">
    </div>

这是CSS代码:

Here''s is the CSS code:

<style>
            div#div-datagrid {
            width: 220px;
            height: 100px;
            overflow: auto;
            scrollbar-base-color:#ffeaff;
            }
    
            /* Locks the left column */
            td.locked, th.locked {
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            background-color: navy;
            color: white;
            border-right: 1px solid silver;
            position:relative;
            cursor: default;
            /*IE5+ only*/
            left: expression(document.getElementById("div-datagrid").scrollLeft-2);
            }
    
            /* Locks table header */
            th {
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            background-color: navy;
            color: white;
            border-right: 1px solid silver;
            position:relative;
            cursor: default;
            /*IE5+ only*/
            top: expression(document.getElementById("div-datagrid").scrollTop-2);
            z-index: 10;
            }
    
            /* Keeps the header as the top most item. Important for top left item*/
            th.locked {z-index: 99;}
    
            /* DataGrid Item and AlternatingItem Style*/
            .GridRow {font-size: 10pt; color: black; font-family: Arial;
                         background-color:#ffffff; height:35px;}
            .GridAltRow {font-size: 10pt; color: black; font-family: Arial;
                         background-color:#eeeeee; height:35px;}
            </style>

这是ASP.NET代码:

And here''s the ASP.NET code:

<div style="width:700px; height:300px; overflow:auto; overflow-y:auto;">
                        <asp:GridView ID="fixedHeaderScrollableGridView" runat="server" 
                                        AllowSorting="True" 
                                        CellPadding="3" 
                                        DataSourceID="SqlDataSource1" 
                                        ClientIDMode="Static"
                                        CssClass="mGrid"
                                        AlternatingRowStyle-CssClass="alt" 
                                        RowStyle-HorizontalAlign="Center" 
                                        OnRowDataBound="GridView1_RowDataBound" OnPreRender="GridView1_PreRender">
                            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                            <HeaderStyle Font-Bold = "true" ForeColor="Black"/> 
                            <Columns>
                                <%--<asp:CommandField ShowSelectButton="True" />--%>
                            </Columns>
                            <EditRowStyle BackColor="#999999" />
                            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                            <SortedAscendingCellStyle BackColor="#E9E7E2" />
                            <SortedAscendingHeaderStyle BackColor="#506C8C" />
                            <SortedDescendingCellStyle BackColor="#FFFDF8" />
                            <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
                        </asp:GridView>
                    </div>

那么如何获得带有冻结的标题和列以及垂直和水平滚动条的GridView?

So how can I get a GridView with Freezed Header and Column, and Vertical and Horizontal Scroller?

推荐答案

http://weblogs.asp.net/dwahlin/archive/2007/07/31/freeze-asp-net-gridview-headers-by-creating-client-side-extenders.aspx [ http://forums.asp.net/t/1120278.aspx [使用JavaScript和CSS冻结ASP.NET GridView标头 [ ^ ]
http://geekswithblogs.net/thanigai/archive/2009/05/05/gridview-fixed-header.aspx [ ^ ]

http://weblogs.asp.net/dwahlin/archive/2007/07/31/freeze-asp-net-gridview-headers-by-creating-client-side-extenders.aspx[^]
http://forums.asp.net/t/1120278.aspx[^]
Freezing ASP.NET GridView Header With JavaScript and CSS[^]
http://geekswithblogs.net/thanigai/archive/2009/05/05/gridview-fixed-header.aspx[^]

这篇关于如何获取带有冻结的标题和列的GridView的水平和垂直滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！