固定GridView标题栏，冻结列功能实现
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
DataTable t = new DataTable();
t.Columns.Add("序号", typeof(int));
t.Columns.Add("材料", typeof(string));
t.Columns.Add("单价", typeof(decimal));
for (int i = 1; i <= 10; i++)
t.Columns.Add("库存" + i, typeof(int));
Random rnd = new Random();
for (int i = 0; i < 80; i++)
{
DataRow row = t.NewRow();
row["序号"] = i + 1;
row["材料"] = Guid.NewGuid().ToString().Substring(0, 13).ToUpper();
row["单价"] = rnd.NextDouble() * 100;
for (int j = 1; j <= 10; j++)
row["库存" + j] = rnd.Next(10000);
t.Rows.Add(row);
}
GridView1.AutoGenerateColumns = false;
foreach (DataColumn c in t.Columns)
{
BoundField bf = new BoundField();
bf.DataField = c.ColumnName;
bf.HeaderText = c.ColumnName;
if (c.DataType == typeof(decimal))
bf.DataFormatString = "{0:#,0.00}";
else if (c.DataType == typeof(int))
bf.DataFormatString = "{0:#,0}";
bf.ItemStyle.HorizontalAlign =
(!string.IsNullOrEmpty(bf.DataFormatString)) ?
HorizontalAlign.Right : HorizontalAlign.Center; GridView1.Columns.Add(bf);
}
GridView1.DataSource = t;
GridView1.DataBind();
}
</script> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.altRow { background-color: #ddddff; }
</style>
<link href="superTables.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="superTables.js"></script>
<script type="text/javascript" src="jquery.superTable.js"></script>
<script type="text/javascript">
$(function() {
$("#GridView1").toSuperTable({ width: "640px", height: "480px", fixedCols: 2 })
.find("tr:even").addClass("altRow");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" Font-Size="9pt" EnableViewState="false">
</asp:GridView>
</form>
</body>
</html>
/////////////////////////////////////////////////////////////////////////////////////////
// Super Tables Plugin for jQuery - MIT Style License
// Copyright (c) 2009 Jeffrey Lee --- blog.darkthread.net
//
// A wrapper for Matt Murphy's Super Tables http://www.matts411.com/post/super_tables/
//
// Contributors:
//
/////////////////////////////////////////////////////////////////////////////////////////
////// TO CALL:
// $("...").toSuperTable(options)
//
////// OPTIONS: (order does not matter )
// cssSkin : string ( eg. "sDefault", "sSky", "sOrange", "sDark" )
// headerRows : integer ( default is 1 )
// fixedCols : integer ( default is 0 )
// colWidths : integer array ( use -1 for auto sizing )
// onStart : function ( any this.variableNameHere variables you create here can be used later ( eg. onFinish function ) )
// onFinish : function ( all this.variableNameHere variables created in this script can be used in this function )
// margin, padding, width, height, overflow...: Styles for "fakeContainer"
//
////// Example:
// $("#GridView1").toSuperTable(
// { width: "640px", height: "480px", fixedCols: 2,
// onFinish: function() { alert('Done!'); } })
// jquery.superTable.js
(function($) {
$.fn.extend(
{
toSuperTable: function(options) {
var setting = $.extend(
{
width: "640px", height: "320px",
margin: "10px", padding: "0px",
overflow: "hidden", colWidths: undefined,
fixedCols: 0, headerRows: 1,
onStart: function() { },
onFinish: function() { },
cssSkin: "sSky"
}, options);
return this.each(function() {
var q = $(this);
var id = q.attr("id");
q.removeAttr("style").wrap("<div id='" + id + "_box'></div>"); var nonCssProps = ["fixedCols", "headerRows", "onStart", "onFinish", "cssSkin", "colWidths"];
var container = $("#" + id + "_box"); for (var p in setting) {
if ($.inArray(p, nonCssProps) == -1) {
container.css(p, setting[p]);
delete setting[p];
}
} var mySt = new superTable(id, setting); });
}
});
})(jQuery);
/////////////////////////////////////////////////////////////////////////////////////////
// Super Tables v0.30 - MIT Style License
// Copyright (c) 2008 Matt Murphy --- www.matts411.com
//
// Contributors:
// Joe Gallo
/////////////////////////////////////////////////////////////////////////////////////////
////// TO CALL:
// new superTable([string] tableId, [object] options);
//
////// OPTIONS: (order does not matter )
// cssSkin : string ( eg. "sDefault", "sSky", "sOrange", "sDark" )
// headerRows : integer ( default is 1 )
// fixedCols : integer ( default is 0 )
// colWidths : integer array ( use -1 for auto sizing )
// onStart : function ( any this.variableNameHere variables you create here can be used later ( eg. onFinish function ) )
// onFinish : function ( all this.variableNameHere variables created in this script can be used in this function )
//
////// EXAMPLES:
// var myST = new superTable("myTableId");
//
// var myST = new superTable("myTableId", {
// cssSkin : "sDefault",
// headerRows : 1,
// fixedCols : 2,
// colWidths : [100, 230, 220, -1, 120, -1, -1, 120],
// onStart : function () {
// this.start = new Date();
// },
// onFinish : function () {
// alert("Finished... " + ((new Date()) - this.start) + "ms.");
// }
// });
//
////// ISSUES / NOTES:
// 1. No quirksmode support (officially, but still should work)
// 2. Element id's may be duplicated when fixedCols > 0, causing getElementById() issues
// 3. Safari will render the header row incorrectly if the fixed header row count is 1 and there is a colspan > 1 in one
// or more of the cells (fix available)
///////////////////////////////////////////superTables.js////////////////////////////////////////////// var superTable = function (tableId, options) {
/////* Initialize */
options = options || {};
this.cssSkin = options.cssSkin || "";
this.headerRows = parseInt(options.headerRows || "1");
this.fixedCols = parseInt(options.fixedCols || "0");
this.colWidths = options.colWidths || [];
this.initFunc = options.onStart || null;
this.callbackFunc = options.onFinish || null;
this.initFunc && this.initFunc(); /////* Create the framework dom */
this.sBase = document.createElement("DIV");
this.sFHeader = this.sBase.cloneNode(false);
this.sHeader = this.sBase.cloneNode(false);
this.sHeaderInner = this.sBase.cloneNode(false);
this.sFData = this.sBase.cloneNode(false);
this.sFDataInner = this.sBase.cloneNode(false);
this.sData = this.sBase.cloneNode(false);
this.sColGroup = document.createElement("COLGROUP"); this.sDataTable = document.getElementById(tableId);
this.sDataTable.style.margin = "0px"; /* Otherwise looks bad */
if (this.cssSkin !== "") {
this.sDataTable.className += " " + this.cssSkin;
}
if (this.sDataTable.getElementsByTagName("COLGROUP").length > 0) {
this.sDataTable.removeChild(this.sDataTable.getElementsByTagName("COLGROUP")[0]); /* Making our own */
}
this.sParent = this.sDataTable.parentNode;
this.sParentHeight = this.sParent.offsetHeight;
this.sParentWidth = this.sParent.offsetWidth; /////* Attach the required classNames */
this.sBase.className = "sBase";
this.sFHeader.className = "sFHeader";
this.sHeader.className = "sHeader";
this.sHeaderInner.className = "sHeaderInner";
this.sFData.className = "sFData";
this.sFDataInner.className = "sFDataInner";
this.sData.className = "sData"; /////* Clone parts of the data table for the new header table */
var alpha, beta, touched, clean, cleanRow, i, j, k, m, n, p;
this.sHeaderTable = this.sDataTable.cloneNode(false);
if (this.sDataTable.tHead) {
alpha = this.sDataTable.tHead;
this.sHeaderTable.appendChild(alpha.cloneNode(false));
beta = this.sHeaderTable.tHead;
} else {
alpha = this.sDataTable.tBodies[0];
this.sHeaderTable.appendChild(alpha.cloneNode(false));
beta = this.sHeaderTable.tBodies[0];
}
alpha = alpha.rows;
for (i=0; i<this.headerRows; i++) {
beta.appendChild(alpha[i].cloneNode(true));
}
this.sHeaderInner.appendChild(this.sHeaderTable); if (this.fixedCols > 0) {
this.sFHeaderTable = this.sHeaderTable.cloneNode(true);
this.sFHeader.appendChild(this.sFHeaderTable);
this.sFDataTable = this.sDataTable.cloneNode(true);
this.sFDataInner.appendChild(this.sFDataTable);
} /////* Set up the colGroup */
alpha = this.sDataTable.tBodies[0].rows;
for (i=0, j=alpha.length; i<j; i++) {
clean = true;
for (k=0, m=alpha[i].cells.length; k<m; k++) {
if (alpha[i].cells[k].colSpan !== 1 || alpha[i].cells[k].rowSpan !== 1) {
i += alpha[i].cells[k].rowSpan - 1;
clean = false;
break;
}
}
if (clean === true) break; /* A row with no cells of colSpan > 1 || rowSpan > 1 has been found */
}
cleanRow = (clean === true) ? i : 0; /* Use this row index to calculate the column widths */
for (i=0, j=alpha[cleanRow].cells.length; i<j; i++) {
if (i === this.colWidths.length || this.colWidths[i] === -1) {
this.colWidths[i] = alpha[cleanRow].cells[i].offsetWidth;
}
}
for (i=0, j=this.colWidths.length; i<j; i++) {
this.sColGroup.appendChild(document.createElement("COL"));
this.sColGroup.lastChild.setAttribute("width", this.colWidths[i]);
}
this.sDataTable.insertBefore(this.sColGroup.cloneNode(true), this.sDataTable.firstChild);
this.sHeaderTable.insertBefore(this.sColGroup.cloneNode(true), this.sHeaderTable.firstChild);
if (this.fixedCols > 0) {
this.sFDataTable.insertBefore(this.sColGroup.cloneNode(true), this.sFDataTable.firstChild);
this.sFHeaderTable.insertBefore(this.sColGroup.cloneNode(true), this.sFHeaderTable.firstChild);
} /////* Style the tables individually if applicable */
if (this.cssSkin !== "") {
this.sDataTable.className += " " + this.cssSkin + "-Main";
this.sHeaderTable.className += " " + this.cssSkin + "-Headers";
if (this.fixedCols > 0) {
this.sFDataTable.className += " " + this.cssSkin + "-Fixed";
this.sFHeaderTable.className += " " + this.cssSkin + "-FixedHeaders";
}
} /////* Throw everything into sBase */
if (this.fixedCols > 0) {
this.sBase.appendChild(this.sFHeader);
}
this.sHeader.appendChild(this.sHeaderInner);
this.sBase.appendChild(this.sHeader);
if (this.fixedCols > 0) {
this.sFData.appendChild(this.sFDataInner);
this.sBase.appendChild(this.sFData);
}
this.sBase.appendChild(this.sData);
this.sParent.insertBefore(this.sBase, this.sDataTable);
this.sData.appendChild(this.sDataTable); /////* Align the tables */
var sDataStyles, sDataTableStyles;
this.sHeaderHeight = this.sDataTable.tBodies[0].rows[(this.sDataTable.tHead) ? 0 : this.headerRows].offsetTop;
sDataTableStyles = "margin-top: " + (this.sHeaderHeight * -1) + "px;";
sDataStyles = "margin-top: " + this.sHeaderHeight + "px;";
sDataStyles += "height: " + (this.sParentHeight - this.sHeaderHeight) + "px;";
if (this.fixedCols > 0) {
/* A collapsed table's cell's offsetLeft is calculated differently (w/ or w/out border included) across broswers - adjust: */
this.sFHeaderWidth = this.sDataTable.tBodies[0].rows[cleanRow].cells[this.fixedCols].offsetLeft;
if (window.getComputedStyle) {
alpha = document.defaultView;
beta = this.sDataTable.tBodies[0].rows[0].cells[0];
if (navigator.taintEnabled) { /* If not Safari */
this.sFHeaderWidth += Math.ceil(parseInt(alpha.getComputedStyle(beta, null).getPropertyValue("border-right-width")) / 2);
} else {
this.sFHeaderWidth += parseInt(alpha.getComputedStyle(beta, null).getPropertyValue("border-right-width"));
}
} else if (/*@cc_on!@*/0) { /* Internet Explorer */
alpha = this.sDataTable.tBodies[0].rows[0].cells[0];
beta = [alpha.currentStyle["borderRightWidth"], alpha.currentStyle["borderLeftWidth"]];
if(/px/i.test(beta[0]) && /px/i.test(beta[1])) {
beta = [parseInt(beta[0]), parseInt(beta[1])].sort();
this.sFHeaderWidth += Math.ceil(parseInt(beta[1]) / 2);
}
} /* Opera 9.5 issue - a sizeable data table may cause the document scrollbars to appear without this: */
if (window.opera) {
this.sFData.style.height = this.sParentHeight + "px";
} this.sFHeader.style.width = this.sFHeaderWidth + "px";
sDataTableStyles += "margin-left: " + (this.sFHeaderWidth * -1) + "px;";
sDataStyles += "margin-left: " + this.sFHeaderWidth + "px;";
sDataStyles += "width: " + (this.sParentWidth - this.sFHeaderWidth) + "px;";
} else {
sDataStyles += "width: " + this.sParentWidth + "px;";
}
this.sData.style.cssText = sDataStyles;
this.sDataTable.style.cssText = sDataTableStyles; /////* Set up table scrolling and IE's onunload event for garbage collection */
(function (st) {
if (st.fixedCols > 0) {
st.sData.onscroll = function () {
st.sHeaderInner.style.right = st.sData.scrollLeft + "px";
st.sFDataInner.style.top = (st.sData.scrollTop * -1) + "px";
};
} else {
st.sData.onscroll = function () {
st.sHeaderInner.style.right = st.sData.scrollLeft + "px";
};
}
if (/*@cc_on!@*/0) { /* Internet Explorer */
window.attachEvent("onunload", function () {
st.sData.onscroll = null;
st = null;
});
}
})(this); this.callbackFunc && this.callbackFunc();
};
/*
/////////////////////////////////////////////////////////////////////////////////////////
// Super Tables v0.30 - MIT Style License
// Copyright (c) 2008 Matt Murphy --- www.matts411.com
//
// Contributors:
// Joe Gallo
////////////////////////////////////////superTables.css/////////////////////////////////////////////////
*/
.sBase {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
} /* HEADERS */
.sHeader {
position: absolute;
z-index: 3;
background-color: #ffffff;
}
.sHeaderInner {
position: relative;
}
.sHeaderInner table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
background-color: #ffffff; /* Here b/c of Opera 9.25 :( */
} /* HEADERS - FIXED */
.sFHeader {
position: absolute;
z-index: 4;
overflow: hidden;
}
.sFHeader table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
background-color: #ffffff; /* Here b/c of Opera 9.25 :( */
} /* BODY */
.sData {
position: absolute;
z-index: 2;
overflow: auto;
background-color: #ffffff;
}
.sData table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
} /* BODY - FIXED */
.sFData {
position: absolute;
z-index: 1;
background-color: #ffffff;
}
.sFDataInner {
position: relative;
}
.sFData table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
} /*
/////////////////////////////////////////////////////////////////////////////////////////
// Super Tables - Skin Classes
// Remove if not needed
/////////////////////////////////////////////////////////////////////////////////////////
*/ /* sDefault */
.sDefault {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
}
.sDefault th, .sDefault td {
border: 1px solid #cccccc;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sDefault th {
background-color: #e5e5e5;
border-color: #c5c5c5;
}
.sDefault-Fixed {
background-color: #eeeeee;
border-color: #c5c5c5;
} /* sSky */
.sSky {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
}
.sSky th, .sSky td {
border: 1px solid #9eb6ce;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sSky th {
background-color: #CFDCEE;
}
.sSky-Fixed {
background-color: #e4ecf7;
} /* sOrange */
.sOrange {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
}
.sOrange th, .sOrange td {
border: 1px solid #cebb9e;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sOrange th {
background-color: #ECD8C7;
}
.sOrange-Fixed {
background-color: #f7ede4;
} /* sDark */
.sDark {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
color: #ffffff;
}
.sDark th, .sDark td {
border: 1px solid #555555;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sDark th {
background-color: #000000;
}
.sDark-Fixed {
background-color: #222222;
}
.sDark-Main {
background-color: #333333;
}
固定GridView标题栏，冻结列功能实现的更多相关文章
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能：彻底解决高度问题
前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案 JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bo ...
- Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格
目录 一.概述 二.效果展示 三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线 四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...
- 怎么在Microsoft Project中冻结列
在用Project排项目计划的时候如果在Gantt图中列比较多,左右滚动的时候就会经想像如果能想Excel一样冻结某些列就方便多了,其实在Project中虽然没有冻结列的功能,但通过一些变通方法还是可 ...
- jqgrid 设置冻结列
有时,jqgrid表格的列非常多,而表格的宽度值是固定的,我们需要在表格底部出现滚动条,并且固定前面几个列作为数据参照项,如何实现? 需要用的jqgrid冻结列,步骤如下: 1)设置需要冻结的列属性, ...
- css冻结列的效果
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8&quo ...
- DataGridView使用技巧六：冻结列或行
一.冻结列 DataGridViewColumn.Frozen属性为true时,该列左侧的所有列被固定,横向滚动时固定列不随滚动条滚动而左右移动.这对于重要列固定很有用. 示例:通过程序固定左侧第二列 ...
- 在DataGridView控件中实现冻结列分界线
我们在使用Office Excel的时候,有很多时候需要冻结行或者列.这时,Excel会在冻结的行列和非冻结的区域之间绘制上一条明显的黑线.如下图: (图1) WinForm下的DataGridVie ...
- Bootstrap Blazor 组件介绍 Table （一）自动生成列功能介绍
Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...
随机推荐
- js实现换肤效果
一,js换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 ...
- 团队作业4--第一次项目冲刺(Alpha版本) 5
一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 对前两天完成的功能进行整合 测试完成功能(测试算法是否有bug,界面设计是否人性化,适合用户使用.) 四.困难与问题 在对前两 ...
- 201521123056 《Java程序设计》第7周学习总结
1. 本周学习总结 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 1.2 解释E remove(int index)源代码 1.3 结合1. ...
- 201521123028 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 Q1.clone方法 1.1 Object ...
- 201521123035《Java程序设计》第三周学习总结
本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 书面作业 1.代码 ...
- Ubuntu下PHP MySQL环境搭建-upcoming-ChinaUnix博客
编程语言选择php5 , web服务器选择Apache2 ,后台数据库选择MySQL首先安装编译工具, 打开终端 sudo apt-get install build-essential autoco ...
- 201521123033《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...
- 201521123117 《Java程序设计》第9周学习总结
1. 本周学习总结 2. 书面作业 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 经常出现Numbe ...
- 快递鸟顺丰物流api接口对接多种方法整理
目前很多自营电商平台.ERP系统.仓储系统.快递柜企业,对物流模块数据需求还是比较旺盛的.之前有介绍过简单的接口对接方法,这次给大家整理介绍两种快递数据的获取方法. 接口秘钥可以向顺丰公司申请,或者一 ...
- spring boot / cloud (十七) 快速搭建注册中心和配置中心
spring boot / cloud (十七) 快速搭建注册中心和配置中心 本文将使用spring cloud的eureka和config server来搭建. 然后搭建的模式,有很多种,本文主要聊 ...