Información sobre herramientas personalizada en jqGrid 3.4

Question

He estado trabajando con el excelente complemento jqGrid, y funciona muy bien. Recientemente, sin embargo, me pidieron que implementara algunas informaciones sobre herramientas personalizadas para la cuadrícula. Ahora, la documentación es muy completa, pero no explica cómo (si es posible) para lograr esto.

Aquí hay un ejemplo de lo que estoy buscando:

| col A | col B | ...
| datos | datos | ...
| (cursor del mouse) - datos x

He buscado en la documentación y en la fuente cómo / dónde definir información sobre herramientas, pero lo más cercano que he encontrado es información sobre herramientas personalizada para botones en el modo de edición. Tengo un controlador de eventos para el evento afterInsertRow, a través del cual podría obtener el RowId y demás, pero no estoy seguro de cómo definir los atributos HTML en ese evento.

EDITAR: para aclarar, me gustaría establecer el atributo de título en una celda individual para un dato particular (que ya tengo en el modelo jqgrid)

EDIT 2: he intentado insertar lo siguiente en el evento afterInsertRow, sin alegría, donde aData es el modelo JSON, y ExpirationDate es el nombre del modelo:

afterInsertRow: function(rowid, aData) {
                grid.setCell(rowid, 'ExpirationDate', '', { title: aData.ExpiredBy });

Sin embargo, el siguiente código en el mismo controlador de eventos SÍ funciona:

grid.setCell(rowid, 'ExpirationDate', '', { color: 'red' });

EDIT 3: trabajando con las excelentes sugerencias de redsquare, he determinado que el atributo de título se está configurando en algún momento después de el evento afterInsertRow: lo he superado y he determinado que se está configurando correctamente cualquiera de los métodos descritos en los comentarios, pero desafortunadamente, obtengo un código fuente que no está disponible para esta ubicación cuando intento dar un paso más, lo que significa que no puedo ver exactamente dónde se está cambiando el título.

EDIT 4: (gracias por su paciencia y por ayudarme a resolver esto). Tomando nuevamente el comentario de redsquare acerca de probar el evento loadComplete, pude obtener y modificar los atributos de la celda con éxito, pero el atributo del título sigue siendo el mismo:

loadComplete: function() {
                var ids = grid.getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    grid.setCell(ids[i], 'ExpirationDate', '', { title: 'FOO!'});
                }

EDICIÓN FINAL: consulte mi respuesta a continuación: pude encontrar la causa raíz del problema, con la ayuda de redsquare.

Cualquier ayuda sería apreciada

Answer 1

Ok, encontré el problema después de hacer una inspección detallada de las propiedades que se están configurando. Resulta que yo, la cabeza de nudillo que soy, no leí la documentación del método grid.setCell (...) con suficiente atención:

  

Este método puede cambiar el contenido de   célula particular y puede establecer la clase o   propiedades de estilo. Dónde: • Rowid: el   ID de la fila,

     

• colname: el nombre de la columna (esto   el parámetro puede ser un número que comienza   desde 0)

     

• datos: el contenido que se puede poner   en la celda Si la cadena esta vacía   el contenido no será cambiado

     

• clase: si la clase es una cadena, entonces agregamos   una clase a la celda usando addClass; Si   clase es una matriz establecemos el nuevo css   propiedades a través de css

     

• propiedades: establece el atributo   propiedades de la célula

     

Ejemplo:

     

setCell (" 10 " ;, " tax " ;, '',   {color: 'red', 'text-align': 'center'} ', {title:' Sales   Impuestos '})

     

establecerá el contenido del campo de impuestos   en la fila 10 a rojo y centrado y   cambie el título a 'Impuesto de ventas'.

En resumen, los argumentos que estaba pasando en el método establecían las propiedades de css (el cuarto argumento) en lugar de los atributos (el quinto argumento). El resultado fue que se agregaron dos atributos de título, uno de ellos con un formato incorrecto. A continuación se muestra la invocación correcta del método para lograr lo que estaba tratando de hacer:

grid.setCell(rowid, 'ExpirationDate', '', '',{ title: aData.ExpiredBy});

¡Gracias de nuevo a redsquare por su ayuda para resolver esto!

Answer 2

¿Qué información mostraría la información sobre herramientas? Supongamos que la información de información sobre herramientas tal vez esté dentro de la primera celda (oculta) en la fila. Puedes apuntar a cualquier fila dentro de la cuadrícula y al usar el método .live tienes todas las filas nuevas cubiertas.

$('#gridId>tbody>tr').live('mouseover', showTip)
                     .live('mouseoff', hideTip);

function showTip(){

   var $row = $(this);
   //get tooltip from first hidden cell
   var tipText = $row.children(':eq(0)').text()
   //append tipText to tooltip and show

}


function hideTip(){

    //hide tip

}

Answer 3

bien, después de la claridad, puedes intentar esto. Asume que la celda que desea cambiar es la cuarta en cada fila y establece el título de la celda al texto actual en esa celda. Cambie según sea necesario.

N.B La cuadrícula en realidad rompe los estándares al usar los ID de enteros para las filas. Sin embargo, lo siguiente debería seguir funcionando.

$("#gridId").jqGrid({
     ...,
     afterInsertRow : setCellTitle,
     ...
});



function setCellTitle(rowid){
  //get fourth cell in row
  var $cell = $(rowid).children(':eq(3)');
  //set title attribute
  $cell.attr('title', $cell.text());

}