¿Es posible una fila variable en SlickGrid?

Question

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

¿Me puede indicar algún ejemplo?

Answer 1

En pocas palabras, 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 tenga una penalización de rendimiento. La forma en que funciona SlickGrid, necesita poder responder rápidamente a las siguientes dos preguntas:

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

Cuando utiliza 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.

Aquí es más o menos lo que he cambiado en Slick.Grid.js

• Agregar una nueva matriz para realizar un seguimiento de tamaños de fila. Inicializar todas las filas al tamaño predeterminado
• Retire las reglas CSS en createCssRules que establecen la altura de la celda
• añadir algo de código al final de renderRows que comprueba el alto representado de cada celda de la fila y luego define la altura de todos 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 ayude.

Answer 3

Sé que esto no satisface el meollo de la cuestión, pero decidió una solución simple por el momento 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 vuelvo a crear la cuadrícula con el nuevo valor rowHeight establecido en las opciones.

1. Incluir jQuery UI:
2. Crear elementos para el control deslizante y el valor
3. Asegúrese de que su rejilla está configurado e inicializado para cuando se carga la página.

4. Agregue el código para manejar el control deslizante y volver a crear 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 marca 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, deben tener en cuenta que esto no es en función de cada fila, pero de nuevo, se ajusta a mis necesidades por ahora. No es ideal, pero funciona. Además, si realmente necesita renderizar la cuadrícula 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 como las opciones de cuadrícula para rowHeight. Luego, cree (o recree) la grilla.

Answer 4

Lo he implementado en mi proyecto, con la ayuda de la respuesta de @Stephen Robinson aquí.
Si alguien está interesado, pueden consultar:
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 5

Para la solución de Vihari Piratla - He descargado Seaview, he modificado 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 enableWrap se establece en false, pero cuando se establece en true, la cuadrícula se dibuja vacía sin contenido. Me preguntaba si hay una forma especial de usar la opción enableWrap?

Answer 6

Existe también la implementación de altura variable por JLynch7 en github:

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

Por lo que yo entiendo la altura se establece por el usuario y no de forma automática calcula en base al contenido de las células de la fila (que sólo miré el ejemplo/ejemplo-variable-fila-altura-dataview.html)

Answer 7

Recientemente he bifurcado SlickGrid para agregar un conjunto de nuevas características, incluyendo las filas variables (y redimensionables). Puedes probarlo aquí: https://github.com/globexdesigns/doby-grid

Answer 8

definir esta variable fuera ....

var tableHeight = 0;

Antes de crear la red mancha de uso por debajo de las líneas:

// 30 píxeles para cada línea esto cubrirá la cabecera ... Se puede ajustar este valor para su mesa.

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 ya se generó la página, el siguiente va a cambiar el tamaño de 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 9

Como un resumen de las opciones anteriores ninguno de ellos son oficiales, compatibles y listos para producción. Incluso la opción doby-grid (más compatible) todavía se muestra como no lista para producción.

Nota, también hay diferencias entre:

• Alto de fila se puede cambiar por separado para cada fila.
• El texto puede ajustarse a la siguiente línea.
• La altura de la fila se puede ajustar automáticamente para adaptarse 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 oficial, con el apoyo y la producción listo, entonces este es mis impresiones de la comprobación del 3 SlickGrid variantes mencionadas anteriormente:

Seaview

• Los usuarios informan de problemas con solamente mostrando 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 arregle la altura de la fila, lo que no es muy bueno). He arreglado en parte el ajuste automático de la altura de la celda, pero me queda bastante trabajo por hacer. No es una tarea simple No funciona de la caja. Definitivamente no está listo para producción.

JLynch7

• Sin demostración para funcionar sin necesidad de 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 fila" está rota.

Doby de la red

• Está en alfa - No 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.resizableRows es la mitad de lo que queremos, puede cambiar manualmente las alturas de filas de forma dinámica. ¡PERO no hay cambio de tamaño automático de alturas de fila para adaptarse al contenido!
• This issue indica 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 10

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

Considero '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 examinado esto de forma bastante exhaustiva y, desafortunadamente, no he encontrado alternativas viables que estén relacionadas con SlickGrid. De otras alternativas, solo he encontrado una que es gratis 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.