0

我正在尝试使用数据库中的数据显示 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>
4

1 回答 1

0

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 工具提示和 Ajax 工具提示数据源和 gridview

在 GridView 中使用 JQuery 工具提示插件

于 2012-12-13T21:28:29.387 回答