La larghezza della colonna Slickgrid dovrebbe essere automaticamente ridimensionata in base al contenuto di riga più largo

In Slickgrid esiste un modo in cui la larghezza della colonna viene automaticamente ridimensionata in base al contenuto di riga più largo?

Nell’esempio di esempio posso vedere il valore della colonna come hard coded per il campo della colonna http://mleibman.github.com/SlickGrid/examples/example2-formatters.html

var columns = [ {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter}, {id: "duration", name: "Duration", field: "duration"}, {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar}, {id: "start", name: "Start", field: "start", minWidth: 60}, {id: "finish", name: "Finish", field: "finish", minWidth: 60}, {id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark} ]; 

Sì, per aggiungere a quello. Elimina l’intero punto della virtualizzazione delle righe. Ma se il tuo set di dati è piccolo, puoi calcolarlo in anticipo. Ecco una funzione che ho usato per calcolare la larghezza di un testo.

  String.prototype.textWidth = function(font) { var f = font || '12px Helvetica,​Arial,​sans-serif', o = $('
' + this + '
') .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f}) .appendTo($('body')), w = o.width(); o.remove(); return w; }

Quello che ho fatto è stato calcolare il textWidth () dell’intestazione. “Nome” valore. Quindi, almeno la colonna è la larghezza del testo dell’intestazione. Cosa puoi fare senza preoccuparti della virtualizzazione. Fx …

 columns.push({ id: "col1", name: "Column 1", field: "col1", width: "Column 1".textWidth() + }); 

O se vuoi veramente scansionare l’intero array di dati chiamando la funzione rispetto a ciascun valore di dati nella colonna / campo e poi mantieni il valore massimo. Ma questo è molto inefficiente.

Puoi usare l’opzione forceFitColumns , che ridimensionerà ogni colonna per adattarla, anche se la tua larghezza non è sufficientemente ampia cercherà di adattarla in base ai valori minimi e massimi di larghezza, quindi potresti voler aggiungere una minWidth e una maxWidth hai un po ‘più di controllo.

Ad esempio la definizione delle colonne potrebbe essere simile a questa:

 {id: "duration", name: "Duration", field: "duration", minWidth:50, width:100, maxWidth:120} 

e la definizione di opzioni come questa:

 options = { enableCellNavigation: true, enableColumnReorder: false, multiColumnSort: true, asyncEditorLoading: true, forceFitColumns: true // this one is important }; 

Sì, crescere per adattarsi ai contenuti può essere fatto, ma devi farlo da solo. forceFitColumns chiudono, ma aumentano fino a riempire il viewport senza preoccuparsi dei contenuti della cella.

@ L’idea di Tim è giusta, anche se non mi spingerei fino a dire che toglie la virtualizzazione del punto di fila. Poiché SlickGrid ti dà un accesso gradevole alla vista grid.getViewport().top // bottom puoi calcolare con grande successo la dimensione del solo contenuto nella tua vista.

Descrivo come qui in risposta a questa domanda simile: https://stackoverflow.com/a/22231459