2

行の最後の列に画像/アイコンを追加する必要があります。そして、そのアイコンにカーソルを合わせると、サーバーからのデータが表示されるはずです。これを実装する方法がわかりません。この機能を実装した専門家は、私を助けてください。前もって感謝します。

編集

これは私が持っているサンプル データです。カーソルを合わせると、最後の列にアイコンを追加して、ツールヒントに「データ」を含むツールヒントが表示されるようにする必要があります。

{
    "iTotalRecords": 5,
    "sEcho": "1",
    "aaData": [
        [
            "V2993ASFKH230943",
            "Honda",
            "Accord",
            "data"
        ],
        [
            "V2993A39SNF30943",
            "Honda",
            "CRV",
            "data"
        ],
        [
            "V4833A39SNF30943",
            "Acura",
            "TSX"
        ],
        [
            "V4833RE9SNF30943",
            "Acura",
            "TL",
            "data"
        ],
        [
            "V9383RE9SNF30943",
            "Acura",
            "MDX",
            "data"
        ]
    ],
    "iTotalDisplayRecords": 5
}

[アップデート]

イメージタグは次のようになります。

var imgTag = '<span class="mytext" ><span class="ui-icon ui-icon-wrench" ></span>';

ホバー時にモーダル ダイアログを表示することも要件です。以下は、モーダルを開くための jquery コードです。

$(".mytext").mouseover(
            function() {
                var width = 250;
                var height = 270;
                var posX = $(this).offset().left - $(document).scrollLeft()
                        - width + $(this).outerWidth();
                var posY = $(this).offset().top - $(document).scrollTop()
                        + $(this).outerHeight();
                //alert(posX + ", " +posY);
                $(".mytext").dialog({
                    resizable:false,
                    width : width,
                    height : height,
                    position : [ posX, posY ]
                });
            });

ホバーすると、これはどういうわけか機能しません。jquery Modalをトリガーしていません

アップデート

タイミングの問題があるのは正しいです。その問題を修正しました。カーソルを合わせると、すべての画像がモーダルに読み込まれます。つまり、行の数は、開いているモーダル ダイアログの数です。値 aData[3] を jquery モーダルに渡す必要があります。

4

2 に答える 2

3

ツールチップの実装方法によって少し異なります。サードパーティの「ファンシー」JavaScript ツールチップごとに、動作が異なります。ここの例は、2 つのデータ (make と model) を取得し、それらをセルの "title" 属性にプッシュする方法を示しています。これにより、ブラウザーの組み込みツールチップがトリガーされます。

ツールチップ プラグインなどを使用することになると思いますので、例の一般原則を特定のツールチップに適応させる必要があります。OK、プリアンブルは十分です。

--

これはすべて、初期化中に設定できる DataTables オブジェクトのプロパティであるfnRowCallback [update: 1.10 forward just uses "rowCallback"]で発生します。これを行うと、各行がレンダリングされるときに、HTML (nRow) を変更し、変更後にそれを返して DOM にプッシュできるようになります。

(注: 読みやすくするために、必要以上に多くの変数を作成する傾向があります。iDisplayIndex と iDisplayIndexFull もそのままにしておきます。必要に応じて、それらを削除できるはずです)

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  var theMake = aData[1],
      theModel = aData[2];

  var imgTag = '<img href="/images/icon.png" title="' + theMake + ' ' + theModel + '" class="hoverImage"/>'; 
  /* result example: <img href="/images/icon.png" title="Honda CRV" class="hoverImage"/> */

  $('td:eq(3)', nRow).html(imgTag); // replace the word "data" with the new image markup

  return nRow;
}

画像にカーソルを合わせると、ツールチップに Make と Model が表示されます。

繰り返しますが、これは特定のツールチップ プラグインに対しては何もしませんが、タイトルからも情報を取得するプラグインを使用している可能性があり、これは便利です。これらのプラグインの場合、プラグインをトリガーするクラスを imageTag (class="tooltip" など) に追加するだけです。

[アップデート]

jQuery UI のダイアログを例として使用します。多くのカスタム ダイアログ関数は、その場で「コンテナー」ノードを作成し、それを呼び出しますdialog()。私は、基本ドキュメントに汎用の再利用可能なコンテナ ノードを用意し、必要に応じてデータを追加することを好みます。

ボディが閉じる直前に配置するのが好きです。これは、とにかく作業が終わったときに jQuery UI が貼り付けられる場所だからです。

  <!-- ... -->
  <div id="dialogContainer"></div>
</body>

CSS では、デフォルトで非表示になるように設定します ( #dialogContainer { display:none })。

.dialog()コンテナができたので、そのコンテナで関数を使用できます。上記の元の例を使用すると (「hoverImage」クラスを追加したことに注意してください)、この例にあるものの代わりに、画像のタイトルに aData[3] を入力します。タイトルは、aData[3] データの「ストレージ」として機能しています。

ここで、DataTables の初期化の完全に外側で、ドキュメント準備完了関数 (おそらく既に持っている) で、mouseenter イベントをバインドできます。

$('#tableContainer').on('mouseenter', '.hoverImage', function(e) {
  e.preventDefault; // if you want to prevent the browser tooltip
  var dialogContainer = $('#dialogContainer');
  dialogContainer.html(this.title); // replace contents of dialog with the title of the image
  dialogContainer.dialog({ /* options */ });
});
于 2012-03-26T17:38:25.683 に答える
0

画像データ自体をデータベースに保存しようとするのではなく、サーバー上の画像をフォルダーに保存し、画像のアドレスをデータベースに保存します。高さ、幅、および言及したように、代替テキストなどの他のメタ情報も保存できます。必要に応じて、画像をそのフォルダーにアップロードするコードを作成できます。画像をアップロードするときに、画像データをデータベースに追加する機会があります。

于 2012-03-26T17:35:36.513 に答える