如何在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">

推荐答案

.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"

这篇关于如何在GridView中设置静态标题和滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！