asp.net实现固定GridView标题栏的方法(冻结列功能) 本文实例讲述了asp.net实现固定GridView标题栏的方法。分享给大家供大家参考，具体如下： <%@ Page Language="C#" %> <%@ Import Namespace="System.Data" %> // 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("

"); 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 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 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 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; } 更多关于asp.net相关内容感兴趣的读者可查看本站专题：《asp.net操作json技巧总结》、《asp.net字符串操作技巧汇总》、《asp.net操作XML技巧总结》、《asp.net文件操作技巧汇总》、《asp.net ajax技巧总结专题》及《asp.net缓存操作技巧总结》。希望本文所述对大家asp.net程序设计有所帮助。