Benutzerdefinierte Daten Tooltips in jqGrid 3.4

Question

Ich habe mit der ausgezeichneten jqGrid Plugin gearbeitet, und es funktioniert super. Vor kurzem jedoch wurde ich gebeten, einige benutzerdefinierten Tooltips für das Netz zu implementieren. Nun wird das Dokumentation ist sehr gründlich, aber es geht nicht auf, wie (wenn es überhaupt möglich ist) ist, dies zu erreichen.

Hier ist ein Beispiel dafür, was ich suche:

| col A | col B | ...
| Daten | Daten | ...
| (Mausbewegung) - Daten x

Ich habe durch die Dokumentation und die Quelle nach wie / wo Tooltips zu definieren, aber die nächste, die ich bekommen habe, ist benutzerdefinierten Tooltips für Schaltflächen im Bearbeitungsmodus. Ich mache einen Event-Handler für das Ereignis afterInsertRow habe - durch, dass ich die rowID bekommen konnte und so, aber ich bin nicht sicher, wie HTML-Attribute in diesem Fall definieren

.

EDIT: Um zu klären, würde Ich mag den Titel-Attribut auf einer einzelnen Zelle auf einen bestimmten Teil der Daten setzen (die ich bereits im jqGrid Modell haben)

EDIT 2: Ich habe versucht, die folgenden in das afterInsertRow Ereignis einfügen, ohne Freude, wo ADATA das JSON-Modell, und ExpirationDate ist der Modellname:

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

Mit dem folgenden Code in den gleichen Event-Handler funktioniert, aber:

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

EDIT 3: mit redsquare ausgezeichneten suggesstions arbeiten, ich habe festgestellt, dass das Titel-Attribut wird irgendwann einmal gesetzt werden nach dem afterInsertRow Ereignisse: Ich habe tritt durch und festgestellt, dass es durch richtig eingestellt wird beiden Verfahren in den Kommentaren skizzierten, aber leider bekomme ich ein Quellcode für diesen Ort nicht verfügbar ist, wenn weiter zu Schritt versuchen, das heißt, ich kann nicht genau sehen, wo der Titel geändert wird.

EDIT 4: (! Dank für Ihre Geduld und hilft mir durch diese Arbeit) wieder redsquare Kommentars Einnahme über das Loadcomplete Ereignis versucht, ich in der Lage war, erfolgreich zu bekommen und die Zelle der Attribute zu ändern, aber die Titel-Attribut hartnäckig bleibt das gleiche:

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

FINAL EDIT:. Siehe meine Antwort unten - ich war in der Lage, die Ursache des Problems zu finden, die mit Hilfe von redsquare

Jede mögliche Hilfe geschätzt

Answer 1

Ok, ich fand das Problem, nachdem er einige enge Kontrolle der Eigenschaften festgelegt tun wird. Es stellt sich heraus, dass ich, Knöchel-Kopf, der ich bin, nicht in der Dokumentation der grid.setCell (...) Methode genau genug gelesen hat:

  

Diese Methode kann den Inhalt ändern   bestimmte Zelle und einstellen Klasse oder   Stileigenschaften. Dabei gilt: • Rowid: die   ID der Zeile

     

• colname: der Name der Spalte (diese   Parameter kann eine Zahl sein, beginnend   0)

     

• Daten: der Inhalt, der gesetzt werden kann   in die Zelle. Wenn die leere Zeichenkette   Inhalt wird nicht geändert

     

• Klasse: wenn Klasse String ist dann fügen wir   eine Klasse, auf die Zelle unter Verwendung addClass; wenn   Klasse ist ein Array setzen wir die neue CSS   Eigenschaften über CSS

     

• Eigenschaften: setzt das Attribut   properies der Zelle

     

Beispiel:

     

SetCell ( "10", "Steuer", '',   {Color: 'rot', 'text-align': 'center'} '{title:' Sales   Steuer '})

     

wird der Inhalt des Steuerfeldes gesetzt   in Zeile 10 auf rot und zentriert und   Ändern Sie den Titel zu 'Sales Tax'.

Kurz gesagt, die Argumente, die ich in die Methode übergeben wurden CSS-Eigenschaften festlegen (die 4. arg) anstelle der Attribute (die 5. arg). Das Ergebnis war, dass zwei Titelattribute wurden hinzugefügt, mit einer nicht ordnungsgemäß formatiert. Der unten zeigt den korrekten Aufruf der Methode zu erreichen, was ich versuche zu tun:

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

wieder Dank für seine / ihre Hilfe redsquare dies bei der Lösung!

Answer 2

Welche Informationen würde die Tooltip anzeigt werden? Nehmen wir an, der Tooltip info vielleicht innerhalb der ersten Zelle (versteckt) in der Reihe. Sie könnten jede Zeile innerhalb des Gitters Ziel und durch die .live Methode verwenden, haben Sie alle neuen Zeilen abgedeckt.

$('#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

}

Answer 3

ok nach Klarheit könnte man dies versuchen. Es nimmt die Zelle, die Sie ändern möchten, die vierte in jeder Zeile und setzt den Titel der Zelle auf den aktuellen Text in dieser Zelle. Ändern Sie nach Bedarf.

NB Das Gitter bricht tatsächlich Standards durch ganzzahlige IDs für die Zeilen verwenden. Allerdings sollte die folgende immer noch funktionieren.

$("#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());

}