Gridview 行的可选工具提示。

Posted 2023-05-07

【中文标题】Gridview 行的可选工具提示。

【英文标题】：selectable tooltip for Gridview rows.

【发布时间】：2018-08-20 18:37:14

【问题描述】：

我需要帮助为网格制作可选择/可复制的工具提示。这是来自 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

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

【参考方案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;