Gridview 行的可选工具提示。

Question

我需要帮助制作 selectable/copyable 网格的工具提示。这是 Aspx 文件中的代码。

     <asp:GridView ID="gridView" runat="server" 
                AutoGenerateColumns="false"
                 onrowdatabound="gridView_RowDataBound" 
                 EmptyDataText="No Records found."
                 AllowSorting="True"
      <Columns>
         <asp:CommandField visible="false" ShowEditButton="false" ShowCancelButton="false" ShowDeleteButton="false" />
        <asp:TemplateField HeaderText="ColumnID" Visible="false">
         <ItemTemplate>
         <asp:Label ID="ColumnIDLabel" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ColumnID") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                      <asp:TemplateField HeaderText="Account Number">
                                        <ItemTemplate>
                                         <asp:Label ID="AccountNumberlabel" ReadOnly='true' runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "hashedAccount") %>' ></asp:Label>                                                                       </ItemTemplate> </asp:TemplateField>                                      
       </Columns>
<asp:GridView>

我正在从代码隐藏文件添加工具提示。

   Protected Sub gridView_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)           
If e.Row.RowType = DataControlRowType.DataRow Then
            If User.HasAttribute("Access", "Enable") Then
                e.Row.ToolTip = e.Row.DataItem.Row.ItemArray(1)
            End If
        End If

我可以看到工具提示正在加载正确的数据。但我无法 select 工具提示。如何使工具提示 select 可用。任何建议，将不胜感激。

Answer 1

我使用模型弹出窗口解决了这个问题。我在 Rowdatabound

中添加了双击事件

 Protected Sub gridView_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)           
If e.Row.RowType = DataControlRowType.DataRow Then
            If User.HasAttribute("Access", "Enable") Then
                e.Row.Attributes.Add("ondblclick", "PopUpMessege(" + e.Row.DataItem.Row.ItemArray(1) + ")")
                e.Row.ToolTip = e.Row.DataItem.Row.ItemArray(1)
            Else
                e.Row.Attributes.Add("ondblclick", "PopUpMessege('You do not have access to view Account Number')")
            End If
        End If

在 aspx 页面中添加了 myModel Div

        <!-- Modal content -->
        <div class="modal-content">
            <p style="font-weight: bold; text-align: center; color: white; background-color: #337AB7;">PopUP info to copy</p>
            <span id="closespan" class="close">&times;</span>
            <p id="lblpopUpInfo"></p>
        </div>
    </div>

Jquery 脚本

function PopUpMessege(msg) {
    $('#myModal').css('display', 'inline');
    document.getElementById("lblpopUpInfo").innerText = msg;
}    
$(document).ready(function () {
    if ($('#closespan').length > 0) {
        $('#closespan').click(function () {
            $('#myModal').css('display', 'none');
        });
    }
});

和CSS

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 250px;
}

/* The Close Button */
.close {
    color: #3D3D3D;
    float: right;
    font-size: 28px;
    font-weight: bold;
    width:30px;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

Gridview 行的可选工具提示。

selectable tooltip for Gridview rows.

webforms

tooltip

clickable

jquery-ui-selectable