如何在asp.net 4.0 ND 2.0中修复gridview标头 [英] how to fix gridview header in asp.net 4.0 ND 2.0

问题描述

这是极好的.

我想在asp.net中使用gridview固定标头.

plz给我建议.

This is pradeep.

i want gridview fixed header in asp.net.

plz send me suggestions.

推荐答案

要在gridview中修复标题，请遵循此步骤，可能会对您有所帮助..

1)像这样在您的aspx页面中进行一些更改..

像这样放置2个div ..

for fixing header in gridview please follow this it will might help you..

1)make some changes in your aspx page like this..

place 2 divs like this..

<div id="HeaderDivACT">
    </div>
    <div id="DataDivACT" style="overflow: auto; width: 100%;"  önscroll="Onscrollfnction();">
<!--place your grid view design here -->
<asp:gridview id="GridView1" runat="server" autogeneratecolumns="false" xmlns:asp="#unknown">
</asp:gridview>
</div>

2)现在调用一个javascript函数，同时从数据库加载数据后，gridview将完成..
意味着在对gridview进行数据绑定之后，您需要调用此函数

2) now call one javascript function while your gridview will complete after loading data from database..
means after databinding of gridview you need to call this function

<script language="javascript" type="text/javascript">
var sp = 0;
function freezHeader(idGVDailyActivity) {
    try {
        var DataGridObj = document.getElementById(idGVDailyActivity);
        if (DataGridObj != null) {
            if (DataGridObj) {
                if (DataGridObj.clientWidth == 0) {
                    setTimeout("freezHeader(" + idGVDailyActivity + ")", 2000);
                    return;
                }
                var DataDivObj = document.getElementById('DataDivACT');
                var HeaderDivObj = document.getElementById('HeaderDivACT');
                //********* Creating new table which contains the header row ***********
                var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));
                DataDivObj.style.paddingTop = '0px';
                //var DataDivWidth = DataDivObj.clientWidth + 15;
                var DataDivWidth =

(窗口).width()- 20 ; DataDivObj.style.width = ' 5000px'; // **********根据Data Div设置Header Div的样式*** ********* HeaderDivObj.className = DataDivObj.className; HeaderDivObj.style.cssText = DataDivObj.style.cssText; // ****使Header Div可滚动. ***** HeaderDivObj.style.overflow = ' auto'; // ***隐藏Header Div ****的水平滚动条 HeaderDivObj.style.overflowX = ' 隐藏'; // ****隐藏Header Div的垂直滚动条**** HeaderDivObj.style.overflowY = ' 隐藏'; // HeaderDivObj.style.height = DataGridObj.rows [0] .clientHeight +'px'; HeaderDivObj.style.height = ' 30px'; // ****删除Header Div和Data Div之间的任何边界**** HeaderDivObj.style.borderBottomWidth = ' 0px'; // **********根据GridView设置页眉表的样式**** ******** HeadertableObj.className = DataGridObj.className; // ****根据GridView CSS文本设置Headertable CSS文本 如果(DataGridObj.style == 空) 返回； HeadertableObj.style.cssText = DataGridObj.style.cssText; HeadertableObj.border = ' 1px'; HeadertableObj.rules = ' 全部'; HeadertableObj.cellPadding = DataGridObj.cellPadding; HeadertableObj.cellSpacing = DataGridObj.cellSpacing; // **********创建新的标题行********* * var 行= HeadertableObj.insertRow( 0 ); Row.className = DataGridObj.rows [ 0 ].className; Row.style.cssText = DataGridObj.rows [ 0 ].style.cssText; Row.style.fontWeight = ' 粗体'; // ********此循环将创建每个标题单元格********* for ( var iCntr = 0 ; iCntr < DataGridObj.rows [ 0 ].cells.length; iCntr ++){ var spanTag = Row.appendChild(文档 .createElement(' td'))； spanTag.innerHTML = DataGridObj.rows [ 0 ].cells [iCntr] .innerHTML; var width = 0 ; // ******设置标题单元格的宽度********** 如果(spanTag.clientWidth> DataGridObj.rows [ 1 ].cells [iCntr] .clientWidth){ 宽度= spanTag.clientWidth; } 其他 { width = DataGridObj.rows [ 1 ].cells [iCntr] .clientWidth; } 如果(iCntr< = DataGridObj.rows [ 0 ].cells.length-' px'; } 其他 { spanTag.style.width = width + 20 + ' px '; } spanTag.style.textAlign = ' center'; DataGridObj.rows [ 1 ].cells [iCntr] .style.width = width + ' px'; } var tableWidth = DataGridObj.clientWidth; // *********隐藏GridView的原始标头******* DataGridObj.rows [ 0 ].style.display = ' 没有" ; // *********设置所有组件的相同宽度******* *** HeaderDivObj.style.width = DataDivWidth + ' px'; DataDivObj.style.width = DataDivWidth + ' px'; DataGridObj.style.width = tableWidth + ' px'; HeadertableObj.style.width = tableWidth + 20 + ' px '; DataDivObj.style.height =(

(window).width() - 20; 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'; HeaderDivObj.style.height = '30px'; //**** 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 if (DataGridObj.style == null) return; 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'; } spanTag.style.textAlign = 'center'; 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'; DataDivObj.style.height = (

(窗口).height()- 305 )+ ' px'; DataDivObj.scrollTop = sp; } } } 捕获(e){} } 功能 Onscrollfnction(){ var scPos = 文档 .getElementById(' scrlPos')； var div = 文档 .getElementById(' DataDivACT')； var div2 = 文档 .getElementById(' HeaderDivACT')； // ******滚动HeaderDiv和DataDiv ****** sp = div.scrollTop; div2.scrollLeft = div.scrollLeft; 返回 假； }

(window).height() - 305) + 'px'; DataDivObj.scrollTop = sp; } } } catch (e) { } } function Onscrollfnction() { var scPos = document.getElementById('scrlPos'); var div = document.getElementById('DataDivACT'); var div2 = document.getElementById('HeaderDivACT'); //****** Scrolling HeaderDiv along with DataDiv ****** sp = div.scrollTop; div2.scrollLeft = div.scrollLeft; return false; }

3)像这样调用此函数

3) call this function like this

这篇关于如何在asp.net 4.0 ND 2.0中修复gridview标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！