Question

我一直在寻找方法来修复我的gridview标题我遇到了这个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);

它确实有效，但是当我将这个克隆的标题附加到空div“gridHeader”时，它会使我的其他JS函数出现故障就像这个负责突出显示所选行的JS函数一样，它只是找不到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'; 
            }
        }
    }

有什么建议吗？谢谢!!

Answer 1

我认为问题在于你正在使用元素的ID来识别它。

当您运行此行时：

var gridHeader = $('#<%=GridView1.ClientID%>').clone(true);

您创建具有相同ID的第二个表元素。对该ID的后续调用无法按预期工作。

我会尝试以下方法来更改您创建的克隆表的ID：

var gridHeader = $('#<%=GridView1.ClientID%>').clone(true).attr('id', 'newID');

修复了ASP NET Gridview JQuery的标题

1 个答案: