Colonne di tabella ridimensionabili

Question

Sto sviluppando un'app Web e sto cercando un modo per creare i miei propri datagrids.

So che ci sono molti script fantastici là fuori con tutti i campanelli e fischietti, ma ho bisogno della mia specifica funzionalità, dello stile css e della possibilità di usare i miei controlli dell'interfaccia utente.

In realtà, l'unica cosa di cui ho bisogno è la possibilità di ridimensionare le colonne. Non mi interessa davvero se il markup non mantiene la struttura delle righe o non è semantico, perché tutti i dati saranno popolati da richieste Ajax.

Stavo pensando che una possibile soluzione sarebbe quella di rendere ogni colonna div.

Esiste un tutorial là fuori che può aiutarmi?

Answer 1

Non proprio un tutorial, ma un esempio ossa davvero a nudo si poteva lavorare da: http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery/

Answer 2

vi consiglio di usare jQuery UI Resizable con alcuni miglioramenti. Il plugin si concentra solo sul ridimensionamento e consente la piena personalizzazione in quanto è possibile aggiungere le proprie funzioni di callback in qualsiasi evento. Per impostazione predefinita, tuttavia, il plug-in non è in grado di reizistare le intestazioni della tabella, ma è possibile eseguirlo con HTML valido, aggiornando l'area COLGROUP della tabella su ridimensionamento.

L'idea concreta sarebbe:

1. La tabella HTML specifica la larghezza iniziale nella sua area COLGROUP e ha CSS proprietà table-layout: fixed.
2. Decorare elementi TH con jQuery UI .resizable().
3. All'inizio del ridimensionamento: trova l'elemento COL corrispondente al TH attivo e ricorda la larghezza originale.
4. Ridimensionamento: calcola il delta di ridimensionamento e aggiorna (aumenta/diminuisce) l'elemento COL selezionato. Questo ridimensiona l'intera colonna con ogni browser.

Plugin init:

$(".resizable th").resizable({ 
handles: "e", 

// set correct COL element and original size 
start: function(event, ui) { 
    var colIndex = ui.helper.index() + 1; 
    colElement = table.find("colgroup > col:nth-child(" + 
    colIndex + ")"); 

    // get col width (faster than .width() on IE) 
    colWidth = parseInt(colElement.get(0).style.width, 10); 
    originalSize = ui.size.width; 
}, 

// set COL width 
resize: function(event, ui) { 
    var resizeDelta = ui.size.width - originalSize; 

    var newColWidth = colWidth + resizeDelta; 
    colElement.width(newColWidth); 

    // height must be set in order to prevent IE9 to set wrong height 
    $(this).css("height", "auto"); 
} 
}); 

ho descritto la soluzione completa tra cui JavaScript, markup HTML, CSS cross-browser e Live-Demo in http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/