jqGridの上にツールチップをセットする方法は？

Question

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

現在、ツールチップはセルの内容であるようです。

Answer 1

一般に、私はJustinに同意します。その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 + ')'); 
    } 
} 

あなたはあなたがライブhereを見ることができ、対応する例を見ることができます。

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

Answer 2

このためのjqGrid APIはありません。ツールヒントのテキストを変更する場合は、セルのtitle要素の値を手動で変更するコードを記述する必要があります。

Answer 3

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

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

結果はありません。それから、私は

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

に変更しました。それはすべての注文を読み込むことでした。お役に立てれば。

Answer 4

は、カスタムフォーマッタ

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

     } 

を使用し、私はjqGridでbootstrapツールチップを使用するための私の答えを延長したいCOLモデル

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

Answer 5

で、このフォーマッタを使用します。グリッドはデフォルトでツールチップを設定します。これは各列に対してtitle:falseを使用してクリアすることができます。

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

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

続いて最後に、ブートストラップ機能tooltipは、単一またはcells/tdのコレクションで呼び出すことができます。

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

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

Answer 6

jqgrid 4.4とIE 11を使用して、行全体にツールチップをハイライト表示して割り当てるには、これが機能します。

が

colModel：[{名： 'ColumnNameの' タイトル：偽}、...

割り当てる例えばcolModel定義する全ての細胞において

は

1. オフツールチップを、グリッドへ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'); 
       } 
   } 
   

   }}