本文介绍了固定GridView中的页眉页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在网格视图中尝试修复页眉和页脚。但是标题单独固定但页脚没有固定。请帮我修理。 以下技术取自互联网。 <％@ Page 语言 = C＃ AutoEventWireup = true CodeFile = GridScrolling.aspx.cs 继承 = GridScrolling ％> < ！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // EN http：// www。 w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> < html xmlns = http://www.w3.org/1999/xhtml > < head runat = server > < title > < / title > <！ - 导入JQuery插件从这里开始 - > < script 类型 = text / jscript src = jquery / jquery-1.9.1.js > < / script > < script 类型 = text / jscript src = jquery / jquery-ui-1.10.3.js > < / script > < link rel = stylesheet href = jquery / jquery-ui.css type = text / css / > < style type = text / css > 。 divgrid { height ： 500px; width ： 100％; } 。 divgrid table { width ： 100％; } 。 divgrid table th { background-color ： 绿色; 颜色 ： #fff; } < / 样式 > < ; script type = text / javascript > $（ document ）。ready（ function （）{ 尝试 { $（ .divgrid ）.each（ function （）{ var grid = $（ this ）。find（ 表）[ 0 ]; var ScrollHeight = $（ this ）。height（）; var gridWidth = $（ this ）。width（）; var headerCellWidths = new 数组（）; for （ var i = 0 ; i< grid.getElementsByTagName（' TH'）。length; i ++）{ headerCellWidths [i] = grid.getElementsByTagName（' TH'）[i] .offsetWidth; } grid.parentNode.appendChild（ document .createElement（' DIV'））; var parentDiv = grid.parentNode; var table = document .createElement（' table'）; for （i = 0 ; i< grid.attributes.length; i ++）{ if （grid.attributes [i] .specified&& grid.attributes [i] .name！= ' id'）{ table.setAttribute（grid.attributes [i] .name，grid.attributes [i] .value ）; } } table.style.cssText = grid.style.cssText; table.style.width = gridWidth + ' px'; table.appendChild（ document .createElement（' TBODY'））; table.getElementsByTagName（' tbody'）[ 0 ]。appendChild（grid.getElementsByTagName（' TR'）[ 0 ]）; var cells = table.getElementsByTagName（' TH'）; var gridRow = grid.getElementsByTagName（' TR'）[ 0 ]; for （ var i = 0 ; i< cells.length; i ++）{ var width; if （headerCellWidths [i]> gridRow.getElementsByTagName（' TD'）[i] .offsetWidth）{ width = headerCellWidths [i]; } else { width = gridRow.getElementsByTagName（' TD'）[I] .offsetWidth; } cells [i] .style.width = parseInt （width - 3 ）+ ' px'; gridRow.getElementsByTagName（' TD'）[i] .style.width = parseInt （width - 3 ）+ ' PX'; } var gridHeight = grid.offsetHeight; if （gridHeight< ScrollHeight） ScrollHeight = gridHeight; parentDiv.removeChild（grid）; var dummyHeader = document .createElement（' div'）; dummyHeader.appendChild（table）; parentDiv.appendChild（dummyHeader）; var scrollableDiv = document .createElement（' div'）; if （ parseInt （gridHeight）> ScrollHeight）{ gridWidth = parseInt （gridWidth）+ 17 ; } scrollableDiv.style.cssText = ' overflow：auto; height：' + ScrollHeight + ' px; width：' + gridWidth + ' px'; scrollableDiv.appendChild（grid）; parentDiv.appendChild（scrollableDiv）; // 固定页脚 var dummyFooter = document .createElement（' DIV'）; dummyFooter.innerHTML = dummyHeader.innerHTML; var footertr = grid.rows [grid.rows.length - 1 ]; grid.deleteRow（grid.rows.length - 1 ）; gridHeight = grid.offsetHeight; if （gridHeight< ScrollHeight） ScrollHeight = gridHeight; scrollableDiv.style.height = ScrollHeight + ' px'; dummyFooter.getElementsByTagName（' 表'）[ 0 ]。deleteRow（ 0 ）; dummyFooter.getElementsByTagName（' 表'）[ 0 ]的appendChild（footertr）。 gridRow = dummyHeader.getElementsByTagName（' 表'）[ 0 ]。getElementsByTagName（' TR'）[ 0 ]; for （ var i = 0 ; i< footertr.cells.length; i ++）{ var width; if （headerCellWidths [i]> gridRow.getElementsByTagName（' TH'）[i] .offsetWidth）{ width = headerCellWidths [i]; } else { width = gridRow.getElementsByTagName（' TH'）[i] .offsetWidth; } footertr.cells [i] .style.width = parseInt （width - 3 ）+ ' px'; } parentDiv.appendChild（dummyFooter）; }）; } catch （错误）{} } ）; < / script > < / head > < body > < 表单 id = form1 runat = server > < div > < div class = divgrid > < asp：GridView ID = gvEmployees runat = server ShowFooter = true AutoGenerateColumns = false > < FooterStyle BackColor = 绿色 / > < 列 > < asp：BoundField DataField = ModuleID HeaderText = 模块ID 可见 = false HeaderStyle-Font-Bold = true / > < asp：BoundField DataField = ModuleName HeaderText = 模块名称 HeaderStyle-Font-Bold = true / > < asp：TemplateField ItemStyle-HorizontalAlign = 中心 > < HeaderTemplate > < 输入 id = chkAll runat = server type = 复选框 / > < / HeaderTemplate > < ItemTemplate > < asp：CheckBox runat = server ID = CheckBoxField 已选中 =' <％ #DataBinder.Eval（Container.DataItem， ActiveStatus）％> ' / > < / ItemTemplate > < FooterTemplate > < asp：按钮 ID = btnUpdate runat = server 文字 = 更新 / > < / FooterTemplate > < / asp：TemplateField > < asp：BoundField DataField = SubModuleID HeaderText = 子模块ID 可见 = false HeaderStyle-Font-Bold = true / > < asp：BoundField DataField = SubModuleName HeaderText = 子模块名称 HeaderStyle- Font-Bold = true / > < /列 > < / asp：GridView > < / div > < / div > < / form > < / body > < / html > 代码背后： 使用系统; 使用 System.Collections.Generic; 使用 System.Linq; 使用 System.Web; 使用 System.Web.UI; 使用 System.Web.UI.WebControls; 使用 System.Data.SqlClient; 使用 System.Data; 使用 System.Configuration; public partial class GridScrolling：System.Web.UI.Page { public string DBConStr = ; /// < 摘要 > /// 构造函数 - 初始化数据库连接字符串 /// < / summary > public GridScrolling（） { 尝试 { DBConStr = ConfigurationManager.ConnectionStrings [ ATM_ADMIN]的ToString（）修剪（）; } catch （System.Exception ex） { ExceptionUtility.ExceptionHandling.LogException（ex，ex.Source）的ToString（））; } } 受保护 void Page_Load（ object sender，EventArgs e） { try { 使用（SqlConnection _SQLCon = new SqlConnection（DBConStr）） { DataSet ds = new DataSet（）; _SQLCon.Open（）; 使用（SqlCommand _SQLCmd = new SqlCommand（ Fetch_Role_Module_Details，_SQLCon）） { _SQLCmd.CommandType = CommandType.StoredProcedure; _SQLCmd.Parameters.Add（ @ RoleName，SqlDbType.NVarChar）.Value = 分支; _SQLCmd.ExecuteNonQuery（）; SqlDataAdapter _SQLAda = new SqlDataAdapter（_SQLCmd）; _SQLAda.Fill（ds）; gvEmployees.DataSource = ds.Tables [ 0 ]。DefaultView; gvEmployees.DataBind（）; } } } catch （System.Exception Ex） { ExceptionUtility .ExceptionHandling.LogException（Ex，Ex.Source.ToString（））; } } } 解决方案 （ document).ready(function () { try {(\".divgrid\").each(function () { var grid =(this).find(\"table\")[0]; var ScrollHeight =I'm trying fixed header and footer in grid view. But header alone fixed but footer does not fixed. Please help me to fix.Below technique has taken from internet.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridScrolling.aspx.cs" Inherits="GridScrolling" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <!-- Import JQuery Plugins Starts Here --> <script type="text/jscript" src="jquery/jquery-1.9.1.js"></script> <script type="text/jscript" src="jquery/jquery-ui-1.10.3.js"></script> <link rel="stylesheet" href="jquery/jquery-ui.css" type="text/css" /> <style type="text/css"> .divgrid { height: 500px; width: 100%; } .divgrid table { width: 100%; } .divgrid table th { background-color: Green; color: #fff; } </style> <script type="text/javascript"> $(document).ready(function () { try { $(".divgrid").each(function () { var grid = $(this).find("table")[0]; var ScrollHeight = $(this).height(); var gridWidth = $(this).width(); var headerCellWidths = new Array(); for (var i = 0; i < grid.getElementsByTagName('TH').length; i++) { headerCellWidths[i] = grid.getElementsByTagName('TH')[i].offsetWidth; } grid.parentNode.appendChild(document.createElement('div')); var parentDiv = grid.parentNode; var table = document.createElement('table'); for (i = 0; i < grid.attributes.length; i++) { if (grid.attributes[i].specified && grid.attributes[i].name != 'id') { table.setAttribute(grid.attributes[i].name, grid.attributes[i].value); } } table.style.cssText = grid.style.cssText; table.style.width = gridWidth + 'px'; table.appendChild(document.createElement('tbody')); table.getElementsByTagName('tbody')[0].appendChild(grid.getElementsByTagName('TR')[0]); var cells = table.getElementsByTagName('TH'); var gridRow = grid.getElementsByTagName('TR')[0]; for (var i = 0; i < cells.length; i++) { var width; if (headerCellWidths[i] > gridRow.getElementsByTagName('TD')[i].offsetWidth) { width = headerCellWidths[i]; } else { width = gridRow.getElementsByTagName('TD')[i].offsetWidth; } cells[i].style.width = parseInt(width - 3) + 'px'; gridRow.getElementsByTagName('TD')[i].style.width = parseInt(width - 3) + 'px'; } var gridHeight = grid.offsetHeight; if (gridHeight < ScrollHeight) ScrollHeight = gridHeight; parentDiv.removeChild(grid); var dummyHeader = document.createElement('div'); dummyHeader.appendChild(table); parentDiv.appendChild(dummyHeader); var scrollableDiv = document.createElement('div'); if (parseInt(gridHeight) > ScrollHeight) { gridWidth = parseInt(gridWidth) + 17; } scrollableDiv.style.cssText = 'overflow:auto;height:' + ScrollHeight + 'px;width:' + gridWidth + 'px'; scrollableDiv.appendChild(grid); parentDiv.appendChild(scrollableDiv); //fixed footer var dummyFooter = document.createElement('div'); dummyFooter.innerHTML = dummyHeader.innerHTML; var footertr = grid.rows[grid.rows.length - 1]; grid.deleteRow(grid.rows.length - 1); gridHeight = grid.offsetHeight; if (gridHeight < ScrollHeight) ScrollHeight = gridHeight; scrollableDiv.style.height = ScrollHeight + 'px'; dummyFooter.getElementsByTagName('Table')[0].deleteRow(0); dummyFooter.getElementsByTagName('Table')[0].appendChild(footertr); gridRow = dummyHeader.getElementsByTagName('Table')[0].getElementsByTagName('TR')[0]; for (var i = 0; i < footertr.cells.length; i++) { var width; if (headerCellWidths[i] > gridRow.getElementsByTagName('TH')[i].offsetWidth) { width = headerCellWidths[i]; } else { width = gridRow.getElementsByTagName('TH')[i].offsetWidth; } footertr.cells[i].style.width = parseInt(width - 3) + 'px'; } parentDiv.appendChild(dummyFooter); }); } catch (err) { } } ); </script></head><body> <form id="form1" runat="server"> <div> <div class="divgrid"> <asp:GridView ID="gvEmployees" runat="server" ShowFooter="true" AutoGenerateColumns="false"> <FooterStyle BackColor="Green" /> <Columns> <asp:BoundField DataField="ModuleID" HeaderText="Module ID" Visible="false" HeaderStyle-Font-Bold="true" /> <asp:BoundField DataField="ModuleName" HeaderText="Module Name" HeaderStyle-Font-Bold="true" /> <asp:TemplateField ItemStyle-HorizontalAlign="Center"> <HeaderTemplate> <input id="chkAll" runat="server" type="checkbox" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox runat="server" ID="CheckBoxField" Checked='<%#DataBinder.Eval(Container.DataItem, "ActiveStatus")%>' /> </ItemTemplate> <FooterTemplate> <asp:Button ID="btnUpdate" runat="server" Text="Update" /> </FooterTemplate> </asp:TemplateField> <asp:BoundField DataField="SubModuleID" HeaderText="Sub Module ID" Visible="false" HeaderStyle-Font-Bold="true" /> <asp:BoundField DataField="SubModuleName" HeaderText="Sub Module Name" HeaderStyle-Font-Bold="true" /> </Columns> </asp:GridView> </div> </div> </form></body></html>In Code behind:using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Data.SqlClient;using System.Data;using System.Configuration;public partial class GridScrolling : System.Web.UI.Page{ public string DBConStr = ""; /// <summary> /// Constructor - Initialize database connection string /// </summary> public GridScrolling() { try { DBConStr = ConfigurationManager.ConnectionStrings["ATM_ADMIN"].ToString().Trim(); } catch (System.Exception ex) { ExceptionUtility.ExceptionHandling.LogException(ex, ex.Source.ToString()); } } protected void Page_Load(object sender, EventArgs e) { try { using (SqlConnection _SQLCon = new SqlConnection(DBConStr)) { DataSet ds = new DataSet(); _SQLCon.Open(); using (SqlCommand _SQLCmd = new SqlCommand("Fetch_Role_Module_Details", _SQLCon)) { _SQLCmd.CommandType = CommandType.StoredProcedure; _SQLCmd.Parameters.Add("@RoleName", SqlDbType.NVarChar).Value = "Branch"; _SQLCmd.ExecuteNonQuery(); SqlDataAdapter _SQLAda = new SqlDataAdapter(_SQLCmd); _SQLAda.Fill(ds); gvEmployees.DataSource = ds.Tables[0].DefaultView; gvEmployees.DataBind(); } } } catch (System.Exception Ex) { ExceptionUtility.ExceptionHandling.LogException(Ex, Ex.Source.ToString()); } }} 解决方案 (document).ready(function () { try {(".divgrid").each(function () { var grid =(this).find("table")[0]; var ScrollHeight = 这篇关于固定GridView中的页眉页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
