web-dev-qa-db-ja.com

jqGridマウスオーバーでツールチップを設定するにはどうすればよいですか？

JqGridの行/セルの上にマウスを置いたときに表示される「ツールチップ」をどのように設定できますか？

現在、ツールチップはセルの内容にすぎないようです。

jqueryjqgridtooltip
15
Marcus Leon

一般的に、私はジャスティンに同意します。jqGridでは、行にツールチップを直接設定する方法はありません。これは、セルベースでのみ実行できます。したがって、これは手動で行う必要があります。

まず、すべてのセルに title：false プロパティを設定して、セルのツールチップがないようにする必要があります。次に、すべての行のカスタムツールチップを設定する必要があります。これは、たとえば loadComplete イベントハンドル内で実行できます。対応するコードは次のとおりです。

loadComplete: function() {
    var ids = grid.jqGrid('getDataIDs');
    for (var i=0;i<ids.length;i++) {
        var id=ids[i];
        var rowData = grid.jqGrid('getRowData',id);
        $('#'+id,grid[0]).attr('title', rowData.Name + ' (' +
                                        rowData.Category + ', ' +
                                        rowData.Subcategory + ')');
    }
}

ライブで見ることができる対応する例を見ることができます ここ 。

[〜＃〜]更新済み[〜＃〜]：jqGridの最新バージョンでは、カスタムtitleを設定するためのはるかに効果的な方法があります。これは、cellattrの使用法（例については 回答 を参照）またはrowattrの使用法（ 回答 を参照）です。常にjqGridのgridview: trueオプションを使用することをお勧めします。 cellattrまたはrowattrをgridview: trueと一緒に使用すると、必要なすべてのツールチップを含む完全なグリッド本体を作成できますページの1つの変更で（すべてを含むグリッド本体の完全なHTMLフラグメントツールチップはinnerHTMLプロパティに割り当てられます）。ループ内での.attrの使用法は、少なくとも リフロー に続きます。これは拡張性があります（ ここ を参照）。したがって、cellattrおよびrowattrをgridview: trueと組み合わせて使用​​すると、最高のパフォーマンスを実現できます。

23
Oleg

このためのjqGridAPIはありません。ツールチップテキストを変更する場合は、セルのtitle要素の値を手動で変更するコードを作成する必要があります。

2
Justin Ethier

クラスが正しく設定されていても、jQueryがマウスオーバーを認識しないという同様の問題がありました。テストとして私はセットアップしました

$('.note).mouseover(function(){alert('hello')})

結果がありません。それから私はそれをに変更しました

$('.note').live('mouseover',function(){alert('hello')})

そしてそれはうまくいった。注文の読み込みがすべてでした。お役に立てれば。

2
EWPDesign

Jqgrid4.4とIE 11を使用して、ツールチップを強調表示して行全体に割り当てるには、これが機能します。

  1. 次に、colModelを定義するときに、すべてのセルでツールチップをオフにします。

    colModel：[{name： 'ColumnName'、title：false}、.。

  2. loadCompleteメソッドをグリッドに割り当てます。

    loadComplete: function () {
var rows = $(this).getDataIDs();

for (var i = 0; i < rows.length; i++) {
    var row = $(this).getRowData(rows[i]);
    if (row.IsSomething == 'true') {
        this.rows[i + 1].className = this.rows[i + 1].className + ' ui-state-highlight';
        $(this.rows[i + 1]).attr('title', 'This tooltip will appear for the entire row');
    }
}

    }}

1
Tom Regan

カスタムフォーマッタを使用する

        function myCellFormatter(cellvalue, options, rowObject) {           
                return '<span title="' + rowObject.name + rowObject.category +rowObject.subcategory +'">'+ cellvalue +'</span>';

        }

そして、colモデルでこのフォーマッターを使用します

{index: 'name', name: 'name',formatter:myCellFormatter, label: 'Name'},
...
0
Supra

JqGridでbootstrapツールチップを使用するための私の答えを拡張したいと思います。グリッドはデフォルトでツールチップを設定しますが、これは各列にtitle:falseを使用してクリアできます。

特定のtdまたはcellを選択するには、任意のセルの関数としてcellattrプロパティを使用して独自のクラス/属性を作成できます。例えば：

cellattr: function(rowID,val,rawObject,cm,rdata) {
    return "class='tooltip-cell';" // could return 'n' number of attributes
}

そして最後に、bootstrap function tooltipを単一またはcells/tdのコレクションで呼び出すことができます。

$('#myGrid .tooltip-cell').tooltip({
            container:'body',
            placement: 'bottom',
            title: 'Click to edit',
            trigger: 'hover'
        });

htmlテーブルの動作を維持するには、container:bodyを使用する必要があります。

0
Suhail Gupta