javascript - plugin - jqgrid

¿Es posible una fila variable en SlickGrid?

Question

Me gustaría proporcionar una altura de fila variable según el tamaño del contenido. ¿Es posible en Slickgrid?

¿Puedes dirigirme hacia algún ejemplo?

Answer 1

Claro y simple, esto no es compatible con SlickGrid y probablemente nunca lo sea. Lo siento.

Answer 2

Esto es posible, pero no es trivial y es probable que tengas una penalización de rendimiento. La forma en que funciona SlickGrid, debe ser capaz de responder rápidamente las dos preguntas siguientes:

• Para una fila determinada X, ¿cuál es el desplazamiento superior para esa fila?
• Para un desplazamiento Y dado, ¿qué fila está en ese desplazamiento?

Cuando usa una altura de fila estática, responder estas preguntas es trivial; sin embargo, con la altura de fila dinámica, deberá mantener un par de estructuras de datos adicionales.

Esto es más o menos lo que cambié en Slick.Grid.js

• Agregue una nueva matriz para rastrear los tamaños de fila. Inicializa todas las filas al tamaño predeterminado
• Elimina las reglas de css en createCssRules que configuran la altura de la celda
• Agregue un código al final de renderRows que verifica la altura representada de cada celda en la fila y luego establece la altura de todas las celdas al máximo (y almacena la altura en la matriz de tamaño de fila). También necesita ajustar el desplazamiento superior en función de la suma de alturas de filas superiores a la actual.
• Agregue código al final del procesamiento para cambiar el tamaño del lienzo a la suma de todas las alturas de fila.
• Actualice getViewport para devolver las filas superior e inferior en función de las sumas de alturas de fila.
• Hay un puñado de otros lugares donde se usa options.rowHeight. Puede ignorar algunos de ellos, pero al menos, en cualquier lugar donde se cambie el tamaño del lienzo, debe cambiarse.

Para que esto sea práctico (rendimiento), también necesitará una memoria caché de los desplazamientos superiores de fila (un caché de sumas de tamaño de fila). Esto permitirá un cálculo rápido para la primera pregunta y permitirá que la búsqueda binaria responda la segunda.

Espero que eso ayude.

Answer 3

Lo he implementado en mi proyecto, con la ayuda de la respuesta de @Stephen Robinson aquí.
Si alguien está interesado, pueden verificar:
https://github.com/vihari/Seaview/blob/version3.0/SlickGrid-master/slick.grid.js .
Se puede habilitar con el archivo anterior si establece options.enableWrap en true.
Gracias.

Answer 4

Para la solución de Vihari Piratla: descargué Seaview, modifiqué su /SlickGrid-master/examples/example1-simple.html para agregar la nueva opción enableWrap. Durante mi prueba, el example1-simple.html continúa funcionando como se esperaba cuando se activa enableWrap. a falso, pero cuando se establece en verdadero, la cuadrícula se dibuja vacía sin contenido. Me preguntaba si hay una forma especial de usar la opción enableWrap?

Answer 5

También está la implementación de altura variable por JLynch7 en github:

https://github.com/JLynch7/SlickGrid/tree/variableRowHeight

Por lo que yo entiendo, el usuario establece la altura y no se calcula automáticamente en función del contenido de las celdas de la fila (solo miré el ejemplo / example-variable-row-height-dataview.html)

Answer 6

Recientemente, utilicé SlickGrid para agregar varias funciones nuevas, incluidas las variables (y de tamaño variable). Puede intentarlo aquí: https://github.com/globexdesigns/doby-grid

Answer 7

Defina esta variable afuera ...

var tableHeight = 0;

Antes de crear la grilla resbaladiza, use debajo de las líneas:

// 30 px para cada línea esto cubrirá el encabezado ... Puede ajustar este valor para su tabla.

tableHeight = dataTable.length * 30;    

if(tableHeight >  ($(window).height() - 400)){
       $("#myGrid").height($(window).height() - 400);
}else{
       $("#myGrid").height(tableHeight);
}

Si el usuario cambia la pantalla cuando la página ya está generada, a continuación se redimensionará la tabla en función de la pantalla y el número de filas de datos:

    $(window).resize(function() {

    // For grid height
    if(tableHeight >  ($(window).height() - 400)){
        $("#myGrid").height($(window).height() - 400);
    }else{
        $("#myGrid").height(tableHeight);
    }

    // For grid width
    $("#myGrid").width("100%");

    // Resize the grid dynamically. 
    gridName.resizeCanvas();
});

Answer 8

Como resumen de las opciones anteriores, ninguno de ellos es oficial, compatible y está listo para producción. Incluso la opción doby-grid (más compatible) todavía se muestra como no lista para producción.

Tenga en cuenta que también hay diferencias entre:

• La altura de la fila se puede cambiar por separado para cada fila.
• El texto puede ajustarse a la siguiente línea.
• La altura de la fila puede ajustarse automáticamente para ajustarse al contenido.

Sorprendentemente, con todas las variantes de SlickGrid anteriores (y muchas otras bibliotecas de DataGrid), puede obtener uno o dos de los anteriores, pero no los tres.

Si no está tan preocupado por la versión oficial, compatible y de producción, estas son mis impresiones al probar las 3 variantes de SlickGrid enumeradas anteriormente:

Vista marítima

