• 固定GridView 的表头和某几列


    一、首先引用 JavaScript 和 CSS 文件:

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

    二、添加自定义的 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>

    三、添加 GridView 网格控件并进行相关设置(包括:后台的数据绑定 和 前台的显示配置)

    <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>

     四、在 GridView 网格控件的下面添加 JavaScript 控制代码:

    <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",
           fixedCols : 1,
           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>

    注意:此 JavaScript 控制代码必须获得 GridView 网格控件,所以必须写在 GridView 网格控件之后。

     

    效果如下:

     

     

    全部代码如下

    Default.aspx:

    View Code
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SuperTables._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>

        <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",
           fixedCols : 
    1,
           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>

    Default.aspx.cs

    View Code
    namespace SuperTables
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                StreetLightRunStatus_BLL streetLightRunStatus_BLL = new StreetLightRunStatus_BLL();
                DataTable dt_Report = streetLightRunStatus_BLL.
                            Get_Run_Report_Data("17""2011""09""发电量""风机");
                this.grid_Report.DataSource = dt_Report;
                this.grid_Report.DataBind();
            }
        }
    }

     

    参考来源:http://www.cnblogs.com/RobotTech/archive/2008/07/23/1249328.html

    Demo下载 (注意:其中包含原始示例[FixedHeader_Demo.rar]文件)

     

    作者: XuGang   网名:钢钢
    出处: http://xugang.cnblogs.com
    声明: 本文版权归作者和博客园共有。转载时必须保留此段声明,且在文章页面明显位置给出原文连接地址!
  • 相关阅读:
    利用matlab给图像加高斯噪声
    频谱分析代码片段2
    相关性分析代码片段2
    相关性分析代码片段
    频谱分析代码片段
    大脑提取每一个体素26领域的matlab代码
    当前所看论文记录
    论文阅读笔记
    余弦距离、欧氏距离和杰卡德相似性度量的对比分析 by ChaoSimple
    Container With Most Water
  • 原文地址:https://www.cnblogs.com/xugang/p/2226857.html
Copyright © 2020-2023  润新知