（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>
前台代码要点说明：
一、源码中的 JavaScript 控制代码必须得到 GridView 网格控件，因此必须写在 GridView 网格控件以后。(这个不是太理解)
二、 fixedColsdd 设置要固定的列数，这里设置固定3列 即： fixedCols: 3,
三、须要引用JavaScript 和 CSS 文件：javascript
< link href ="superTables_Default.css" rel ="Stylesheet" type ="text/css" />
具体能够下载源文件。http://download.csdn.net/detail/liujun13579/5332296css
后台代码；
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();
}
}
效果图以下：
