asp.net实现固定GridView标题栏的方法(冻结列功能)
程序员文章站
2024-02-10 14:52:22
本文实例讲述了asp.net实现固定gridview标题栏的方法。分享给大家供大家参考,具体如下:
<%@ page language="c#" %>...
本文实例讲述了asp.net实现固定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; }
更多关于asp.net相关内容感兴趣的读者可查看本站专题:《asp.net操作json技巧总结》、《asp.net字符串操作技巧汇总》、《asp.net操作xml技巧总结》、《asp.net文件操作技巧汇总》、《asp.net ajax技巧总结专题》及《asp.net缓存操作技巧总结》。
希望本文所述对大家asp.net程序设计有所帮助。