• Los usuarios reportan problemas con solo mostrar blanco, no probado con celdas de edición (advertencia), la paginación puede no funcionar (advertencia).
• Mi prueba de la demostración encontró que envolvía el texto y variaba automáticamente la altura de la celda, pero tiene un error de que las filas / bordes están apagados por unos pocos píxeles. Entonces puede ser útil, pero no está listo para producción.
• Intenté descargarlo y usarlo. Tiene envoltura de texto en celdas, bueno. Su autoajuste de la altura de la celda está muy roto / incompleto, lo que hace que envolver el texto sea prácticamente inútil (a menos que arregles la altura de la fila, lo que no es muy bueno). En parte, he arreglado el ajuste automático de la altura de la celda, pero aún queda mucho trabajo por hacer. No es una tarea simple No funciona de la caja. Definitivamente no está listo para producción.

JLynch7

• Sin demo para ejecutar sin descargar.
• Intenté descargarlo y usarlo. Tiene errores (tuve que arreglarlo para que funcione), agrega una altura de fila variable, pero NO parece envolver el texto y NO ajusta automáticamente el alto de la fila en función del texto. No se mantiene activamente. Y no es muy popular, por lo que no es muy bien compatible. Seaview parece ser más avanzado, a pesar de que su función de "ajuste automático de la altura de la fila" está rota.

doby-grid

• Está en alfa, no está listo para producción. Parece una bifurcación considerable: muchos cambios.
• Lo intenté. Comenzar es confuso, pero lo hizo funcionar. Necesita bowser y Requiere JS.
• options.resizeRows es la mitad de lo que deseamos: puede cambiar manualmente las alturas de fila de forma dinámica. ¡PERO no hay cambio de tamaño automático de alturas de fila para adaptarse al contenido!
• Este problema establece que "Agregar una altura de fila verdaderamente dinámica (que se ve afectada por el contenido de la fila) nos obligará a desactivar muchas de las características". Ofrecen un par de soluciones posibles, pero un desarrollador determinado probó esto y tuvo muchos problemas con él. Podría haberlo hecho funcionar, o podría haberse dado por vencido. No voy a arriesgarme.

Answer 9

Como las ventajas de SlickGrid no son realmente opciones viables en muchos aspectos, pensé que sería valioso para muchos lectores de esta publicación analizar alternativas a SlickGrid.

Considero que existen "alternativas viables" que soportan completamente la altura de fila variable: cada fila puede tener una altura de fila diferente que se adapta automáticamente para ajustarse al contenido y permite que el texto se ajuste a la siguiente línea.

He investigado esto bastante extensamente, y desafortunadamente no he encontrado alternativas viables que estén relacionadas con SlickGrid. De otras alternativas, solo he encontrado una que es gratuita para uso comercial - dojox DataGrid , sin embargo, no está claro cómo podría usar editores personalizados con esto (la mayoría de los comerciales ofrecen esto).

Existen bastantes alternativas viables que requieren pago para uso comercial: dhtmlxGrid, jQuery EasyUI DataGrid, jQWidgets, Wijmo Grid widget, JideTable y Sencha ExtJS Grids. De estos, personalmente diría que lo mejor es dhtmlxGrid http://dhtmlx.com/docs/products/dhtmlxGrid/ - La versión gratuita es GPL, la versión Pro cuesta $ 199.

Answer 10

Sé que esto no responde al meollo de la cuestión, pero decidí por una solución simple por ahora que es un esfuerzo mínimo y cumple con mis requisitos en este momento. Entonces, esto es solo en caso de que otros buscaran una solución simple también.

Comencé con un cuadro de entrada, donde cambiar el valor cambiaría el tamaño de la fila. Sin embargo, ahora me he decidido a usar un control deslizante. De hecho, dado que tengo tan pocos datos en mi grilla (garantizado que son pequeñas cantidades de datos, y muy pocas filas), redimensioné dinámicamente la grilla a medida que se desliza el control deslizante. Ahora, sé que muchos dirán que esta es una idea terrible porque puede ser terriblemente lenta, pero de nuevo, estoy usando una cantidad muy pequeña de datos.

La clave es que vuelva a crear la cuadrícula con el nuevo valor rowHeight establecido en las opciones.

1. Incluye jQuery UI:
2. Crear elementos para el control deslizante y el valor
3. Asegúrese de que su grilla esté configurada e inicializada para cuando se cargue la página.

4. Agregue el código para manejar el control deslizante y recrear la cuadrícula (alternativamente, puede mover lo que tengo en la función "deslizar" a la función "detener" si no desea volver a dibujar en cada tick deslizante):

   $j( "#resizeRowSlider" ).slider({
         range:"min"
       , min: 50
       , max: 200
       , value: 50
       , create: function( even, ui ) {
           $j("rowResizeValue").html( "50" );
       }
       , slide: function( event, ui ) {
           $j( "rowResizeValue" ).html( ui.value );
   
           options.rowHeight = ui.value;
   
           // I do a manual resize; you could use autoHeight:true in grid options
           resizeGrid();
   
           grid = new Slick.Grid("#" + gridElemId, json, columns , options);
           grid.setSelectionModel(new Slick.RowSelectionModel() );
   
           refreshGrid(); // Handle invalidate, resizeCanvas
       }
       , stop: function( event, ui ) {
       }
   });

Además, debería tener en cuenta que esto no es por fila, pero de nuevo, se ajusta a mis necesidades por ahora. No es ideal, pero funciona. Además, si realmente necesita renderizar la grilla la primera vez sin ningún desbordamiento, puede crear un div oculto cada vez que obtenga el texto en cuestión y agregar display:table-cell , luego obtener la altura div y establecer ese valor en las opciones de grilla para rowHeight. Luego, crea (o recrea) la grilla.