用 JQuery 修复 gridview header 并仍然保留功能

Question

我不是 JQuery 方面的专家，但我有这段代码可以固定 header 并且它按预期工作：

$(document).ready(function () {
        fixedHeader()
    });


    function fixedHeader() {
        // Code to copy the gridview header with style
        var gridHeader = $('#<%=GridView1.ClientID%>').clone(false);       
        //Code to remove all rows except the 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);
        // Set its position to be fixed
        $('#controlHead').css('position', 'fixed');
        // Put it on top
        $('#controlHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);

    }

问题是我失去了功能，比如这个按钮不再调用 JS

<asp:Button ID="BtnDelete" runat="server" Text="Delete"  onclick="btnDelete_Click"  class="buttons"  Visible="true"  disabled="disabled"  OnClientClick="if (!deleteRow()) return false;"  />

我有这个功能可以在选择单选按钮时突出显示所选行

 // 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'; 
            }
        }
    }

还有其他方法可以用 JQuery 修复 header 吗？我认为克隆和新克隆 header 的附加正在剥夺我的功能，任何帮助将不胜感激！

Answer 1

我发现在克隆 gridview 时，您应该为其分配一个新 ID，这样它就不会剥夺功能，因此：

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

至此

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

这将解决大部分功能，现在好的做法是摆脱：

OnClientClick="if (!deleteRow()) return false;"

在 ASP 按钮上并像这样创建一个 JQuery 侦听器

$(文档).ready(函数(){

       $('#<%=BtnDelete.ClientID%>').click(function () {
            if (!deleteRow()) return false;
        });           
    });

用 JQuery 修复 gridview header 并仍然保留功能

Fix gridview header with JQuery and still preserve functionality

html

javascript

asp.net

jquery

gridview