需要freez第一行和前两列 [英] Need to freez first row and first 2 columns

查看：57
本文介绍了需要freez第一行和前两列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

通过使用以下代码，我能够修复可滚动标题但无法修复第一行和前两列。



请帮助

By using following code i am able to fix scrollable header but unable to fix first row and first 2 columns.

Please help

<head runat="server">
    <title>GridViewWithFixedHeader</title>
    <style type="text/css">
        body 
        {
            background-color: #333;
        }
        
        .GridViewStyle
        {    
            font-family:Verdana;
            font-size:11px;
            background-color: White; 
        }
        
        .GridViewHeaderStyle
        {
            font-family:Verdana;
            font-size:15px;
	        color:White;
	        background: black url(Image/header3.jpg) repeat-x;
        }
    </style>

    <script language="javascript" type="text/javascript">
        var scroll = {
            Y: '#<%= hfScrollPosition.ClientID %>'
        };
        $(document).ready(function() {
            alert("dd");
            $("#DataDiv").scrollTop($(scroll.Y).val());
        });
    
    
    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 CreateMasterHeader(DataDiv, GridView1, HeaderDiv1) {
        var DataDivObj = document.getElementById(DataDiv);
        var DataGridObj = document.getElementById(GridView1);
        var HeaderDivObj = document.getElementById(HeaderDiv1);

        //********* 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 Row1 = HeadertableObj.insertRow(1);
        Row1.className = DataGridObj.rows[1].className;
        Row1.style.cssText = DataGridObj.rows[1].style.cssText;
        Row1.style.fontWeight = 'bold';



        //******** This loop will create each header cell *********
        for (var iCntr = 0; iCntr < DataGridObj.rows[2].cells.length; iCntr++) {
            var spanTag1 = Row1.appendChild(document.createElement('td'));
            spanTag1.innerHTML = DataGridObj.rows[1].cells[iCntr].innerHTML;
            var width = 0;
            //****** Setting the width of Header Cell **********
            if (spanTag1.clientWidth > DataGridObj.rows[2].cells[iCntr].clientWidth) {
                width = spanTag1.clientWidth;
            }
            else {
                width = DataGridObj.rows[2].cells[iCntr].clientWidth;
            }
            if (iCntr <= DataGridObj.rows[2].cells.length - 2) {
                spanTag1.style.width = width + 'px';
            }
            else {
                spanTag1.style.width = width + 20 + 'px';
            }
            DataGridObj.rows[2].cells[iCntr].style.width = width + 'px';
        }



        var tableWidth = DataGridObj.clientWidth;
        //********* Hidding the original header of GridView *******
        DataGridObj.rows[1].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');
        var div3 = document.getElementById('HeaderDiv1'); 
        //****** Scrolling HeaderDiv along with DataDiv ******
        div2.scrollLeft = div.scrollLeft;
        //div3.scrollLeft = div.scrollLeft;
        return false;
        
         
    }
    
    </script>







<form id="form1" runat="server">
        <div>
            <%--Div contains the new header of the GridView--%>
             <div id="HeaderDiv">
            
             <%--<div id="MasterDiv">
            </div>--%>
            <%--Wrapper Div which will scroll the GridView--%>
            <div id="DataDiv" style="overflow: auto; border: 1px solid olive; width: 100%; height: 300px;" onscroll="Onscrollfnction();$(scroll.Y).val(this.scrollTop);">
                <asp:GridView ID="GridView1" runat="server"

                    AutoGenerateColumns="true" CellPadding="3"  Style="white-space: nowrap"    CssClass="GridViewStyle">
                    <HeaderStyle  CssClass="GridViewHeaderStyle" />
                    <Columns>
                    <asp:TemplateField>
                    <ItemTemplate>
                    <asp:CheckBox ID="chk" runat="server" />

                    </ItemTemplate>

                    </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <asp:HiddenField ID="hfScrollPosition" runat="server" Value="0" />
            </div>
</form>
</body>
<html>

推荐答案

