¿Cómo hago el tamaño automático de la columna en SlickGrid?

autosize tablecolumn

Question

Quiero que slickgrid redimensione automáticamente las columnas según el contenido más amplio o el texto del encabezado, el que sea más ancho. En términos más simples, quiero que simule el comportamiento predeterminado de las tablas HTML normales cuando se trata del tamaño de columna. ¿Cómo puedo hacerlo en slickgrid?

Answer 1

Agregué esto después de dibujar la cuadrícula y funciona bien.

$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})

Answer 2

Debería poder llamar al método autosizeColumns() del objeto de cuadrícula.

grid.autosizeColumns();

Answer 3

El OP está buscando columnas para crecer para que coincida con su contenido. grid.autosizeColumns() crecer las celdas para que se ajusten al contenedor principal, que no es lo mismo.

He agregado esta función, y es casi tan manual como pueda imaginar. Recorre las celdas mostradas y mide cada una, guardando la celda más ancha y utilizando ese ancho para establecer el ancho de su columna. SlickGrid te da un buen acceso a las celdas en la ventana gráfica, por lo que funciona bien.

El algoritmo de medición es tu gran decisión. Puede poner el contenido fuera de la pantalla y medirlo, como sugiere @jay. Esto funciona, pero es el método más lento, ya que requiere un repintado para insertar y un repintado cuando se elimina. Puede haber formas de optimizar. La solución con la que fui fue medir el ancho de cada letra del alfabeto, así como otros caracteres tipográficos que encontramos, y sumarlos para generar un ancho. Sí, esto suena absurdo. Tiene muchas restricciones: el tamaño de la fuente debe ser el mismo, no admite imágenes, no puede haber retornos de línea y más. Sin embargo, si puede vivir con las restricciones, puede calcular los tamaños para una gran ventana gráfica en <5ms , porque los anchos de caracteres solo se miden una vez.

Después de obtener los tamaños de las columnas, grid.setColumns() a sus columnas utilizando grid.setColumns() .

Answer 4

Inserte el texto en un elemento fuera de la pantalla y recupere el ancho del elemento. Esto es lo que hace excanvas para medir texto. Use esto para establecer el ancho de la columna ya que está esperando un valor de píxel.

Answer 5

Realice este sencillo ajuste en https://github.com/naresh-n/slickgrid-column-data-autosize , en la función init :

• Agregue $container.ready(resizeAllColumns); a la función init.

Esto asegura que las columnas se auto-clasifiquen en la carga inicial.

Answer 6

Slickgrid no admitirá el tamaño automático de la columna en función de los datos. Necesitas escribir un complemento o bifurcar el núcleo de Slickgrid para modificar.

Aquí está el enlace que he creado un complemento para manejar el tamaño automático de Slickgrid https://github.com/naresh-n/slickgrid-column-data-autosize

Answer 7

Cuando construyas tus opciones, puedes usar forceFitColumns: true

var options = {
enableCellNavigation: true,
forceFitColumns: true
};

Esto hará que las columnas llenen todo el ancho de tu div grilla.