jqGrid 3.4のカスタムデータツールチップ

StackOverflow https://stackoverflow.com/questions/1201473

  •  05-07-2019
  •  | 
  •  

質問

私は優れたjqGridプラグインを使用してきましたが、うまく機能しています。しかし最近、グリッドにカスタムツールチップを実装するように依頼されました。現在、ドキュメントは非常に徹底していますが、どのように対処するのか（それがこれを達成することは可能です。

探しているものの例を次に示します。

| col A | col B | ...
|データ|データ| ...
| （マウスホバー）-データx

ツールチップを定義する方法と場所をドキュメントとソースで検索しましたが、編集モードでのボタンのカスタムツールチップが最も簡単です。 afterInsertRowイベントのイベントハンドラーがあります。これにより、rowIdなどを取得できますが、そのイベントでHTML属性を定義する方法がわかりません。

編集：明確にするために、個々のセルのタイトル属性を特定のデータ（jqgridモデルに既にある）に設定したい

編集2：次のコードをafterInsertRowイベントに挿入しようとしましたが、aDataはJSONモデル、ExpirationDateはモデル名です：

afterInsertRow: function(rowid, aData) {
                grid.setCell(rowid, 'ExpirationDate', '', { title: aData.ExpiredBy });

同じイベントハンドラ内の次のコードは機能しますが、

grid.setCell(rowid, 'ExpirationDate', '', { color: 'red' });

編集3：redsquareの優れた提案を使用して、afterInsertRowイベントの後にtitle属性が設定されていると判断しました：ステップスルーして、正しく設定されていると判断しましたどちらの方法でもコメントに概説されていますが、残念ながら、さらに先に行こうとすると、この場所のソースコードが利用できません。つまり、タイトルが変更されている場所を正確に見ることができません。

編集4：（忍耐と私にこれを介して作業してくれてありがとう！）再びloadCompleteイベントを試すことについてredsquareのコメントを取り、セルの属性を正常に取得および変更することができましたが、タイトル属性は頑固に同じままです： 

loadComplete: function() {
                var ids = grid.getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    grid.setCell(ids[i], 'ExpirationDate', '', { title: 'FOO!'});
                }

最終編集：以下の回答をご覧ください-redsquareの助けを借りて、問題の根本原因を見つけることができました。

ご協力いただければ幸いです

役に立ちましたか？

解決

OK、設定中のプロパティを詳細に調べたところ、問題が見つかりました。私であるナックルヘッドは、grid.setCell（...）メソッドのドキュメントを十分に詳しく読んでいなかったことがわかりました：

  

このメソッドは、   特定のセルおよびクラスを設定するか、   スタイルのプロパティ。ここで：＆＃8226; rowid：the   行のID、

     

＆＃8226; colname：列の名前（これ   パラメータは、数字で始まることができます   0から）

     

＆＃8226; data：配置できるコンテンツ   セルに。空の文字列の場合   コンテンツは変更されません

     

＆＃8226; class：クラスが文字列の場合、追加します   addClassを使用したセルのクラス。もし   クラスは、新しいcssを設定する配列です   CSS経由のプロパティ

     

＆＃8226; properties：属性を設定します   セルのプロパティ

     

例：

     

setCell（＆quot; 10＆quot ;,＆quot; tax＆quot ;, ''、   {color： 'red'、 'text-align'： 'center'} '、{title：' Sales   税金 '}）

     

税フィールドの内容を設定します   行10を赤で中央揃えにし、   タイトルを「売上税」に変更します。

要するに、メソッドに渡す引数は、属性（5番目の引数）ではなくcssプロパティ（4番目の引数）を設定することでした。その結果、2つのタイトル属性が追加され、1つが不適切にフォーマットされました。以下は、私がやろうとしていたことを達成するためのメソッドの正しい呼び出しを示しています。

grid.setCell(rowid, 'ExpirationDate', '', '',{ title: aData.ExpiredBy});

これを解決するのに彼/彼女の助けをしてくれたredsquareに再び感謝します！

他のヒント

ツールチップにはどのような情報が表示されますか？ ツールチップ情報が行の最初のセル（非表示）内にあると仮定します。 グリッド内の任意の行をターゲットにできます。.liveメソッドを使用すると、新しい行をカバーできます。

$('#gridId>tbody>tr').live('mouseover', showTip)
                     .live('mouseoff', hideTip);

function showTip(){

   var $row = $(this);
   //get tooltip from first hidden cell
   var tipText = $row.children(':eq(0)').text()
   //append tipText to tooltip and show

}


function hideTip(){

    //hide tip

}

わかりました後、これを試すことができます。 変更するセルが各行の4番目であると想定し、セルのタイトルをそのセルの現在のテキストに設定します。必要に応じて変更します。

N.Bグリッドは、実際には行に整数IDを使用することで標準を破ります。ただし、以下は引き続き機能するはずです。

$("#gridId").jqGrid({
     ...,
     afterInsertRow : setCellTitle,
     ...
});



function setCellTitle(rowid){
  //get fourth cell in row
  var $cell = $(rowid).children(':eq(3)');
  //set title attribute
  $cell.attr('title', $cell.text());

}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top