Info-bulles de données personnalisées dans jqGrid 3.4

Question

Je travaille avec l'excellent plugin jqGrid, et cela fonctionne très bien. Récemment cependant, on m'a demandé d'implémenter des info-bulles personnalisées pour la grille. Maintenant, la documentation est très complète, mais elle ne dit pas comment (si est possible) pour y parvenir.

Voici un exemple de ce que je recherche:

| col A | col B | ...
| données | données | ...
| (survol de la souris) - données x

J'ai parcouru la documentation et les sources pour savoir comment / où définir les info-bulles, mais le plus proche que j'ai obtenu est celui des info-bulles personnalisées pour les boutons en mode édition. J'ai un gestionnaire d'événement pour l'événement afterInsertRow. Je peux ainsi obtenir l'ID de ligne, etc., mais je ne sais pas comment définir les attributs HTML dans cet événement.

EDIT: pour clarifier, j'aimerais définir l'attribut title d'une cellule individuelle sur une donnée particulière (que j'ai déjà dans le modèle jqgrid)

EDIT 2: j'ai essayé d'insérer les éléments suivants dans l'événement afterInsertRow, sans joie, où aData est le modèle JSON et ExpirationDate est le nom du modèle:

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

le code suivant dans le même gestionnaire d'événements DOIT fonctionner, cependant:

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

EDIT 3: en travaillant avec les excellentes suggestions de redsquare, j’ai déterminé que l’attribut title était défini à un moment après l’événement afterInsertRow: j’ai expliqué et déterminé qu’il était correctement défini par Quelle que soit la méthode décrite dans les commentaires, mais malheureusement, le code source n’est pas disponible pour cet emplacement lorsque je tente d’aller plus loin, ce qui signifie que je ne peux pas voir exactement où le titre est modifié.

EDIT 4: (merci de votre patience et de m'aider à résoudre ce problème!) en prenant à nouveau le commentaire de redsquare sur le fait d'essayer l'événement loadComplete, j'ai réussi à obtenir et à modifier les attributs de la cellule, mais l'attribut title reste obstinément le même:

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

FINAL EDIT: s'il vous plaît voir ma réponse ci-dessous - J'ai pu trouver la cause première du problème, avec l'aide de redsquare.

Toute aide serait appréciée

Answer 1

OK, j’ai trouvé le problème après une inspection minutieuse des propriétés définies. Il se trouve que moi, qui suis ce que je suis, je n'ai pas lu suffisamment la documentation de la méthode grid.setCell (...):

  

Cette méthode peut changer le contenu de   cellule particulière et peut définir la classe ou   propriétés de style. Où: • rowid: le   id de la ligne,

     

• nomcol: le nom de la colonne (this   paramètre peut être un nombre commençant   à partir de 0)

     

• data: le contenu pouvant être ajouté   dans la cellule. Si chaîne vide le   le contenu ne sera pas changé

     

• class: si class est une chaîne, alors nous ajoutons   une classe à la cellule utilisant addClass; si   la classe est un tableau, nous définissons le nouveau css   propriétés via css

     

• propriétés: définit l'attribut   propriétés de la cellule

     

Exemple:

     

setCell ("10", "taxe", '',   {color: 'red', 'text-align': 'center'} ', {title:' Ventes   Tax '})

     

définira le contenu du champ taxe   dans la rangée 10 en rouge et centré et   remplacez le titre par "Taxe de vente".

En bref, les arguments que je passais dans la méthode définissaient les propriétés css (le 4ème argument) au lieu des attributs (le 5ème argument). Le résultat est que deux attributs de titre ont été ajoutés, l'un d'entre eux étant mal formaté. Le tableau ci-dessous montre comment invoquer correctement la méthode pour accomplir ce que j’essayais de faire:

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

Merci encore à redsquare pour son aide dans la résolution de ce problème!

Answer 2

Quelles informations l'info-bulle afficherait-elle? Supposons que l'info-bulle est peut-être à l'intérieur de la première cellule (cachée) de la ligne. Vous pouvez cibler n’importe quelle ligne de la grille et utiliser la méthode .live pour couvrir les nouvelles lignes.

$('#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 après la clarté, vous pouvez essayer ceci. Il suppose que la cellule que vous souhaitez modifier est la quatrième de chaque ligne et définit le titre de la cellule sur le texte actuel de cette cellule. Changez au besoin.

N.B La grille casse les normes en utilisant des identifiants entiers pour les lignes. Toutefois, les éléments suivants devraient toujours fonctionner.

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

}