如何通过单击 gridview 标题调用 javascript 函数？答案

【问题标题】：How to call javascript function from clicking gridview header?如何通过单击 gridview 标题调用 javascript 函数？
【发布时间】：2021-01-25 01:02:49
【问题描述】：

我有一个gridview，我正在尝试制作它，所以每当有人点击标题文本时，它都会调用一个javascript函数。

这是我的网格视图代码

<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>

有人能指出正确的方向吗？

【问题讨论】：

标签： javascript asp.net gridview

【解决方案1】：

好的，如果您想将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>

【讨论】：