Question

我试图用数据库中的数据显示qtip或任何其他方式在asp.net gridview上显示工具提示。

我有qtip使用标题页面上的按钮，我不知道如何在gridview上将每个单元格悬停（这是我的按钮代码）。

$('input[title]').qtip({
                content: {
                },
                position: {
                    corner: {
                        target: 'bottomRight',
                        tooltip: 'topLeft'
                    }
                },
                style: {
                    name: 'cream',
                    padding: '7px 13px',
                    width: {
                        max: 210,
                        min: 0
                    },
                    tip: true,
                    'color': '#666666'
                }
            });

还不确定如何从qtip中的代码后面调用函数并将我的行ID传递给它。

网格是具有数据绑定列的普通网格，如下所示：

<asp:GridView ID="gvmygrid" runat="server" AllowPaging="false" AllowSorting="true"
                            AutoGenerateColumns="false" GridLines="None">
                            <Columns>
                                <asp:BoundField DataField="firstColumn" HeaderText="Col1" ReadOnly="true" />
                                <asp:BoundField DataField="Type" HeaderText="Type" ReadOnly="true" />
 </Columns>
 </asp:GridView>

Answer 1

1）为网格视图列创建一个模板项，您需要显示工具提示并为其提供一个ID，以便从javascript中引用它。

2）我不知道你是如何计划从数据库中获取数据所以我实现了一个简单的jQuery Web服务调用，该调用通过用户悬停在的单元格的id并返回测试数据来自WS电话

<强> ASPX：

<head runat="server">
    <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("table[id*=gvCustomers] span[id*=nationality]").tooltip({
                delay: 0,
                offset: [-65, -110],
                position: 'center top',
                bodyHandler: function () {
                    var id = $(this).closest("tr").find("span[id*=nationality]").text();
                    $.ajax({
                        type: "POST",
                        dataType: "text",
                        url: "CustomerService.asmx/GetNationality",
                        data: { nationalityId: id },
                        success: function (msg) {
                            $("#tool").html(msg);
                        },
                        error: function (err) {
                            alert("Web service call failed");
                        }
                    });
                   return $("<span id='tool' style='width:200px;background-color:black;color:white;' />");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" DataSourceID="customersDS">
            <Columns>
            <asp:BoundField DataField="Name" HeaderText="Customer Name" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label runat="server" ID="nationality" Text='<%# Bind("NationalityId") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="customersDS" runat="server" ConnectionString="<%$ ConnectionStrings:connection %>"
            SelectCommand="SELECT [NationalityId], [Name] FROM [Customers]"></asp:SqlDataSource>
    </form>
</body>

<强> ASMX：

public class CustomerService : System.Web.Services.WebService
{
    [WebMethod]
    public string GetNationality(int nationalityId)
    {
        return nationalityId == 1 ? "Nationality1" : "Nationality2";
    }
}

以下文章也可能有所帮助：

jQuery tooltip with Ajax tooltip datasource with gridview

Using The JQuery Tooltip Plugin in a GridView

使用动态数据在gridview上显示q tip / tooltip

1 个答案: