(superTables)固定GridView 的表头和某几列(GridView冻结表头和列)用法

这是别人的一个列子,我加了一点使用说明。
这需要一个样式表和js,具体可以下载源文件  http://download.csdn.net/detail/liujun13579/5332296

前台:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FixHc.aspx.cs" Inherits="FixHc" %>


<!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>css 和js固定GridView表头和某几列</title>
    <script type="text/javascript" src="superTables.js"></script>
    
    <link href="superTables_Default.css" rel="Stylesheet" type="text/css" />
    <style type="text/css">
            .gridcell{ padding:5px;}
         
         .fakeContainer {
            float: left;
            margin: 5px; 
            border: solid 1px #ccc;
            width: 630px;
            height: 250px;
            background-color: #ffffff;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:GridView ID="grid_Report" runat="server" CellPadding="3" Font-Size="14pt" 
        style="word-break:keep-all" BorderColor="#CCCCCC" BorderStyle="Solid" 
         BorderWidth="1px">
         <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" HorizontalAlign="Center"  Wrap="False" CssClass="gridcell"  />
         <RowStyle ForeColor="#000066" />
       </asp:GridView>
    </div>
    </form>
</body>
<script type="text/javascript">
    //<![CDATA[
    var grid = document.getElementById("grid_Report");
    if (grid != null && grid != undefined) {
        grid.parentNode.className = "fakeContainer";


        (function() {
            var start = new Date();
            superTable("grid_Report", {
            cssSkin: "Default",
            // fixedColsdd  设置要固定的列数,这里设置固定3列
                fixedCols: 3,
                onFinish: function() {
                    // Basic row selecting for a superTable with/without fixed columns
                    if (this.fixedCols == 0) {
                        for (var i = 0, j = this.sDataTable.tBodies[0].rows.length; i < j; i++) {
                            this.sDataTable.tBodies[0].rows[i].onclick = function(i) {
                                var clicked = false;
                                var dataRow = this.sDataTable.tBodies[0].rows[i];


                                return function() {
                                    if (clicked) {
                                        dataRow.style.backgroundColor = "#ffffff";
                                        clicked = false;
                                    }
                                    else {
                                        dataRow.style.backgroundColor = "#eeeeee";
                                        clicked = true;
                                    }
                                }
                            } .call(this, i);
                        }
                    }
                    else {
                        for (var i = 0, j = this.sDataTable.tBodies[0].rows.length; i < j; i++) {
                            //xugang  begin
                            if (i % 2 == 0) {
                                this.sDataTable.tBodies[0].rows[i].style.backgroundColor = "#f5ffef";
                            }
                            if (i >= (j - 2)) {
                                this.sDataTable.tBodies[0].rows[i].style.backgroundColor = "#eeeeee"; //"#ffffd2";
                            }
                            //xugang  end


                            this.sDataTable.tBodies[0].rows[i].onclick = this.sFDataTable.tBodies[0].rows[i].onclick = function(i) {
                                var clicked = false;
                                var dataRow = this.sDataTable.tBodies[0].rows[i];
                                var fixedRow = this.sFDataTable.tBodies[0].rows[i];


                                //var dataRow_old_Color = dataRow.style.backgroundColor;
                                //var fixedRow_old_Color = fixedRow.style.backgroundColor;
                                return function() {
                                    if (clicked) {
                                        //dataRow.style.backgroundColor = fixedRow_old_Color;//"#ffffff";
                                        //fixedRow.style.backgroundColor = fixedRow_old_Color;//"#eeeeee";
                                        clicked = false;
                                    }
                                    else {


                                        //dataRow.style.backgroundColor = "#ffffd2";
                                        //fixedRow.style.backgroundColor = "#adadad";
                                        clicked = true;
                                    }
                                }
                            } .call(this, i);
                        }
                    }


                    return this;
                }
            });
        })();


    }
    //]]>
</script>
</html>

前台代码要点说明:
1、源码中的 JavaScript 控制代码必须获得 GridView 网格控件,所以必须写在 GridView 网格控件之后。(这个不是太理解)
2、 fixedColsdd  设置要固定的列数,这里设置固定3列 即: fixedCols: 3,
3、需要引用
JavaScript 和 CSS 文件:

   < script  type ="text/javascript"  src ="superTables.js" ></ script >
   < link  href ="superTables_Default.css"  rel ="Stylesheet"  type ="text/css"   />


具体可以下载源文件。http://download.csdn.net/detail/liujun13579/5332296


后台代码;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;


public partial class FixHc : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        System.Data.DataRow dr;
        //添加列名
        dt.Columns.Add(new System.Data.DataColumn("学生班级", typeof(System.String)));
        dt.Columns.Add(new System.Data.DataColumn("学生姓名", typeof(System.String)));
        dt.Columns.Add(new System.Data.DataColumn("语文", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("数学", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("英语", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("计算机", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("物理", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("化学", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("生物", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("地理", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("历史", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("美术", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("政治", typeof(System.Decimal)));


        //用循环添加行数据
        for (int i = 0; i < 50; i++)
        {
            System.Random rd = new System.Random(Environment.TickCount * i); ;
            dr = dt.NewRow();
            dr[0] = "班级" + i.ToString();
            dr[1] = "虚拟人" + i.ToString();
            dr[2] = System.Math.Round(rd.NextDouble() * 100, 2);
            dr[3] = System.Math.Round(rd.NextDouble() * 100, 2);
            dr[4] = System.Math.Round(rd.NextDouble() * 100, 2);
            dr[5] = System.Math.Round(rd.NextDouble() * 100, 2);
            dr[6] = System.Math.Round(rd.NextDouble() * 100, 2);
            dr[7] = System.Math.Round(rd.NextDouble() * 100, 2);
            dr[8] = System.Math.Round(rd.NextDouble() * 100, 2);
            dr[9] = System.Math.Round(rd.NextDouble() * 100, 2);
            dr[10] = System.Math.Round(rd.NextDouble() * 100, 2);
            dr[11] = System.Math.Round(rd.NextDouble() * 100, 2);
            dr[12] = System.Math.Round(rd.NextDouble() * 100, 2);
            dt.Rows.Add(dr);
        }
        grid_Report.DataSource = dt;
        grid_Report.DataBind();
    }
   
}


效果图如下:

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页