GridView固定表头和首列

最新推荐文章于 2019-10-11 18:32:20 发布

idtugv

最新推荐文章于 2019-10-11 18:32:20 发布

阅读量1.5k

点赞数 1

分类专栏： .net 文章标签： string asp server xhtml div object

.net 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

下载：GridView固定表头和首列

关键代码：

        /*固定行头样式*/.fixRowHead
        {
            position: relative;
            left: expression(this.parentElement.parentElement.parentElement.parentElement.parentElement.scrollLeft);
            z-index: 10;
        }
        /*固定表头样式*/.fixColHead
        {
            position: relative;
            top: expression(this.offsetParent.scrollTop);
            z-index: 11;
        }

页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FixHeadAndFirstCol.aspx.cs"
    Inherits="FixHeadAndFirstCol._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>固定表头和首列</title>
    <style type="text/css">
        /*固定行头样式*/.fixRowHead
        {
            position: relative;
            left: expression(this.parentElement.parentElement.parentElement.parentElement.parentElement.scrollLeft);
            z-index: 10;
            
            border-left: solid 1px gray;
            border-top: solid 1px gray;
        }
        /*固定表头样式*/.fixColHead
        {
            position: relative;
            top: expression(this.offsetParent.scrollTop);
            z-index: 11;
            
            background-color: #5D7B9D;
            font-weight: bold;
            color: White;
        }
        .fixColHead th
        {
            position: relative;
            border-left: solid 1px gray;
            border-top: solid 1px gray;
        }
        .gridView
        {
            border-bottom: solid 1px gray;
            border-right: solid 1px gray;
        }
        .gridView td
        {
            border-top: solid 1px gray;
            border-left: solid 1px gray;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="font-size: 10pt; margin-bottom: 8px;">
        1、固定表头和首列</div>
    <div style="overflow: auto; width: 500px; height: 300px; position: relative;">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CssClass="gridView"
            Width="850px" CellPadding="4" GridLines="None">
            <HeaderStyle CssClass="fixColHead" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
            <Columns>
                <asp:BoundField DataField="x0" HeaderText="列x0">
                    <HeaderStyle CssClass="fixRowHead" />
                    <ItemStyle CssClass="fixRowHead" Width="50px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="x1" HeaderText="列x0000001">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="x2" HeaderText="列x0000002">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="x3" HeaderText="列x0000003">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="x4" HeaderText="列x0000004">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="x5" HeaderText="列x0000005">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="x6" HeaderText="列x0000006">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="x7" HeaderText="列x0000007">
                    <ItemStyle Width="200px"></ItemStyle>
                </asp:BoundField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

后台：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace FixHeadAndFirstCol
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            BindData();
        }

        /// <summary>
        /// 绑定数据
        /// </summary>
        public void BindData()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("x0", typeof(string));
            dt.Columns.Add("x1", typeof(string));
            dt.Columns.Add("x2", typeof(string));
            dt.Columns.Add("x3", typeof(string));
            dt.Columns.Add("x4", typeof(string));
            dt.Columns.Add("x5", typeof(string));
            dt.Columns.Add("x6", typeof(string));
            dt.Columns.Add("x7", typeof(string));


            for (int i = 0; i < 100; i++)
            {
                dt.Rows.Add(i.ToString(), "xx" + i.ToString("0000"), "idt", "xhxxxxh", "xxxx", "dxdxdxxxwwww", "d6", "d77777777777777777777");
            }

            this.GridView1.DataSource = dt;
            this.GridView1.DataBind();
        }
    }
}

idtugv

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
GridView固定表头和首列

下载：GridView固定表头和首列关键代码： /*固定行头样式*/.fixRowHead { position: relative; left: expression(this.parentElement.parentElement.parentElement.parentElement.parent
复制链接

扫一扫