如何在GridView中设置静态标题和滚动条

本文介绍了如何在GridView中设置静态标题和滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

朋友， 我正在gridview.i中使用静态标题和滚动条. 但是当我为此设置母版页时，无法获得正确的格式. 请做需要的事情. 这是我的代码:

Hi Friends, I am using static header and scroll bar in gridview.i done it. but when i set master page for this.not able get correct format. Please do needful. This is my code:

<%@ Page Title="" Language="C#" MasterPageFile="~/SampleMaster.master" AutoEventWireup="true" CodeFile="Static grid.aspx.cs" Inherits="Static_grid" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <style type="text/css"> .GVFixedHeader { font-weight:bold; background-color: Green; position:relative; top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);} .GVFixedFooter { font-weight:bold; background-color: Green; position:relative; bottom:expression(getScrollBottom(this.parentNode.parentNode.parentNode.parentNode));} </style> <script language="javascript" type="text/javascript"> function CreateGridHeader(DataDiv, GridView1, HeaderDiv) { var DataDivObj = document.getElementById(DataDiv); var DataGridObj = document.getElementById(GridView1); var HeaderDivObj = document.getElementById(HeaderDiv); //********* Creating new table which contains the header row *********** var HeadertableObj = HeaderDivObj.appendChild(document.createElement(''table'')); DataDivObj.style.paddingTop = ''0px''; var DataDivWidth = DataDivObj.clientWidth; DataDivObj.style.width = ''1000px''; //********** Setting the style of Header Div as per the Data Div ************ HeaderDivObj.className = DataDivObj.className; HeaderDivObj.style.cssText = DataDivObj.style.cssText; //**** Making the Header Div scrollable. ***** HeaderDivObj.style.overflow = ''auto''; //*** Hiding the horizontal scroll bar of Header Div **** HeaderDivObj.style.overflowX = ''hidden''; //**** Hiding the vertical scroll bar of Header Div **** HeaderDivObj.style.overflowY = ''hidden''; HeaderDivObj.style.height = DataGridObj.rows[0].clientHeight + ''px''; //**** Removing any border between Header Div and Data Div **** HeaderDivObj.style.borderBottomWidth = ''0px''; //********** Setting the style of Header Table as per the GridView ************ HeadertableObj.className = DataGridObj.className; //**** Setting the Headertable css text as per the GridView css text HeadertableObj.style.cssText = DataGridObj.style.cssText; HeadertableObj.border = ''1px''; HeadertableObj.rules = ''all''; HeadertableObj.cellPadding = DataGridObj.cellPadding; HeadertableObj.cellSpacing = DataGridObj.cellSpacing; //********** Creating the new header row ********** var Row = HeadertableObj.insertRow(0); Row.className = DataGridObj.rows[0].className; Row.style.cssText = DataGridObj.rows[0].style.cssText; Row.style.fontWeight = ''bold''; //******** This loop will create each header cell ********* for (var iCntr = 0; iCntr < DataGridObj.rows[0].cells.length; iCntr++) { var spanTag = Row.appendChild(document.createElement(''td'')); spanTag.innerHTML = DataGridObj.rows[0].cells[iCntr].innerHTML; var width = 0; //****** Setting the width of Header Cell ********** if (spanTag.clientWidth > DataGridObj.rows[1].cells[iCntr].clientWidth) { width = spanTag.clientWidth; } else { width = DataGridObj.rows[1].cells[iCntr].clientWidth; } if (iCntr <= DataGridObj.rows[0].cells.length - 2) { spanTag.style.width = width + ''px''; } else { spanTag.style.width = width + 20 + ''px''; } DataGridObj.rows[1].cells[iCntr].style.width = width + ''px''; } var tableWidth = DataGridObj.clientWidth; //********* Hidding the original header of GridView ******* DataGridObj.rows[0].style.display = ''none''; //********* Setting the same width of all the componets ********** HeaderDivObj.style.width = DataDivWidth + ''px''; DataDivObj.style.width = DataDivWidth + ''px''; DataGridObj.style.width = tableWidth + ''px''; HeadertableObj.style.width = tableWidth + 20 + ''px''; return false; } function Onscrollfnction() { var div = document.getElementById(''DataDiv''); var div2 = document.getElementById(''HeaderDiv''); //****** Scrolling HeaderDiv along with DataDiv ****** div2.scrollLeft = div.scrollLeft; return false; } </script> <div>

< asp:面板ID ="panel" runat ="server">

<asp:Panel ID="panel" runat="server">

<％-Div包含GridView的新标题-％> <%--Div contains the new header of the GridView--%>

<％-包装器Div，它将滚动GridView-％>

<%--Wrapper Div which will scroll the GridView--%>

önscroll="Onscrollfnction();"> < asp:GridView ID ="GridView1" AllowPaging ="true" runat ="server" AutoGenerateColumns ="true" CellPadding ="6" CssClass ="GridViewStyle" BorderColor =#FF6600" BorderStyle ="Double" onpageindexchanging ="GridView1_PageIndexChanging"> < HeaderStyle CssClass ="GridViewHeaderStyle" BackColor =#FF9070"/> < alternatingrowstyle borderstyle ="Dashed"> önscroll="Onscrollfnction();"> <asp:GridView ID="GridView1" AllowPaging="true" runat="server" AutoGenerateColumns="true" CellPadding="6" CssClass="GridViewStyle" BorderColor="#FF6600" BorderStyle="Double" onpageindexchanging="GridView1_PageIndexChanging"> <HeaderStyle CssClass="GridViewHeaderStyle" BackColor="#FF9070" /> <alternatingrowstyle borderstyle="Dashed">

推荐答案

尝试访问以下链接: 固定标题的网格视图 [ ^ ] www.mindfiresolutions/A- Scrollable-GridView-with-a-Fixed-Header-in-NET-336.php [ ^ ] 这可能会对您有所帮助.. Hi, Try visiting these links: Grid View with Fixed Header[^] www.mindfiresolutions/A-Scrollable-GridView-with-a-Fixed-Header-in-NET-336.php[^] This may help you.. all the best..

要冻结Gridview标头，请尝试: 第1步: 创建如下的CSS类 To freeze Gridview header, try: Step 1: Create a CSS class as following .HeaderFreez { position:relative ; top:expression(this.offsetParent.scrollTop); z-index: 10; }

步骤2: 如下设置Gridview的HeaderStyle CssClass CssClass="HeaderFreez"

Step 2: Set Gridview’s HeaderStyle CssClass as follows CssClass="HeaderFreez"