tooltip jqgrid solo per le celle di intestazione

Come posso aggiungere un suggerimento alle mie celle di intestazione jqgrid? in caso di più griglie nella stessa pagina.tooltip jqgrid solo per le celle di intestazione

Questo è il mio codice:

var initialized = [false,false,false]; 
    $('#tabs').tabs 
    (
     { 
      show: function(event, ui) 
       { 
        if(ui.index == 0 && !initialized[0]) 
        { 
         init_confirm_payment(); 
         initialized[0] = true; 
        } 
        else if(ui.index == 1 && !initialized[1]) 
        { 
         init_signatory1_payment(); 
         initialized[1] = true; 
        } 
        else if(ui.index == 2 && !initialized[2]) 
        { 
         init_signatory2_payment(); 
         initialized[2] = true; 
        } 
       } 
     } 
    ); 



     function init_table1() 
     { 
      jQuery("#cpayment").jqGrid({ 
       url:'loadgrid.jsp?type=1', 
       datatype: "xml", 
       loadonce:true , 
       direction:"rtl", 
       height: '100%', 
       width: '100%', 
       headertitles: true , 
       colNames:['col11','col22','col33','col44'], 
       colModel:[ 
        {name:'col11',xmlmap:'col11', width:80, align:"right",sorttype:"int"}, 
        {name:'col22',xmlmap:'col22', width:70, align:"right",sorttype:"int"}, 
        {name:'col33',xmlmap:'col33', width:120, align:"right",sorttype:"string"}, 
        {name:'col44:'col44', width:60, align:"right",sorttype:"float"},       
       ],     
       multiselect: false, 
       autowidth: true, 
       forceFit: false, 
       shrinkToFit: false, 
       loadonce:true    
      }); 


     } 

     function init_table2() 
     { 
      jQuery("#payment1").jqGrid({ 
       url:'loadgrid.jsp?type=2', 
       datatype: "xml", 
       direction:"rtl", 
       height: '100%', 
       width: '100%', 
       headertitles: true , 
       colNames:['col111','col222','col333','col444'], 
       colModel:[ 
        {name:'col111',xmlmap:'col111', width:80, align:"right",sorttype:"int"}, 
        {name:'col222',xmlmap:'col222', width:70, align:"right",sorttype:"int"}, 
        {name:'col333',xmlmap:'col333', width:120, align:"right",sorttype:"string"}, 
        {name:'col444',xmlmap:'col444', width:60, align:"right",sorttype:"float"},       
       ],     
       multiselect: false, 
       autowidth: true, 
       forceFit: false, 
       shrinkToFit: false, 
       loadonce:true    
      }); 
     } 

     function init_table3() 
     { 
      jQuery("#payment2").jqGrid({ 
       url:'loadgrid.jsp?type=3', 
       datatype: "xml", 
       direction:"rtl", 
       height: '100%', 
       width: '100%', 
       headertitles: true , 
       colNames:['col1','col2','col3','col4'], 
       colModel:[ 
        {name:'col1',xmlmap:'col1', width:80, align:"right",sorttype:"int"}, 
        {name:'col2',xmlmap:'col2', width:70, align:"right",sorttype:"int"}, 
        {name:'col3',xmlmap:'col3', width:120, align:"right",sorttype:"string"}, 
        {name:'col4xmlmap:'col4', width:60, align:"right",sorttype:"float"},       
       ],     
       multiselect: false, 
       autowidth: true, 
       forceFit: false, 
       shrinkToFit: false, 
       loadonce:true      
      }); 
     } 

     function test() 
     { 
      var thd = jQuery("thead:first", $("#cpayment").hdiv)[0]; 
      jQuery("tr th:eq(" + 3 + ")", thd).attr("title", "bla bla"); 

      var thd1 = jQuery("thead:first", $("#payment1").hdiv)[0]; 
      jQuery("tr th:eq(" + 3 + ")", thd1).attr("title", "bla bla1"); 
     } 
    </script> 


</head> 
<body> 
<form> 
    <div id="tabs"> 
     <ul> 
      <li><a href="#tabs-1">&nbsp;tab1&nbsp;</a></li> 
      <li><a href="#tabs-2">&nbsp;tab2&nbsp;</a></li> 
      <li><a href="#tabs-3">&nbsp;tab3&nbsp;</a></li> 
     </ul> 

     <div id="tabs-1"> 
      <table id="cpayment"></table> 
     </div> 

     <div id="tabs-2"> 
      <table id="payment1"></table> 
     </div> 

     <div id="tabs-3"> 
      <table id="payment2"></table> 
     </div> 
    </div> 
    <input type="button" onClick="test()"> 
</form>   
</body>

di Grazie in anticipo.

fonte

2011-01-26 user590586

Basta includere l'opzione headertitles:true nella definizione jqGrid.

aggiornamento: Se si desidera impostare tooltip personalizzato su di una colonna si può fare seguente:

var setTooltipsOnColumnHeader = function (grid, iColumn, text) { 
    var thd = jQuery("thead:first", grid[0].grid.hDiv)[0]; 
    jQuery("tr.ui-jqgrid-labels th:eq(" + iColumn + ")", thd).attr("title", text); 
}; 

setTooltipsOnColumnHeader($("#list"), 1, "bla bla");

Si dovrebbe prendere in considerazione, che il numero di colonna iColumn è l'indice assoluto 0 a base di la colonna. Ciascuno delle opzioni rownumbers:true, multiselect:true o subGrid:true include una colonna aggiuntiva all'inizio, pertanto l'indice iColumn corrispondente deve essere aumentato.

AGGIORNAMENTO 2: Per ulteriori informazioni sulla struttura di immersioni, interni grid.hDiv elementi e le classi utilizzate da jqGrid vedere this answer.

fonte

2011-01-26 15:52:21 Oleg

@Oleg: grazie del per la risposta, quando aggiungo "headertitles: true" posso vedere l'intestazione tooltip ma vedo che cosa è inisde di colNames: [] dati, la mia domanda è: come posso visualizzare tooltip con altri dati, quindi cosa c'è dentro i nomi dei colli? – user590586

@ user590586: Ho aggiornato la mia risposta per mostrare come è possibile impostare il suggerimento personalizzato sull'intestazione della colonna. – Oleg

@Oleg: greate..thank per il tuo aiuto :) – user590586

Nel mio caso non ho indice della colonna a cui vorrei impostare il suggerimento. Ho modificato la risposta di cui sopra da @Oleg come di seguito.

//grid object, column id, tooltip text 
var setTooltipsOnColumnHeader = function (grid, iColumn, text) { 
    var thd = jQuery("thead:first", grid[0].grid.hDiv)[0];  
    jQuery("tr.ui-jqgrid-labels", thd).find("[id='"+iColumn+"']").attr("title",text); 
};

fonte

2017-05-09 14:03:19 Charasala

Per aggiungere tooltip basta chiamare questo Methode su loadcomplete:

addToolTipForColumnheader('YourGridID'); 

function addToolTipForColumnheader(gridID){ 
    var columnNameList=$('#'+gridID)[0].p.colNames; 
    for (var i = 0; i < columnNameList.length; i++){ 
     var columnName=$('#'+gridID)[0].p.colModel[i].name; 
     $('#'+gridID+'_'+columnName).attr("title", $('#'+gridID)[0].p.colNames[i]); 
    } 
}

fonte

2017-06-09 05:16:38

tooltip jqgrid solo per le celle di intestazione

risposta

Problemi correlati