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

时间:2013-11-25 21:39:57

标签: javascript jquery asp.net css gridview

以下是客户端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,当用户将鼠标悬停在列名上时,我想要弹出一个小气泡,其中包含列名的定义:例如: - “Date”和“Number”和“姓名“等等

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

当我在互联网上进行研究时,如果您对这项技术有任何经验/我可以指出正确的方向,我将不胜感激。

感谢。

1 个答案:

答案 0 :(得分:3)

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

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";
    }
}