ASP.net表格GridView表头显示表头、滚动条

ASP.net表头显示表头、滚动条

<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>

1、表头和内容的样式：
        .gridview_header
        {
            height: 24px;
            width: 98.65%;
            overflow-x: hidden;
            overflow-y: hidden;
        }
        .gridview_content
        {
            height: 110px;
            width: 100%;
        }
        .gridview_rowStyle
        {
            border: 1px solid #bd7b7b;
            text-align: center;
        }
        .gridview_itemStyle
        {
            border: 1px solid #bd7b7b;
            text-align: center;
        }
2、js事件：
    <script language="javascript" type="text/javascript">
        $(function () {
            $(".gridview_content").scroll(function () {
                $(".gridview_header").scrollLeft($(".gridview_content").scrollLeft());
            });
        });
    </script>
3、后台绑定信息：
private void SetData()
        {
            #region
            DataTable dt = new DataTable();
            dt.Columns.Add("ROWNO");
            dt.Columns.Add("ROWSTATENAME");
            dt.Columns.Add("NETPOINTNAME");
            for (int i = 0; i < 20; i++)
            {
                DataRow dr = dt.NewRow();
                dr["ROWNO"] = i.ToString();
                dr["ROWSTATENAME"] = "有效";
                dr["NETPOINTNAME"] = "深圳";
                dt.Rows.Add(dr);
            }
            this.gridView.DataSource = dt;
            this.gridView.DataBind();
            this.gridView1.DataSource = dt;
            this.gridView1.DataBind();
            #endregion
        }
4、界面代码：

    <div class="gridview_header">
        <table cellspacing="2" cellpadding="2" rules="all" border="1" id="GvGoods_sum_head"
            style="width: 2000px; height: 100%; border-collapse: collapse;">
            <tr align="left" style="background-color: #FCB5AF; height: 100%">
                <th scope="col" align="center" style="width: 1.5%;">
                    明细号
                </th>
                <th scope="col" style="width: 2%;">
                    明细状态
                </th>
                <th scope="col" style="width: 4%;">
                    网点名称
                </th>
                <th scope="col" style="width: 4%;">
                    网点名称
                </th>
                <th scope="col" style="width: 4%;">
                    网点名称
                </th>
                <th scope="col" style="width: 4%;">
                    网点名称
                </th>
                <th scope="col" style="width: 4%;">
                    网点名称
                </th>
                <th scope="col" style="width: 4%;">
                    网点名称
                </th>
                <th scope="col" style="width: 4%;">
                    网点名称
                </th>
                <th scope="col" style="width: 4%;">
                    网点名称
                </th>
                <th scope="col" style="width: 4%;">
                    网点名称
                </th>
                <th scope="col" style="width: 4%;">
                    网点名称
                </th>
                <th scope="col" style="width: 4%;">
                    网点名称
                </th>
            </tr>
        </table>
    </div>
    <div class="gridview_content" style="overflow-x: scroll; overflow-y: scroll;">
        <asp:GridView ID="gridView" runat="server" AllowPaging="True" PageSize="100" AutoGenerateColumns="false"
            Width="2000px" rules="all" border="1" ShowHeader="false" CellSpacing="2" CellPadding="2">
            <Columns>
                <asp:BoundField DataField="ROWNO" HeaderText="明细号" ItemStyle-HorizontalAlign="Center"
                    HeaderStyle-Width="1.5%">
                    <ItemStyle HorizontalAlign="Center" Wrap="true" CssClass="gridview_itemStyle" Width="1.5%"
                        VerticalAlign="Middle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="ROWSTATENAME" HeaderText="明细状态" HeaderStyle-Width="2%">
                    <ItemStyle HorizontalAlign="Center" Width="2%" CssClass="gridview_itemStyle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                    <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                    <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                    <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                    <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                    <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                    <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                    <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                    <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                    <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                    <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                    <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                </asp:BoundField>
            </Columns>
            <HeaderStyle CssClass="gridview_itemStyle" />
            <RowStyle CssClass="gridview_rowStyle" Wrap="true" />
            <PagerSettings Visible="False" />
            <HeaderStyle HorizontalAlign="Center" BackColor="#FCB5AF" />
        </asp:GridView>
    </div>