如何在GridView中设置静态标题和滚动条 [英] How to set static header and scroll bar in 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">
推荐答案
尝试访问以下链接:
固定标题的网格视图 [ http://www.mindfiresolutions.com/A- Scrollable-GridView-with-a-Fixed-Header-in-NET-336.php [
Hi,
Try visiting these links:
Grid View with Fixed Header[^]
http://www.mindfiresolutions.com/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"
这篇关于如何在GridView中设置静态标题和滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
