Colonnes de table redimensionnables

Question

Je développe une application web et je cherche un moyen de créer mes propres DataGrid. Je sais qu'il y a beaucoup de scripts fantastiques avec tous les gadgets, mais j'ai besoin de mes propres fonctionnalités, du style css, et de la possibilité d'utiliser mes propres contrôles ui. Vraiment, la seule chose dont j'ai besoin est la possibilité de redimensionner les colonnes. Je ne m'inquiète pas vraiment si le balisage ne maintient pas la structure de rangée ou n'est pas sémantique, parce que toutes les données seront peuplées par des demandes d'ajax.

Je pensais qu'une solution possible serait de faire de chaque colonne un div.

Y at-il un tutoriel qui peut m'aider?

Answer 1

Pas vraiment un tutoriel, mais un exemple des os vraiment nu vous pouvez travailler à partir de: http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery/

Answer 2

Je recommande d'utiliser jQuery UI Resizable avec quelques améliorations. Le plugin se concentre uniquement sur le redimensionnement et permet une personnalisation complète puisque vous pouvez ajouter vos propres fonctions de rappel à tout événement. Par défaut, cependant, le plugin ne peut pas redimensionner les en-têtes de table, mais je pourrais le faire fonctionner avec un code HTML valide, en mettant à jour la zone COLGROUP de la table lors du redimensionnement.

L'idée concrète serait:

1. Le tableau HTML spécifie la largeur initiale dans sa zone COLGROUP et a CSS table-layout de la propriété: fixe.
2. Décorez les éléments TH avec l'interface utilisateur de jQuery .resizable().
3. Lors du démarrage du redimensionnement: Recherchez l'élément COL correspondant au TH actif et souvenez-vous de la largeur de l'original.
4. Lors du redimensionnement: Calculez le delta de redimensionnement et mettez à jour (augmentez/diminuez) l'élément COL sélectionné. Cela va redimensionner la colonne entière avec chaque navigateur.

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"); 
} 
}); 

I décrit la solution complète incluant JavaScript, le balisage HTML, CSS cross-browser et Live-Demo à http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/