javascript - 鼠标悬停时显示 GridView 列名称的定义

Question

以下是我的 Gridview 在客户端的代码。

<asp:GridView ID="gvwClaims" runat="server" AllowPaging="true" PageSize="20"
             OnPageIndexChanging="gvwClaims_PageIndexChanging"
             OnRowDataBound="gvwClaims_RowDataBound"
                RowStyle-CssClass="GridViewRowStyle" HeaderStyle-CssClass="GridViewHeaderRowStyle"
                AlternatingRowStyle-CssClass="GridViewAlternatingRowStyle" AutoGenerateColumns="false"
                BorderStyle="None" CellPadding="2" OnRowCommand="gvwClaims_RowCommand">
                            <HeaderStyle CssClass="GridViewHeaderRowStyle" />
                            <PagerSettings Mode="NumericFirstLast" Position="TopAndBottom" />
                            <PagerStyle CssClass="gridPagerStyle" />
                            <AlternatingRowStyle CssClass="GridViewAlternatingRowStyle" />
                <Columns>
                    <asp:BoundField DataField="DateFrom" HeaderText="Date">
                        <ItemStyle Width="50" />
                    </asp:BoundField>
                    <asp:TemplateField HeaderText="Number">
                        <ItemTemplate>
                            <asp:LinkButton ID="ClaimLink" runat="server" CommandName="View" CssClass="GridLink"
                                Visible='<%# ((String)Eval("HPType") == "number") %>' Text='<%# Eval("No") %>'></asp:LinkButton><asp:Label
                                    runat="server" ID="NoLink" Visible='<%# ((String)Eval("Type") == "number") %>'
                                    Text='<%# Eval("No") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="Prov" HeaderText="Name">
                        <ItemStyle />
                    </asp:BoundField>
                    <asp:BoundField DataField="PlcSvc" HeaderText="Place">
                        <ItemStyle />
                    </asp:BoundField>
                    <asp:BoundField DataField="HpType" HeaderText="Plan">
                        <ItemStyle />
                    </asp:BoundField>
                    <asp:BoundField DataField="Status" HeaderText="Status" />
                </Columns>
                <EmptyDataTemplate>
                    <div id="pnlEmptyClaims" runat="server" class="NoRecs">
                        <span style="font-style: italic">No recent history is available.</span></div>
                </EmptyDataTemplate>
                            <RowStyle CssClass="GridViewRowStyle" />
            </asp:GridView>

我有一个 GridView，我想让列名变得棘手。

过去，我使用 div 元素和 css 代码来更改悬停时的鼠标指针，然后更改鼠标单击时的事件。

但是现在，我想使用这个 gridview，当用户将鼠标悬停在列名称上时，我希望弹出一个小气泡，其中包含列名称的定义:例如:-“日期”和“数字”和“名称”等

我正在考虑使用ajax、jquery技术。

当我在互联网上进行研究时，如果你们中的任何人有这种技术的经验/可以为我指明正确的方向，我将不胜感激。

谢谢。

Answer 1

您可以在 RowDataBound 事件中设置每个标题列的 ToolTip 属性，如下所示:

protected void gvdetails_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Only do this to the header row, ignore data and footer rows
    if(e.Row.RowType==DataControlRowType.Header)
    {
        e.Row.Cells[0].ToolTip = "Date header tooltip text here";
        e.Row.Cells[1].ToolTip = "Number header tooltip text here";
        e.Row.Cells[2].ToolTip = "Name header tooltip text here";
        e.Row.Cells[3].ToolTip = "Place header tooltip text here";
        e.Row.Cells[4].ToolTip = "Plan header tooltip text here";
        e.Row.Cells[5].ToolTip = "Status header tooltip text here";
    }
}