Comment régler la pointe de l'outil sur la souris jqGrid?

Question

Comment pouvez-vous définir la "info-bulle" qui apparaît lorsque vous passez votre souris sur une ligne/cellule jqGrid?

Actuellement, la pointe de l'outil semble être juste le contenu des cellules.

Answer 1

En général, je suis d'accord avec Justin, que jqGrid vous obtenez aucun moyen direct pour régler infobulle sur la ligne, vous pouvez le faire que sur la base cellulaire. Donc, vous devez le faire manuellement.

d'abord tout ce que vous devez définir la propriété title:false sur toutes les cellules ne pas avoir infobulle pour les cellules. Ensuite, vous devez définir vos info-bulles personnalisées de chaque ligne. Vous pouvez le faire par exemple dans le handle d'événement loadComplete. Le code correspondant peut être au sujet suivant:

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 + ')'); 
    } 
} 

Vous pouvez voir l'exemple correspondant, vous pouvez voir en direct here.

MISE À JOUR: Dans les versions les plus récentes de jqGrid, il existe une méthode beaucoup plus efficace pour définir title personnalisé. Il est l'utilisation de cellattr (voir the answer pour un exemple) ou l'utilisation de rowattr (voir the answer). Je recommande d'utiliser l'option gridview: true de jqGrid toujours. L'utilisation de cellattr ou rowattr avec gridview: true permet de créer un corps de grille complet incluant toutes les infobulles dont on a besoin dans une modification de la page (le fragment HTML complet du corps de grille incluant toutes les info-bulles sera affecté à la propriété innerHTML). L'utilisation de .attr dans la boucle suit au moins reflow qui est expansif (voir here). Donc, l'utilisation de cellattr et rowattr en combinaison avec gridview: true permettent d'atteindre les meilleures performances.

Answer 2

Il n'y a pas d'API jqGrid pour cela. Si vous souhaitez modifier le texte de l'info-bulle, vous devrez écrire du code pour modifier manuellement la valeur de l'élément title de la cellule.

Answer 3

J'ai eu un problème similaire, où jQuery ne serait pas juste de reconnaître un mouseover même si la classe a été correctement réglée. Comme test, j'ai configuré

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

Aucun résultat. Puis je l'ai changé à

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

et cela a fonctionné. Tout était sur le chargement de la commande. J'espère que cela t'aides.

Answer 4

Utilisez un formatter personnalisé

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

     } 

Et puis utilisez ce formatter dans le modèle col

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

Answer 5

Je voudrais étendre ma réponse à l'utilisation bootstrap infobulle avec jqGrid. La grille définit une info-bulle par défaut qui peut être effacée en utilisant title:false pour chaque colonne.

Pour sélectionner un td ou un cell particulier, nous pourrions créer notre propre classe/attribut en utilisant la propriété cellattr comme fonction pour n'importe quelle cellule.Par exemple:

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

Puis enfin, la fonction d'amorçage tooltip pourrait être appelée sur un seul ou une collection de cells/td:

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

container:body doit être utilisé pour maintenir le comportement des html tables.

Answer 6

Pour mettre en surbrillance et affecter une info-bulle à une ligne entière, en utilisant jqgrid 4.4 et IE 11, cela fonctionne.

1. tour hors infobulle dans toutes les cellules lors de la définition du colModel, par exemple:

   colModel: [{name: 'NomColonne', titre: false}, ...

2. attribuer une procédé LoadComplete à la grille:

   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'); 
       } 
   } 
   

   }}