修复了 Header ASP NET Gridview JQuery
Fixed Header for ASP NET Gridview JQuery
我一直在寻找使我的 gridview header 修复的方法我遇到了这个 JQuery 代码:
$(document).ready(function () {
// Code to copy the gridview header with style
var gridHeader = $('#<%=GridView1.ClientID%>').clone(true);
//Code to remove all the rows but the first row which is header row
$(gridHeader).find("tr:gt(0)").remove();
$('#<%=GridView1.ClientID%> tr th').each(function (i) {
// Here Set Width of each th from gridview to new table th
$("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
});
// Append Header to the div controlHead
$("#controlHead").append(gridHeader); // <-- HERE is WHEN IT DAMAGES OTHER JS FUNCTIONALITY
// Set its position to be fixed
$('#controlHead').css('position', 'fixed');
// Put it on top
$('#controlHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
它确实有效,但是当我将这个克隆的 header 附加到空的 div "gridHeader" 时,它会使我的其他 JS 函数出现故障
像这个负责高亮选中行的JS Function,就是找不到Gridview了
// Method that will highlight row
function gridviewManipulation() {
// Get Gridview
var gridView = document.getElementById("<%= GridView1.ClientID %>");
// Loop through the Gridview
for (var i = 1; i < gridView.rows.length; i++) {
// Get the radio button of each row in the gridview and see if its checked
if (gridView.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked == true)
{
// Place the color for selection
gridView.rows[i].style.background = '#9bc27e';
}
else if (gridView.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked == false && i % 2 == 0)
{
// If its even then place white color back
gridView.rows[i].style.background = '#FFFFFF';
}
else
{
// If its odd place the bluish back on
gridView.rows[i].style.background = '#E3EAEB';
}
}
}
有什么建议吗?
谢谢!!
我认为问题出在您使用元素的 ID 来识别它。
当你运行这一行:
var gridHeader = $('#<%=GridView1.ClientID%>').clone(true);
您创建了具有相同 ID 的第二个 table 元素。对该 ID 的后续调用未按预期工作。
我会尝试以下操作来更改您创建的克隆 table 的 ID:
var gridHeader = $('#<%=GridView1.ClientID%>').clone(true).attr('id', 'newID');
我一直在寻找使我的 gridview header 修复的方法我遇到了这个 JQuery 代码:
$(document).ready(function () {
// Code to copy the gridview header with style
var gridHeader = $('#<%=GridView1.ClientID%>').clone(true);
//Code to remove all the rows but the first row which is header row
$(gridHeader).find("tr:gt(0)").remove();
$('#<%=GridView1.ClientID%> tr th').each(function (i) {
// Here Set Width of each th from gridview to new table th
$("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
});
// Append Header to the div controlHead
$("#controlHead").append(gridHeader); // <-- HERE is WHEN IT DAMAGES OTHER JS FUNCTIONALITY
// Set its position to be fixed
$('#controlHead').css('position', 'fixed');
// Put it on top
$('#controlHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
它确实有效,但是当我将这个克隆的 header 附加到空的 div "gridHeader" 时,它会使我的其他 JS 函数出现故障 像这个负责高亮选中行的JS Function,就是找不到Gridview了
// Method that will highlight row
function gridviewManipulation() {
// Get Gridview
var gridView = document.getElementById("<%= GridView1.ClientID %>");
// Loop through the Gridview
for (var i = 1; i < gridView.rows.length; i++) {
// Get the radio button of each row in the gridview and see if its checked
if (gridView.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked == true)
{
// Place the color for selection
gridView.rows[i].style.background = '#9bc27e';
}
else if (gridView.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked == false && i % 2 == 0)
{
// If its even then place white color back
gridView.rows[i].style.background = '#FFFFFF';
}
else
{
// If its odd place the bluish back on
gridView.rows[i].style.background = '#E3EAEB';
}
}
}
有什么建议吗? 谢谢!!
我认为问题出在您使用元素的 ID 来识别它。
当你运行这一行:
var gridHeader = $('#<%=GridView1.ClientID%>').clone(true);
您创建了具有相同 ID 的第二个 table 元素。对该 ID 的后续调用未按预期工作。
我会尝试以下操作来更改您创建的克隆 table 的 ID:
var gridHeader = $('#<%=GridView1.ClientID%>').clone(true).attr('id', 'newID');