首页 > > 网络编程 > Asp.Net编程 >

asp.net实现固定GridView标题栏的方法

2020-01-18 16:00:39来源：爱站网 阅读 ()

新老客户大回馈,云服务器低至5折

在asp.net中，GridView左侧有n列被冻结的列，其余列限制宽度而且都会显示水平滚动条，下面，爱站技术频道就具体去了解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实现固定GridView标题栏的方法吧，关注js.aizhan.com，爱站技术频道将提供更多专业资讯哦。


原文链接:https://js.aizhan.com/develop/aspnet/11207.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：Asp.net管理信息系统中数据统计功能的实现方法

下一篇：ASP.NET MVC图片上传前预览简单实现

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签