网格视图中的静态标题和滚动条
问题描述:
朋友们.
我需要在网格视图中设置静态标题和滚动条.
我设置了状态标题和滚动条.
但底部对齐方式与标头不匹配.
请做需要的事情.
Hi friends.
I need to set static header and scroll bar in grid view.
i set the statis header and scroll bar.
but in bottom align ment not match with header.
please do needful.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<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>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="scrollPos" runat="server" type="hidden" value="0" />
<asp:Panel ID="panel1" ScrollBars="Auto" Height="150px" Width="600" runat=server >
<%--
<div id="divdatagrid1" style="width: 85%; overflow:scroll; height: 202px;">
önscroll=''javascript:setScroll(this, <% =scrollPos.ClientID %> );''>--%>
<script language="javascript" type="text/javascript">
function getScrollBottom(p_oElem) {
return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight;
}
</script>
<asp:GridView ID="GridView1" Width="96%" runat="server">
<HeaderStyle CssClass="GVFixedHeader" />
</div>
</form>
</body>
</html></div>
答
查看此链接
http://www.dotnetspider.com/resources/43613-Scrollable-Gridview- with-Fixed-Header.aspx [ ^ ]
See this link
http://www.dotnetspider.com/resources/43613-Scrollable-Gridview-with-Fixed-Header.aspx[^]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>
<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 = '5000px';
//********** 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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="panel" runat=server >
<div>
<%--Div contains the new header of the GridView--%>
<div id="HeaderDiv">
</div>
<%--Wrapper Div which will scroll the GridView--%>
<div id="DataDiv" style="overflow: auto; border: 1px solid olive; width: 600px; height: 300px;" onscroll="Onscrollfnction();">
<asp:GridView ID="GridView1" AllowPaging="true" runat="server"
AutoGenerateColumns="true" CellPadding="6" CssClass="GridViewStyle"
onpageindexchanging="GridView1_PageIndexChanging">
<HeaderStyle CssClass="GridViewHeaderStyle" />
</asp:GridView>
</div>
</asp:Panel>
</div>
</form>
</body>
</html>