jqgrid información sobre herramientas para celdas de encabezado solo

¿Cómo puedo agregar información sobre herramientas a mis celdas de encabezado jqgrid? en caso de múltiples cuadrículas en la misma página.jqgrid información sobre herramientas para celdas de encabezado solo

Este es mi código:

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>

de las gracias de antemano.

Fuente

2011-01-26 user590586

Solo incluya la opción headertitles:true en su definición de jqGrid.

Actualizado: Si desea establecer herramientas personalizadas en un encabezado de la columna que puede hacer lo siguiente:

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");

Usted debe tomar en cuenta, que el número de columna iColumn es el índice absoluto 0 sobre la base de la columna. Cada una de las opciones rownumbers:true, multiselect:true o subGrid:true incluye una columna adicional al principio, por lo que debe aumentarse el índice iColumn correspondiente.

ACTUALIZADO 2: Para obtener más información sobre la estructura de inmersiones, grid.hDiv elementos internos y las clases utilizadas por jqGrid ver this answer.

Fuente

2011-01-26 15:52:21 Oleg

@Oleg: gracias por tu respuesta, cuando agrego "headertitles: true" puedo ver la información sobre herramientas de cabecera pero no veo cuál es inisde de colNames: [] data, mi pregunta es ¿cómo puedo ver la información sobre herramientas con otros datos, entonces qué hay dentro de colNames? – user590586

@ user590586: actualicé mi respuesta para mostrar cómo puede establecer información sobre herramientas personalizada en el encabezado de columna. – Oleg

@Oleg: greate..thank's por tu ayuda :) – user590586

En mi caso, no tengo el índice de la columna en la que me gustaría configurar la información sobre herramientas. He modificado la respuesta anterior por @Oleg como a continuación.

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

Fuente

2017-05-09 14:03:19 Charasala

Para agregar información sobre herramientas simplemente llamar a este méthode en 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]); 
    } 
}

Fuente

2017-06-09 05:16:38

jqgrid información sobre herramientas para celdas de encabezado solo

Respuesta

Cuestiones relacionadas