¿Cómo configurar la información sobre herramientas en el mouse jqGrid?

Question

¿Cómo se puede establecer la "información sobre herramientas" que aparece al pasar el mouse sobre una fila/celda jqGrid?

Actualmente, la información sobre herramientas parece ser solo el contenido de la celda.

Answer 1

En general, estoy de acuerdo con Justin, que jqGrid no le proporciona una forma directa de configurar la información sobre herramientas en la fila, puede hacerlo solo en base a la celda. Entonces tienes que hacer esto manualmente.

En primer lugar debe establecer la propiedad title:false en todas las celdas para no tener información sobre herramientas para las celdas. Luego debe configurar sus sugerencias de herramientas personalizadas de cada fila. Puede hacer esto, por ejemplo, dentro del identificador de evento loadComplete. El código correspondiente puede estar a punto siguiente:

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

se puede ver el ejemplo correspondiente se puede ver en vivo here.

ACTUALIZADO: En las versiones más recientes de jqGrid hay una manera mucho más efectiva de establecer title personalizado. Es el uso de cellattr (vea the answer para un ejemplo) o el uso de rowattr (vea the answer). Recomiendo usar la opción gridview: true de jqGrid siempre. El uso de cellattr o rowattr junto con gridview: true permite crear cuerpo de rejilla completa, incluidos todos los tooltips que uno necesitan en una modificación de la página (se le asignará el fragmento HTML completo de cuerpo de rejilla incluidos todos los globos de sugerencias para innerHTML propiedad). El uso de .attr en el ciclo sigue al menos a reflow que es expansivo (ver here). Por lo tanto, el uso de cellattr y rowattr en combinación con gridview: true permite obtener el mejor rendimiento.

Answer 2

No hay API jqGrid para esto. Si desea cambiar el texto de la información sobre herramientas, deberá escribir el código para cambiar manualmente el valor del elemento title de la celda.

Answer 3

Tuve un problema similar, donde jQuery simplemente NO reconocería un mouseover aunque la clase estuviera configurada correctamente. Como prueba configuro

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

Sin resultados. Luego lo cambié a

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

y funcionó. Todo se trataba de cargar orden. Espero que esto ayude.

Answer 4

Utilice un formateador personalizado

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

     } 

y luego usar este formateador en el modelo col

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

Answer 5

Me gustaría extender mi respuesta para el uso de información sobre herramientas con bootstrap jqGrid. Grid establece un tooltip por defecto que se puede borrar usando title:false para cada columna.

Para seleccionar un particular td o cell podemos crear nuestra propia clase/atributo usando la propiedad cellattr como una función para cualquier celda.Por ejemplo:

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

Entonces, finalmente, la función de arranque tooltip podría ser llamado en una sola o una colección de cells/td:

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

container:body necesita ser utilizado para mantener el comportamiento de html tablas.

Answer 6

Para resaltar y asignar una información sobre herramientas a toda una fila, usando jqgrid 4.4 e IE 11, esto funciona.

1. desvío información sobre herramientas en todas las células cuando se definen las colModel, por ejemplo:

   colModel: [{nombre: 'ColumnName', título: false}, ...

2. asignar una método LoadComplete a la red:

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

   } }