asp.net实现固定GridView标题栏的方法(冻结列功能)
本文实例讲述了asp.net实现固定GridView标题栏的方法。分享给大家供大家参考，具体如下：
<%@PageLanguage="C#"%>
<%@ImportNamespace="System.Data"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<scriptrunat="server">
protectedvoidPage_Load(objectsender,EventArgse)
{
DataTablet=newDataTable();
t.Columns.Add("序号",typeof(int));
t.Columns.Add("材料",typeof(string));
t.Columns.Add("单价",typeof(decimal));
for(inti=1;i<=10;i++)
t.Columns.Add("库存"+i,typeof(int));
Randomrnd=newRandom();
for(inti=0;i<80;i++)
{
DataRowrow=t.NewRow();
row["序号"]=i+1;
row["材料"]=Guid.NewGuid().ToString().Substring(0,13).ToUpper();
row["单价"]=rnd.NextDouble()*100;
for(intj=1;j<=10;j++)
row["库存"+j]=rnd.Next(10000);
t.Rows.Add(row);
}
GridView1.AutoGenerateColumns=false;
foreach(DataColumncint.Columns)
{
BoundFieldbf=newBoundField();
bf.DataField=c.ColumnName;
bf.HeaderText=c.ColumnName;
if(c.DataType==typeof(decimal))
bf.DataFormatString="{0:#,0.00}";
elseif(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>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<styletype="text/css">
.altRow{background-color:#ddddff;}
</style>
<linkhref="superTables.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="jquery-1.3.1.js"></script>
<scripttype="text/javascript"src="superTables.js"></script>
<scripttype="text/javascript"src="jquery.superTable.js"></script>
<scripttype="text/javascript">
$(function(){
$("#GridView1").toSuperTable({width:"640px",height:"480px",fixedCols:2})
.find("tr:even").addClass("altRow");
});
</script>
</head>
<body>
<formid="form1"runat="server">
<asp:GridViewID="GridView1"runat="server"Font-Size="9pt"EnableViewState="false">
</asp:GridView>
</form>
</body>
</html>
//SuperTablesPluginforjQuery-MITStyleLicense
//Copyright(c)2009JeffreyLee---blog.darkthread.net
//
//AwrapperforMattMurphy'sSuperTableshttp://www.matts411.com/post/super_tables/
//
//Contributors:
//
//////TOCALL:
//$("...").toSuperTable(options)
//
//////OPTIONS:(orderdoesnotmatter)
//cssSkin:string(eg."sDefault","sSky","sOrange","sDark")
//headerRows:integer(defaultis1)
//fixedCols:integer(defaultis0)
//colWidths:integerarray(use-1forautosizing)
//onStart:function(anythis.variableNameHerevariablesyoucreateherecanbeusedlater(eg.onFinishfunction))
//onFinish:function(allthis.variableNameHerevariablescreatedinthisscriptcanbeusedinthisfunction)
//margin,padding,width,height,overflow...:Stylesfor"fakeContainer"
//
//////Example:
//$("#GridView1").toSuperTable(
//{width:"640px",height:"480px",fixedCols:2,
//onFinish:function(){alert('Done!');}})
//jquery.superTable.js
(function($){
$.fn.extend(
{
toSuperTable:function(options){
varsetting=$.extend(
{
width:"640px",height:"320px",
margin:"10px",padding:"0px",
overflow:"hidden",colWidths:undefined,
fixedCols:0,headerRows:1,
onStart:function(){},
onFinish:function(){},
cssSkin:"sSky"
},options);
returnthis.each(function(){
varq=$(this);
varid=q.attr("id");
q.removeAttr("style").wrap("<divid='"+id+"_box'></div>");
varnonCssProps=["fixedCols","headerRows","onStart","onFinish","cssSkin","colWidths"];
varcontainer=$("#"+id+"_box");
for(varpinsetting){
if($.inArray(p,nonCssProps)==-1){
container.css(p,setting[p]);
deletesetting[p];
}
}
varmySt=newsuperTable(id,setting);
});
}
});
})(jQuery);
//SuperTablesv0.30-MITStyleLicense
//Copyright(c)2008MattMurphy---www.matts411.com
//
//Contributors:
//JoeGallo
//////TOCALL:
//newsuperTable([string]tableId,[object]options);
//
//////OPTIONS:(orderdoesnotmatter)
//cssSkin:string(eg."sDefault","sSky","sOrange","sDark")
//headerRows:integer(defaultis1)
//fixedCols:integer(defaultis0)
//colWidths:integerarray(use-1forautosizing)
//onStart:function(anythis.variableNameHerevariablesyoucreateherecanbeusedlater(eg.onFinishfunction))
//onFinish:function(allthis.variableNameHerevariablescreatedinthisscriptcanbeusedinthisfunction)
//
//////EXAMPLES:
//varmyST=newsuperTable("myTableId");
//
//varmyST=newsuperTable("myTableId",{
//cssSkin:"sDefault",
//headerRows:1,
//fixedCols:2,
//colWidths:[100,230,220,-1,120,-1,-1,120],
//onStart:function(){
//this.start=newDate();
//},
//onFinish:function(){
//alert("Finished..."+((newDate())-this.start)+"ms.");
//}
//});
//
//////ISSUES/NOTES:
//1.Noquirksmodesupport(officially,butstillshouldwork)
//2.Elementid'smaybeduplicatedwhenfixedCols>0,causinggetElementById()issues
//3.Safariwillrendertheheaderrowincorrectlyifthefixedheaderrowcountis1andthereisacolspan>1inone
//ormoreofthecells(fixavailable)
////////////superTables.js///////////
varsuperTable=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();
/////*Createtheframeworkdom*/
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";/*Otherwiselooksbad*/
if(this.cssSkin!==""){
this.sDataTable.className+=""+this.cssSkin;
}
if(this.sDataTable.getElementsByTagName("COLGROUP").length>0){
this.sDataTable.removeChild(this.sDataTable.getElementsByTagName("COLGROUP")[0]);/*Makingourown*/
}
this.sParent=this.sDataTable.parentNode;
this.sParentHeight=this.sParent.offsetHeight;
this.sParentWidth=this.sParent.offsetWidth;
/////*AttachtherequiredclassNames*/
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";
/////*Clonepartsofthedatatableforthenewheadertable*/
varalpha,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);
}
/////*SetupthecolGroup*/
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;/*ArowwithnocellsofcolSpan>1||rowSpan>1hasbeenfound*/
}
cleanRow=(clean===true)?i:0;/*Usethisrowindextocalculatethecolumnwidths*/
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);
}
/////*Stylethetablesindividuallyifapplicable*/
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";
}
}
/////*ThroweverythingintosBase*/
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);
/////*Alignthetables*/
varsDataStyles,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){
/*Acollapsedtable'scell'soffsetLeftiscalculateddifferently(w/orw/outborderincluded)acrossbroswers-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){/*IfnotSafari*/
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"));
}
}elseif(/*@cc_on!@*/0){/*InternetExplorer*/
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);
}
}
/*Opera9.5issue-asizeabledatatablemaycausethedocumentscrollbarstoappearwithoutthis:*/
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;
/////*SetuptablescrollingandIE'sonunloadeventforgarbagecollection*/
(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){/*InternetExplorer*/
window.attachEvent("onunload",function(){
st.sData.onscroll=null;
st=null;
});
}
})(this);
this.callbackFunc&&this.callbackFunc();
};
/*
//SuperTablesv0.30-MITStyleLicense
//Copyright(c)2008MattMurphy---www.matts411.com
//
//Contributors:
//JoeGallo
////////////superTables.css////////////////
*/
.sBase{
position:relative;
width:100%;
height:100%;
overflow:hidden;
}
/*HEADERS*/
.sHeader{
position:absolute;
z-index:3;
background-color:#ffffff;
}
.sHeaderInner{
position:relative;
}
.sHeaderInnertable{
border-spacing:0px0px!important;
border-collapse:collapse!important;
width:1px!important;
table-layout:fixed!important;
background-color:#ffffff;/*Hereb/cofOpera9.25:(*/
}
/*HEADERS-FIXED*/
.sFHeader{
position:absolute;
z-index:4;
overflow:hidden;
}
.sFHeadertable{
border-spacing:0px0px!important;
border-collapse:collapse!important;
width:1px!important;
table-layout:fixed!important;
background-color:#ffffff;/*Hereb/cofOpera9.25:(*/
}
/*BODY*/
.sData{
position:absolute;
z-index:2;
overflow:auto;
background-color:#ffffff;
}
.sDatatable{
border-spacing:0px0px!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;
}
.sFDatatable{
border-spacing:0px0px!important;
border-collapse:collapse!important;
width:1px!important;
table-layout:fixed!important;
}
/*
//SuperTables-SkinClasses
//Removeifnotneeded
*/
/*sDefault*/
.sDefault{
margin:0px;
padding:0px;
border:none;
font-family:Verdana,Arial,sansserif;
font-size:0.8em;
}
.sDefaultth,.sDefaulttd{
border:1pxsolid#cccccc;
padding:3px6px3px4px;
white-space:nowrap;
}
.sDefaultth{
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,sansserif;
font-size:0.8em;
}
.sSkyth,.sSkytd{
border:1pxsolid#9eb6ce;
padding:3px6px3px4px;
white-space:nowrap;
}
.sSkyth{
background-color:#CFDCEE;
}
.sSky-Fixed{
background-color:#e4ecf7;
}
/*sOrange*/
.sOrange{
margin:0px;
padding:0px;
border:none;
font-family:Verdana,Arial,sansserif;
font-size:0.8em;
}
.sOrangeth,.sOrangetd{
border:1pxsolid#cebb9e;
padding:3px6px3px4px;
white-space:nowrap;
}
.sOrangeth{
background-color:#ECD8C7;
}
.sOrange-Fixed{
background-color:#f7ede4;
}
/*sDark*/
.sDark{
margin:0px;
padding:0px;
border:none;
font-family:Verdana,Arial,sansserif;
font-size:0.8em;
color:#ffffff;
}
.sDarkth,.sDarktd{
border:1pxsolid#555555;
padding:3px6px3px4px;
white-space:nowrap;
}
.sDarkth{
background-color:#000000;
}
.sDark-Fixed{
background-color:#222222;
}
.sDark-Main{
background-color:#333333;
}
更多关于asp.net相关内容感兴趣的读者可查看本站专题：《asp.net操作json技巧总结》、《asp.net字符串操作技巧汇总》、《asp.net操作XML技巧总结》、《asp.net文件操作技巧汇总》、《asp.netajax技巧总结专题》及《asp.net缓存操作技巧总结》。
希望本文所述对大家asp.net程序设计有所帮助。