固定GridView 的表头和某几列

博客园 - 钢钢

Hadoop 调研笔记使用SerialPort 对象实现串口拨号器通信[下] 使用SerialPort 对象实现串口拨号器通信[上] SQL Server 2005 创建分区表考勤表生成工具介绍及使用说明 Modbus RTU 通信工具设计 SQL Server 中，实现 varbinary 与 varchar 类型之间的数据转换使用C# 实现串口拨号器的SIM卡通信[修正版] 使用C# 实现串口拨号器的SIM卡通信什么是BCD 码我的INI 配置文件读写动态库关于ASP.NET 将数据导出成Excel 的总结[补充] 子角色权限的实现两个横向菜单栏示例 C# 实现16进制和字符串之间转换的代码[转] SQL Server 中几个有用的特殊函数 SQLServer 2005 XML 在 T-SQL 查询中的典型应用[转] 关于ASP.NET 将数据导出成Excel 的总结[下] 关于ASP.NET 将数据导出成Excel 的总结[中]

固定GridView 的表头和某几列

钢钢 · 2011-10-27 · via 博客园 - 钢钢

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

二、添加自定义的 CSS 样式：

三、添加 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>

注意：此 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">

(

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]文件)

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

博客园 - 钢钢