Descrizioni dei dati personalizzate in jqGrid 3.4

Question

Ho lavorato con l'eccellente plugin jqGrid e funziona benissimo. Di recente, però, mi è stato chiesto di implementare alcuni suggerimenti personalizzati per la griglia. Ora, la documentazione è molto approfondita, ma non spiega come (se è assolutamente possibile) per raggiungere questo obiettivo.

Ecco un esempio di ciò che sto cercando:

| col A | col B | ...
| dati | dati | ...
| (passaggio del mouse) - dati x

Ho cercato nella documentazione e nella fonte come / dove definire i suggerimenti, ma il più vicino che ho ottenuto sono i suggerimenti personalizzati per i pulsanti in modalità di modifica. Ho un gestore di eventi per l'evento afterInsertRow, grazie al quale ho potuto ottenere rowId e simili, ma non sono sicuro di come definire gli attributi HTML in quell'evento.

EDIT: per chiarire, vorrei impostare l'attributo title su una singola cella su un dato dato (che ho già nel modello jqgrid)

EDIT 2: ho provato a inserire quanto segue nell'evento afterInsertRow, senza alcuna gioia, dove aData è il modello JSON e ExpirationDate è il nome del modello:

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

tuttavia, il seguente codice nello stesso gestore di eventi FUNZIONA:

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

MODIFICA 3: lavorando con i suggerimenti eccellenti di redsquare, ho determinato che l'attributo title è stato impostato qualche volta dopo l'evento afterInsertRow: sono passato e ho determinato che è stato impostato correttamente da entrambi i metodi descritti nei commenti, ma sfortunatamente, ottengo un codice sorgente non disponibile per questa posizione quando provo ad avanzare ulteriormente, il che significa che non riesco a vedere esattamente dove viene modificato il titolo.

MODIFICA 4: (grazie per la pazienza e per avermi aiutato a risolvere questo problema!) riprendendo di nuovo il commento di redsquare sul tentativo dell'evento loadComplete, sono stato in grado di ottenere e modificare correttamente gli attributi della cella, ma l'attributo del titolo rimane ostinatamente lo stesso:

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

MODIFICA FINALE: vedere la mia risposta di seguito: sono stato in grado di trovare la causa principale del problema, con l'aiuto di redsquare.

Qualsiasi aiuto sarebbe apprezzato

Answer 1

Ok, ho riscontrato il problema dopo aver esaminato attentamente le proprietà impostate. Si scopre che io, testa a testa che sono, non ho letto abbastanza attentamente la documentazione per il metodo grid.setCell (...):

  

Questo metodo può cambiare il contenuto di   cella particolare e può impostare la classe o   proprietà di stile. Dove: & # 8226; rowid: il   ID della riga,

     

& # 8226; colname: il nome della colonna (questo   Il parametro può essere un numero che inizia   da 0)

     

& # 8226; dati: il contenuto che può essere inserito   nella cella. Se stringa vuota il   il contenuto non verrà modificato

     

& # 8226; class: se la classe è una stringa, aggiungiamo   una classe per la cella usando addClass; Se   class è un array che impostiamo il nuovo css   proprietà via css

     

& # 8226; proprietà: imposta l'attributo   proprietà della cellula

     

Esempio:

     

setCell (" 10 " ;, " tax " ;, '',   {Color: 'rosso', 'text-align': 'center'} '{Titolo:' Vendite   Imposta "})

     

imposterà il contenuto del campo fiscale   nella riga 10 rossa e centrata e   cambia il titolo in "Imposta sulle vendite".

In breve, gli argomenti che stavo passando nel metodo stavano impostando le proprietà css (il 4o argomento) invece degli attributi (il 5o argomento). Il risultato è stato che sono stati aggiunti due attributi del titolo, uno formattato in modo errato. Di seguito mostra l'invocazione corretta del metodo per realizzare ciò che stavo cercando di fare:

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

Grazie ancora a redsquare per il suo aiuto nel risolvere questo problema!

Answer 2

Quali informazioni verrà visualizzata la descrizione comandi? Supponiamo che le informazioni sulla descrizione comandi siano forse all'interno della prima cella (nascosta) nella riga. Potresti scegliere come target qualsiasi riga all'interno della griglia e utilizzando il metodo .live hai coperto tutte le nuove righe.

$('#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 dopo chiarezza potresti provare questo. Presuppone che la cella che si desidera modificare sia la quarta in ogni riga e imposta il titolo della cella sul testo corrente in quella cella. Cambia se necessario.

N.B La griglia in realtà rompe gli standard usando gli ID interi per le righe. Tuttavia, dovrebbe comunque funzionare quanto segue.

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

}