2010-11-16 4 views
1

Je veux utiliser qtip avec jqgrid et montrer une image différente en fonction de la ligne sélectionnée dans jqgrid. Le chemin de l'image pourrait être dans le jqgrid comme une cellule cachée. J'ai regardé autour mais je ne peux pas trouver de documentation sur si jqgrid a un sélecteur de ligne pertinent qui pourrait être utilisé. Est-ce que quelqu'un connaît le sélecteur que je veux ou si je devrais essayer d'adopter une approche différente?qtip jqgrid selector question

Le seul sélecteur qui a fonctionné jusqu'ici est ci-dessous mais il est pour toute la grille. J'ai essayé quelques choses pour spécifier la ligne mais rien n'a fonctionné. Toute aide serait appréciée.

$('#gridtable').qtip({ 
     content: 'Some text', 
     show: 'mouseover', 
     hide: 'mouseout', 
     position: { 
      corner: { 
      target: 'topLeft', 
      tooltip: 'bottomLeft' 
     } 
     } 
    }); 

Répondre

0

Ma solution consistait à placer une icône dans chaque rangée qui avait une image de vin et lui assigner l'id de la rangée. Cela signifiait que chaque rangée pouvait recevoir une classe unique à survoler. Pas joli mais ça a marché.

if((gridRow['photo'] != "false")) 
       { 

       $("#gridtable2").jqGrid('setRowData',i+1,{wine:'<div class ="imageicon'+i+'">'+ret['wine']+' <img src=\"images/icon-wine.png\" height="16" width="13"/></div>'}); 

       path = '<img src="images/winephotos/' 
       + gridRow['id'] 
       +'.jpg" width="350" height="450" alt="Wine Image"' 
       +' class="resize"/>'; 

       $('.imageicon'+i).qtip({ 
        content: $(path) 
         , 
         position: { 
          corner: { 
          target: 'topLeft', 
          tooltip: 'bottomLeft' 
          } 

        }, 
        show: { 
         when: 'click', 
         //ready: true, 
         solo: true 
        }, 
        hide: { 
         when: { 
          event: 'click', 
          event: 'mouseout' 
         } 
        }, 
        style: { 
         width: { max: 280 }, 
         name: 'dark' 
        } 
       }); 
       } 
       gridRow=false; 
      }