0

データベースからのデータを使用してasp.netグリッドビューにツールチップを表示するqtipまたはその他の方法を表示しようとしています。

タイトルのページのボタンを操作する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) ツールチップを表示する必要があるグリッド ビュー列のテンプレート アイテムを作成し、JavaScript から参照できるように ID を指定します。

2）DBからデータを取得する方法がわからないので、ユーザーがホバリングしているセルのIDを通過し、WSからテストデータを返す単純なjQuery Webサービス呼び出しを実装しました電話

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 に答える