（ document ）。ready（ function （）{
alert（ dd）;
(document).ready(function() { alert("dd");


（ ＃DataDiv）。scrollTop（
("#DataDiv").scrollTop(


（scroll.Y）.val（））;
}）;


function CreateGridHeader（DataDiv，GridView1，HeaderDiv）
{
var DataDivObj = document .getElementById（DataDiv）;
var DataGridObj = document .getElementById（GridView1）;
var HeaderDivObj = document .getElementById（HeaderDiv）;

// *********创建包含标题的新表row ***********
var HeadertableObj = HeaderDivObj.appendChild（ document .createElement（' table'））;

DataDivObj.style.paddingTop = ' 0px';
var DataDivWidth = DataDivObj.clientWidth;
DataDivObj.style.width = ' 5000px';

// **********设置标题Div的样式根据数据部分************
HeaderDivObj.className = DataDivObj.className;
HeaderDivObj.style.cssText = DataDivObj.style.cssText;
// ****使Header Div可滚动。 *****
HeaderDivObj.style.overflow = ' auto' ;
// ***隐藏Header Div ****的水平滚动条
HeaderDivObj.style.overflowX = ' hidden';
// ****隐藏Header Div ****的垂直滚动条
HeaderDivObj.style.overflowY = ' hidden';
HeaderDivObj.style.height = DataGridObj.rows [ 0 ]。clientHeight + ' PX';
// ****删除Header Div和Data Div之间的任何边界****
HeaderDivObj.style.borderBottomWidth = ' 0px';

// **********设置标题表的样式根据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';
\t HeadertableObj.rules = 'all';
HeadertableObj.cellPadding = DataGridObj.cellPadding;
\t 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 CreateMasterHeader(DataDiv, GridView1, HeaderDiv1) {
var DataDivObj = document.getElementById(DataDiv);
var DataGridObj = document.getElementById(GridView1);
var HeaderDivObj = document.getElementById(HeaderDiv1);

//********* 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 Row1 = HeadertableObj.insertRow(1);
Row1.className = DataGridObj.rows[1].className;
Row1.style.cssText = DataGridObj.rows[1].style.cssText;
Row1.style.fontWeight = 'bold';



//******** This loop will create each header cell *********
for (var iCntr = 0; iCntr < DataGridObj.rows[2].cells.length; iCntr++) {
var spanTag1 = Row1.appendChild(document.createElement('td'));
spanTag1.innerHTML = DataGridObj.rows[1].cells[iCntr].innerHTML;
var width = 0;
//****** Setting the width of Header Cell **********
if (spanTag1.clientWidth > DataGridObj.rows[2].cells[iCntr].clientWidth) {
width = spanTag1.clientWidth;
}
else {
width = DataGridObj.rows[2].cells[iCntr].clientWidth;
}
if (iCntr <= DataGridObj.rows[2].cells.length - 2) {
spanTag1.style.width = width + 'px';
}
else {
spanTag1.style.width = width + 20 + 'px';
}
DataGridObj.rows[2].cells[iCntr].style.width = width + 'px';
}



var tableWidth = DataGridObj.clientWidth;
//********* Hidding the original header of GridView *******
DataGridObj.rows[1].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');
var div3 = document.getElementById('HeaderDiv1');
//****** Scrolling HeaderDiv along with DataDiv ******
div2.scrollLeft = div.scrollLeft;
//div3.scrollLeft = div.scrollLeft;
return false;


}

</script>
(scroll.Y).val()); }); 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 CreateMasterHeader(DataDiv, GridView1, HeaderDiv1) { var DataDivObj = document.getElementById(DataDiv); var DataGridObj = document.getElementById(GridView1); var HeaderDivObj = document.getElementById(HeaderDiv1); //********* 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 Row1 = HeadertableObj.insertRow(1); Row1.className = DataGridObj.rows[1].className; Row1.style.cssText = DataGridObj.rows[1].style.cssText; Row1.style.fontWeight = 'bold'; //******** This loop will create each header cell ********* for (var iCntr = 0; iCntr < DataGridObj.rows[2].cells.length; iCntr++) { var spanTag1 = Row1.appendChild(document.createElement('td')); spanTag1.innerHTML = DataGridObj.rows[1].cells[iCntr].innerHTML; var width = 0; //****** Setting the width of Header Cell ********** if (spanTag1.clientWidth > DataGridObj.rows[2].cells[iCntr].clientWidth) { width = spanTag1.clientWidth; } else { width = DataGridObj.rows[2].cells[iCntr].clientWidth; } if (iCntr <= DataGridObj.rows[2].cells.length - 2) { spanTag1.style.width = width + 'px'; } else { spanTag1.style.width = width + 20 + 'px'; } DataGridObj.rows[2].cells[iCntr].style.width = width + 'px'; } var tableWidth = DataGridObj.clientWidth; //********* Hidding the original header of GridView ******* DataGridObj.rows[1].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'); var div3 = document.getElementById('HeaderDiv1'); //****** Scrolling HeaderDiv along with DataDiv ****** div2.scrollLeft = div.scrollLeft; //div3.scrollLeft = div.scrollLeft; return false; } </script>







<form id="form1" runat="server">
        <div>
            <%--Div contains the new header of the GridView--%>
             <div id="HeaderDiv">
            
             <%--<div id="MasterDiv">
            </div>--%>
            <%--Wrapper Div which will scroll the GridView--%>
            <div id="DataDiv" style="overflow: auto; border: 1px solid olive; width: 100%; height: 300px;" onscroll="Onscrollfnction();


这篇关于需要freez第一行和前两列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