E 'possibile rendere un controllo scorrevole della griglia ridimensionare automaticamente la sua altezza tra un intervallo minimo e massimo per adattarsi al numero di righe?

Question

Sto creando un sito Web in cui una griglia potrebbe avere poche righe o potrebbe avere molte.

Quando ci sono solo poche righe viene sprecato molto spazio nella griglia nello spazio vuoto.

Idealmente mi piacerebbe essere in grado di impostare un'altezza minima e un'altezza massima e quindi fare in modo che la griglia slick si riduca automaticamente all'interno dell'intervallo in base al numero di righe.

Ho avuto una ricerca in giro e ho scoperto che esiste un'opzione per rendere la dimensione automatica della griglia al numero di righe, ma apparentemente non è compatibile con il paging.

var gridOptions = { autoHeight:true }; 

How to get slickgrid div to resize with size of table

Sembra, inoltre, non è possibile impostare un'altezza massima; continuerà ad espandersi finché non verrà visualizzato tutto.

Qualcuno ha qualche soluzione o suggerimento?

Answer 1

Penso che sia necessario regolare l'altezza del DIV circostante anziché ridimensionare la griglia. L'altezza di SlickGrid viene calcolata in base all'altezza del DIV su cui è stato inizializzato. In teoria, potresti modificare l'altezza di DIV in base alla quantità di dati che hai e quindi inizializzare manualmente la griglia.

controllare questo link per un esempio di init esplicita della griglia: http://mleibman.github.com/SlickGrid/examples/example-explicit-initialization.html

Spero che questo aiuti!

Answer 2

Ecco come mi occupo tre diverse casi "height":

1. altezza cresce in modo dinamico ed è costretto a qualche maxHeight sulla base # di visibili righe
2. altezza cresce in modo dinamico e non è vincolato (Pagina scorrerà)
3. altezza è fisso e statico (e può mostrare spazi bianchi se solo 1 fila, per esempio)

Fondamentalmente uso autoHeight per il caso n. 2 e per il caso n. 1 (ma solo per il caso n. 1 se il numero di righe è inferiore al numero desiderato di righe visibili). Per il caso n. 1 uso rowHeight e la mia invenzione, maxVisibleRows per far dire allo sviluppatore "questa tabella crescerà fino a 5 righe prima che inizi a scorrere e l'altezza dell'area scorrevole sia uguale alla somma delle altezze di 5 righe. " Per il caso n. 3 è solo un semplice vincolo di altezza genitore, che è il comportamento predefinito di SlickGrid.

codice di esempio:

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();