当前位置: 移动技术网 > IT编程>开发语言>.net > asp.net实现固定GridView标题栏的方法(冻结列功能)

asp.net实现固定GridView标题栏的方法(冻结列功能)

2017年12月12日  | 移动技术网IT编程  | 我要评论

图库网站,刘天礼吉他教学,北京恋足

本文实例讲述了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程序设计有所帮助。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网