固定GridView中的页眉页脚 [英] Fixed Header Footer in GridView

问题描述

我正在网格视图中尝试修复页眉和页脚。但是标题单独固定但页脚没有固定。请帮我修理。



以下技术取自互联网。

 <％@     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  >  <  < span class =code-leadattribute> / 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   = < span class =code-keyword> jquery / jquery-ui.css    type   =  text / css    /  >  
 <  < span class =code-leadattribute> style     type   =  text / css >  
。 divgrid  
 {
  height  ：  500px;  
  width  ：  100％;  
} 
。 divgrid   table  
 {
  width  ： < span class =code-keyword> 100％;  
} 
。 divgrid   table   th  
 {
  background-color  ： 绿色;  
 颜色 ：  #fff;  
} 
 < /  样式 >  
 < ;   script     type  < span class =code-keyword> =  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 ）+ < span class =code-string>'  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 = < span class =code-sdkkeyword> 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   = < span class =code-keyword> form1    runat   =  server >  
 <   div  >  
 <   div     class   =  divgrid >  
 <   asp：GridView     ID   =  gvEmployees     runat   =  server    ShowFooter   =  true    AutoGenerateColumns   =  false >  
 <   FooterStyle     BackColor   =  绿色    /  >  
 <  列 >  
 <   asp：BoundField     DataField   = < span class =code-keyword> ModuleID    HeaderText   = 模块ID   可见  =   false    HeaderStyle-Font-Bold   =  true    /  >  
 <   asp：BoundField     DataField   =  ModuleName    HeaderText   = 模块名称    HeaderStyle-Font-Bold   =  true    /  >  
 <   asp：TemplateField     ItemStyle-Horizo​​ntalAlign   = 中心 >  
 <   HeaderTemplate  >  
 <  输入    id   =  chkAll    runat   =  server    type   = 复选框    /  >  
 <   / HeaderTemplate  >  
 <   ItemTemplate  >  
 <   asp：CheckBox     runat   =  server    ID   =  CheckBoxField < span class =code-attribute>  已选中  ='  <％ #DataBinder.Eval（Container.DataItem，  ActiveStatus）％> '    /  >  
 <  < span class =code-leadattribute> / 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  < span class =code-keyword>>  
 <   / 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中的页眉页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！