web-dev-qa-db-fra.com

Colonnes de table redimensionnables avec jQuery

This est le seul plug-in jQuery que j'ai pu trouver pour redimensionner les largeurs des colonnes d'un tableau, mais il ne s'intègre pas bien à mon tableau et présente une surcharge inutile (sauvegarde dans les cookies). Existe-t-il d'autres plugins pour redimensionner les colonnes? (PAS les plugins datagrid, veuillez ne pas suggérer ceux-ci).

Sinon, j'écrirai moi-même, cela ne devrait pas être trop difficile, je ne sais tout simplement pas comment détecter le moment où un utilisateur clique sur la bordure td (pour redimensionner). Des idées?

jqueryhtmlhtml-tableresize
47
user686605

J'ai donc commencé à écrire ma propre fonctionnalité pour le moment, je vais y travailler la semaine prochaine ... http://jsfiddle.net/ydTCZ/

55
user686605

:-) Une fois que je me suis retrouvé dans la même situation, il n’existait aucun plugin jQuery correspondant à mes besoins, je passe donc quelque temps à développer le mien: colResizable

À propos de colResizable

colResizable est un plugin gratuit jQuery permettant de redimensionner les colonnes d'un tableau en les faisant glisser manuellement. Il est compatible avec la souris et les appareils tactiles et possède certaines fonctionnalités intéressantes, telles que la persistance de la présentation après l'actualisation ou la publication de la page. Il fonctionne avec les dispositions de table à la fois en pourcentage et en pixels.

Sa taille est infime (colResizable 1.0 ne représente que 2 Ko) et il est entièrement compatible avec tous les principaux navigateurs (IE7 +, Firefox, Chrome et Opera).

enter image description here

Traits

colResizable a été développé car aucun autre plugin similaire avec les fonctionnalités énumérées ci-dessous n'a été trouvé:

  • Compatible avec les appareils souris et tactiles (PC, tablettes et téléphones mobiles)
  • Compatibilité avec les dispositions de table en pourcentage et en pixels
  • Redimensionnement de la colonne ne modifiant pas la largeur totale du tableau (facultatif)
  • Aucune ressource externe nécessaire (telle que des images ou des feuilles de style)
  • Persistance de la présentation facultative après l'actualisation ou la publication de la page
  • Personnalisation des ancres de colonne
  • Petite empreinte
  • Compatibilité inter-navigateurs (IE7 +, Chrome, Safari, Firefox)
  • Événements

Comparaison avec d'autres plugins

colResizable est le plugin le plus abouti pour redimensionner les colonnes de table. Il offre de nombreuses possibilités de personnalisation et est également compatible avec les appareils tactiles. Mais probablement, la fonctionnalité la plus intéressante qui rend colResizable le meilleur choix est sa compatibilité avec les dispositions de table de pourcentage à base de pixels et de table de pourcentage fluide. Mais qu'est-ce que ça veut dire?

Si la largeur d'un tableau est définie sur, disons 90%, et que les largeurs de colonne sont modifiées à l'aide de colResizable, lorsque le navigateur est redimensionné, les largeurs des colonnes sont redimensionnées proportionnellement. Tandis que d'autres plugins se comportent de manière étrange, colResizable fait son travail exactement comme prévu.

colResizable est également compatible avec l'attribut table max-width: si la somme de toutes les colonnes dépasse la largeur max de la table, elles sont automatiquement corrigées et mises à jour.

Un autre grand avantage par rapport aux autres plugins est sa compatibilité avec l'actualisation de page, les publications et même les publications partielles si la table est située à l'intérieur d'un updatePanel. Il est compatible avec tous les principaux navigateurs (IE7 +, Firefox, Chrome et Opera), tandis que les autres plugins échouent avec les anciennes IE.

Voir samples et JSFiddle .

Échantillon de code

$("#sample").colResizable({
        liveDrag:true
});
108
Alvaro Prieto

Voici un court exemple complet en HTML. Voir la démo http://jsfiddle.net/CU585/

<!DOCTYPE html><html><head><title>resizable columns</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<style>
th {border: 1px solid black;}
table{border-collapse: collapse;}
.ui-icon, .ui-widget-content .ui-icon {background-image: none;}
</style>
<body>
<table>
<tr><th>head 1</th><th>head 2</th></tr><tr><td>a1</td><td>b1</td></tr></table><script>
$( "th" ).resizable();
</script></body></html>
6
mikeyreilly

try flexigrid , voici ne autre référence

6
diEcho

Ou essayez ma solution: http://robau.wordpress.com/2011/08/16/unobtrusive-table-column-resize-with-jquery-as-plugin/ :)

2
RobAu

Bien que très tard, espérons que cela aide toujours quelqu'un:

Beaucoup de commentaires ici et dans d'autres articles sont préoccupés par la définition de la taille initiale.

J'ai utilisé jqueryUi.Resizable . Les largeurs initiales doivent être définies dans chaque balise "<td>" à la première ligne (<TR>). Cela ne correspond pas à ce que recommande colResizable; colResizable interdit de définir les largeurs à la première ligne, il fallait donc définir les largeurs dans la balise "<col>" qui n'était pas consikstent avec jqueryresizable.

l'extrait suivant est très net et plus facile à lire que les échantillons habituels:

$("#Content td").resizable({
    handles: "e, s",
    resize: function (event, ui) {
        var sizerID = "#" + $(event.target).attr("id");
        $(sizerID).width(ui.size.width);
    }
});

Le contenu est l'identifiant de ma table. Les poignées (e, s) définissent dans quelles directions le plugin peut changer la taille. Vous devez avoir un lien vers les fichiers css de jquery-ui, sinon cela ne fonctionnera pas.

2
Alireza Ahmadi Rad

J'ai essayé d'ajouter au travail de @ user686605:

1) a changé le curseur pour le redimensionner en col sur la bordure

2) correction du problème de texte surligné lors du redimensionnement

J'ai partiellement réussi aux deux. Peut-être que quelqu'un qui est meilleur en CSS peut aider à aller de l'avant?

http://jsfiddle.net/telefonica/L2f7F/4/

[~ # ~] html [~ # ~] 

<!--Click on th and drag...-->
<table>
    <thead>
        <tr>
            <th><div class="noCrsr">th 1</div></th>
            <th><div class="noCrsr">th 2</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>td 1</td>
            <td>td 2</td>
        </tr>
    </tbody>
</table>

[~ # ~] js [~ # ~] 

$(function() {
    var pressed = false;
    var start = undefined;
    var startX, startWidth;

    $("table th").mousedown(function(e) {
        start = $(this);
        pressed = true;
        startX = e.pageX;
        startWidth = $(this).width();
        $(start).addClass("resizing");
        $(start).addClass("noSelect");
    });

    $(document).mousemove(function(e) {
        if(pressed) {
            $(start).width(startWidth+(e.pageX-startX));
        }
    });

    $(document).mouseup(function() {
        if(pressed) {
            $(start).removeClass("resizing");
            $(start).removeClass("noSelect");
            pressed = false;
        }
    });
});

[~ # ~] css [~ # ~] 

table {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
}

table td {
    border-width: 1px;
    border-style: solid;
    border-color: black;
}

table th {
    border: 1px;
    border-style: solid;
    border-color: black;
    background-color: green;
    cursor: col-resize;
}

table th.resizing {
    cursor: col-resize;
}

.noCrsr {
    cursor: default;
    margin-right: +5px;
}

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
1
Adam

J'ai fait mon propre widget jquery ui, en me demandant si c'est suffisant.

https://github.com/OnekO/colresizable

0
OnekO