如何通过单击gridview标头调用javascript函数？

如何解决如何通过单击gridview标头调用javascript函数？

我有一个gridview，我正在尝试制作它，因此只要有人单击标题文本，它就会调用javascript函数。

这是我的gridview代码

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="Grid"
        DataKeyNames="ID" >
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Button Text="X" runat="server" OnClick="deleteRow" CommandArgument='<%#Eval("ID") %>' />



                </ItemTemplate>
            </asp:TemplateField>

                                <asp:BoundField ItemStyle-Width="150px" DataField="ID" HeaderText="ID" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="Site" HeaderText="Site" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="Type" HeaderText="Type" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="User" HeaderText="User" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="Notes" HeaderText="Notes" />

        </Columns>
            <RowStyle  />
        <FooterStyle/>


        <SelectedRowStyle />
        <HeaderStyle />
    </asp:GridView>

有人可以指出我正确的方向吗？

解决方法

好的，如果您想将jquery或javascript事件绑定到GridView标头，只需将一个类添加到GridView HeaderStyles并绑定并带有一个click事件。请执行以下操作：

<HeaderStyle CssClass="GridViewHeaderRow"  />

然后在您的jquery或javascript中，使用添加的类获取该元素的引用并绑定所需的任何事件，请参见：

<script>
    $(document).ready(function () {
        $('.GridViewRow').on('click',function () {
            alert('clicked');
            // Do whatever you want to do.
        });
    });
</script>

在您的代码中合并的完整示例如下：

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="Grid" DataKeyNames="ID">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Button Text="X" runat="server" OnClick="deleteRow" CommandArgument='<%# Eval("ID") %>' />
            </ItemTemplate>
        </asp:TemplateField>

        <asp:BoundField ItemStyle-Width="150px" DataField="ID" HeaderText="ID" />
        <asp:BoundField ItemStyle-Width="150px" DataField="Site" HeaderText="Site" />
        <asp:BoundField ItemStyle-Width="150px" DataField="Type" HeaderText="Type" />
        <asp:BoundField ItemStyle-Width="150px" DataField="User" HeaderText="User" />
        <asp:BoundField ItemStyle-Width="150px" DataField="Notes" HeaderText="Notes" />
    </Columns>
    <RowStyle />
    <FooterStyle />
    <SelectedRowStyle />
    <!-- Add the class here in your HeaderStyles -->
    <HeaderStyle CssClass="GridViewHeaderRow"  />
</asp:GridView>

<script>
    $(document).ready(function () {
        $('.GridViewRow').on('click',function () {
            alert('clicked');
            // Do whatever you want to do.
        });
    });
</script>