我想在我的gridview中使用javascript修复标题？ [英] I want a fixed header in my gridview using javascript?

问题描述

我正在尝试使用javascript修复gridview的标题，一切正常，除了标题下方有一个白色空间...

请一些人帮我删除白色标题下面的空间..



提前致谢....



我是什么尝试过：

I am trying to fix the header for gridview using javascript and everything is working fine except there is a white space comming below the header...
Please can some one help me to remove the white space below the header..

Thanks in advance....

What I have tried:

<script type = "text/javascript">
    var GridId = "<%= grdEmployeeExpenses.ClientID %>";
    var ScrollHeight = 600;
    window.onload = function () {
        var grid = document.getElementById(GridId);
        var gridWidth = grid.offsetWidth;
        var gridHeight = grid.offsetHeight;
        var headerCellWidths = new Array();
        for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
            headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
        }
        grid.parentNode.appendChild(document.createElement("div"));
        var parentDiv = grid.parentNode;
 
        var table = document.createElement("table");
        for (i = 0; i < grid.attributes.length; i++) {
            if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
                table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
            }
        }
        table.style.cssText = grid.style.cssText;
        table.style.width = gridWidth + "px";
        table.appendChild(document.createElement("tbody"));
        table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
        var cells = table.getElementsByTagName("TH");
 
        var gridRow = grid.getElementsByTagName("TR")[0];
        for (var i = 0; i < cells.length; i++) {
            var width;
            if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
                width = headerCellWidths[i];
            }
            else {
                width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
            }
            cells[i].style.width = parseInt(width - 3) + "px";
            gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
        }
        parentDiv.removeChild(grid);
 
        var dummyHeader = document.createElement("div");
        dummyHeader.appendChild(table);
        parentDiv.appendChild(dummyHeader);
        var scrollableDiv = document.createElement("div");
        if(parseInt(gridHeight) > ScrollHeight){
            gridWidth = parseInt(gridWidth) + 25;
        }
        scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";
        scrollableDiv.appendChild(grid);
        parentDiv.appendChild(scrollableDiv);
    }
    </script> 

推荐答案

我有分析你脚本只是在代码下方注释，你的问题将得到解决。



< script type =text / javascript>

var GridId =<％= grdEmployeeExpenses.ClientID％> ;

var ScrollHeight = 600;

window.onload = function（）{

var grid = document.getElementById（GridId）;

var gridWidth = grid.offsetWidth;

var gridHeight = grid.offsetHeight;

var headerCellWidths = new Array（）;

for（var i = 0; i< grid.getElementsByTagName（TH）。length; i ++）{

headerCellWidths [i] = grid.getElementsByTagName（TH）[i ] .offsetWidth;

}

grid.parentNode.appendChild（document.createElement（div））;

var parentDiv = grid。 parentNode;



var table = document.createElement（table）;

for（i = 0; i< grid.attributes .length; i ++）{

if（grid.attributes [i] .specified && grid.attribute s [i] .name！=id）{

table.setAttribute（grid.attributes [i] .name，grid.attributes [i] .value）;

}

}

table.style.cssText = grid.style.cssText;

//table.style.width = gridWidth + px;

table.appendChild（document.createElement（tbody））;

table.getElementsByTagName（tbody）[0] .appendChild（grid。 getElementsByTagName（TR）[0]）;

var cells = table.getElementsByTagName（TH）;



var gridRow = grid.getElementsByTagName（TR）[0];

for（var i = 0;我< cells.length; i ++）{

var width;

if（headerCellWidths [i]> gridRow.getElementsByTagName（TD）[i] .offsetWidth）{

width = headerCellWidths [i];

}

else {

width = gridRow.getElementsByTagName（TD）[i] .offsetWidth;

}

cells [i] .style.width = parseInt（width - 3）+px;

gridRow。 getElementsByTagName（TD）[i] .style.width = parseInt（width - 3）+px;

}

parentDiv.removeChild（grid）; < br $>


var dummyHeader = document.createElement（div）;

dummyHeader.appendChild（table）;

parentDiv.appendChild（dummyHeader）;

var scrollableDiv = document.createElement（div）;

if（parseInt（gridHeight）> ScrollHeight）{

gridWidth = parseInt（gridWidth）+ 25;

}

scrollableDiv.style.cssText =overflow：auto; height：+ ScrollHeight +px;;

scrollableDiv.appendChild（grid）;

parentDiv.appendChild（scrollableDiv）;

}

< / script>

I have analysis you script just comment below code and your problem will be fixed.

<script type = "text/javascript">
var GridId = "<%= grdEmployeeExpenses.ClientID %>";
var ScrollHeight = 600;
window.onload = function () {
var grid = document.getElementById(GridId);
var gridWidth = grid.offsetWidth;
var gridHeight = grid.offsetHeight;
var headerCellWidths = new Array();
for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
}
grid.parentNode.appendChild(document.createElement("div"));
var parentDiv = grid.parentNode;

var table = document.createElement("table");
for (i = 0; i < grid.attributes.length; i++) {
if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
}
}
table.style.cssText = grid.style.cssText;
//table.style.width = gridWidth + "px";
table.appendChild(document.createElement("tbody"));
table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
var cells = table.getElementsByTagName("TH");

var gridRow = grid.getElementsByTagName("TR")[0];
for (var i = 0; i < cells.length; i++) {
var width;
if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
width = headerCellWidths[i];
}
else {
width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
}
cells[i].style.width = parseInt(width - 3) + "px";
gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
}
parentDiv.removeChild(grid);

var dummyHeader = document.createElement("div");
dummyHeader.appendChild(table);
parentDiv.appendChild(dummyHeader);
var scrollableDiv = document.createElement("div");
if(parseInt(gridHeight) > ScrollHeight){
gridWidth = parseInt(gridWidth) + 25;
}
scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;";
scrollableDiv.appendChild(grid);
parentDiv.appendChild(scrollableDiv);
}
</script>

这篇关于我想在我的gridview中使用javascript修复标题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！