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

前端技术 2023/09/08 .NET

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

本文地址：https://www.stayed.cn/item/22667

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案