¿Es posible hacer un control de cuadrícula pulido de tamaño automático a su altura entre un rango mínimo y máximo para ajustarse al número de filas?

Question

Estoy creando un sitio web donde una cuadrícula puede tener pocas filas o puede tener muchas.

Cuando hay solo unas pocas filas, se desperdicia mucho espacio en la cuadrícula en el espacio vacío.

Idealmente, me gustaría poder establecer una altura mínima y una altura máxima, y ​​luego tener la gruesa grilla auto-tamaño dentro de ese rango basado en el número de filas.

He realizado una búsqueda y he descubierto que existe una opción para hacer que el tamaño de la cuadrícula sea automático al número de filas, pero aparentemente no es compatible con la búsqueda.

var gridOptions = { autoHeight:true }; 

How to get slickgrid div to resize with size of table

También parece que no se puede establecer una altura máxima; seguirá expandiéndose hasta que se muestre todo.

¿Alguien tiene alguna solución o sugerencia?

Answer 1

Creo que necesita ajustar la altura del DIV circundante en lugar de cambiar el tamaño de la cuadrícula. La altura de SlickGrid se calcula en función de la altura del DIV en el que se inicializa. En teoría, puede modificar la altura de DIV en función de la cantidad de datos que tenga y luego inicializar manualmente la cuadrícula.

Comprobar este enlace para ver un ejemplo sobre inicio explícito de la red: http://mleibman.github.com/SlickGrid/examples/example-explicit-initialization.html

Espero que esto ayude!

Answer 2

Así es como puedo manejar tres diferentes casos de "altura":

1. Altura crece dinámicamente y se ve obligado a algunos maxHeight basado en # de visibles filas
2. Altura crece de forma dinámica y no está restringido (página se desplazará)
3. altura es fija y estática (y puede mostrar espacios en blanco si sólo el 1 fila, por ejemplo)

Básicamente uso autoHeight para el estuche # 2, y para el estuche # 1 (pero solo para el estuche # 1 si el recuento de hileras es menor que el número deseado de hileras visibles). Para el caso n. ° 1 utilizo rowHeight y mi propia invención, maxVisibleRows para decir al desarrollador que "esta tabla crecerá hasta 5 filas antes de que comience a desplazarse, y la altura del área desplazable es igual a la suma de las alturas de 5 filas. " Para el caso n. ° 3, solo se trata de una restricción de altura padre simple, que es el comportamiento predeterminado de SlickGrid.

Código de ejemplo:

var parentContainer = document.getElementById("slick_container"); 
    var uniqueRecordIdField = "id"; 
    var rows = [{id: 1, product: "Bells"}, {id: 2, product: "Whistles"}]; // data (array of rows) 
    var maxVisibleRows = 3; // user can see 3 rows without scrolling 

    var HeightOptions = { Static:0, Auto:1, Max:2 }; // "enum" for illustrative purposes 

    var HeightOption = HeightOptions.Auto; // dev would set this somehow 
    var options = { ... }; // slick grid options object 
    var parentHeight = ""; 
    switch (HeightOption) 
    { 
     case HeightOptions.Static: 

     parentHeight = "400px;" // (hardcoded default/example; probably should allow override) 
     options.autoHeight = false; // do not use slickgrid auto height 
     break; 

     case HeightOptions.Max: 

     // use # of rows to determine whether table should be scrollable 
     if (maxVisibleRows > 0 && rows.length > maxVisibleRows) 
     { 
      var arbitraryHeightPadding = 14; // style hack for viewport 
      // constrain height to only show X rows 
      parentHeight = ((options.rowHeight * maxVisibleRows) + arbitraryHeightPadding) + "px"; 
      options.autoHeight = false; // do not use slickgrid auto height 
     } 
     else 
     { 
      // use slickgrid autoHeight to allow height to shrink/grow 
      parentHeight = ""; 
      options.autoHeight = true; 
     } 
     break; 

     case HeightOptions.Auto: 
     default: 

     parentHeight = ""; // or could use 'inherit' or 'auto' or whatever probably 
     options.autoHeight = true; // use slickgrid auto height to grow indefinitely 
     break; 
    } 

    // set height of slick grid parent (container)  
    parentContainer.style.height = parentHeight; 

    // do normal slick grid rendering stuff... 
    DataView.onRowCountChanged.subscribe(function (e, args) 
    { 
     Grid.updateRowCount(); 
     Grid.render(); 
    });  
    DataView.beginUpdate(); 
    DataView.setItems(rows, uniqueRecordIdField); 
    DataView.endUpdate();