【问题标题】:selectable tooltip for Gridview rows.Gridview 行的可选工具提示。
【发布时间】: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

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

【问题讨论】:

    标签: webforms tooltip clickable jquery-ui-selectable


    【解决方案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;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-10-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多