Donc, j'essaie d'utiliser le plug-in Flexigrrid. On dirait que cela va bien travailler de côté du fait qu'il semble que vous ayez à définir manuellement les largeurs de colonne. Sinon, les en-têtes de colonne ne correspondent pas aux colonnes du corps.
Y a-t-il un moyen de correspondre automatiquement à ceux-ci, tout en permettant toujours définir les largeurs de colonne par la longueur du contenu dans les colonnes (tout comme le comportement de la table normal).
12 Réponses :
Je travaille à ce sujet aujourd'hui aussi. Ce que je suis arrivé implique d'ajouter un gestionnaire onsuccès et de déterminer la taille maximale de chaque colonne entre l'en-tête et le corps, puis réglez la largeur des deux au maximum pour cette colonne.
grid.flexigrid({
...other setup...
onSuccess: function() {
format();
});
}
});
function format() {
var gridContainer = this.Grid.closest('.flexigrid');
var headers = gridContainer.find('div.hDiv table tr:first th:not(:hidden)');
var drags = gridContainer.find('div.cDrag div');
var offset = 0;
var firstDataRow = this.Grid.find('tr:first td:not(:hidden)');
var columnWidths = new Array( firstDataRow.length );
this.Grid.find( 'tr' ).each( function() {
$(this).find('td:not(:hidden)').each( function(i) {
var colWidth = $(this).outerWidth();
if (!columnWidths[i] || columnWidths[i] < colWidth) {
columnWidths[i] = colWidth;
}
});
});
for (var i = 0; i < columnWidths.length; ++i) {
var bodyWidth = columnWidths[i];
var header = headers.eq(i);
var headerWidth = header.outerWidth();
var realWidth = bodyWidth > headerWidth ? bodyWidth : headerWidth;
firstDataRow.eq(i).css('width',realWidth);
header.css('width',realWidth);
drags.eq(i).css('left', offset + realWidth );
offset += realWidth;
}
}
HMM, j'ai fini par écrire un code extrêmement similaire plus tôt :-p Cependant, je reçois une erreur étrange dans IE. Laissez-moi essayer votre version et voyons comment ça se passe :-)
J'ai eu ceci pour travailler (au moins partiellement). Le problème que j'avais avec ma précédente itération (qui posait également un problème avec la mise en œuvre de Tvanfosson) était qu'une fois que vous avez redimensionné les en-têtes, les barres "Glisser" ne seraient pas alignées sur les nouvelles largeurs de colonne.
Ma mise en œuvre actuelle est Ci-dessous, qui fonctionne dans Firefox 3.5 et Chrome. Malheureusement, il existe une certaine exception dans IE (toutes les versions) qui sont plutôt déconcertantes. Je vais déboguer plus loin lundi:
Je devais aussi réparer quelques gothas dans Flexigrid. Autour de la ligne 1000, il doit vérifier les résultats des appels parseint pour s'assurer qu'ils sont des chiffres (définis sur 0 sinon). Autour de la ligne 960, il doit vérifier si cela a une valeur (définie sur «Auto») avant d'ajouter «PX».
Ouais, c'était la cause de la question IE que j'ai décrite ci-dessus. Une fois que cela a été corrigé, il a commencé à travailler une pêche
Mise à jour mon code pour gérer également les traînées. Notez que mon code trouve maintenant la colonne la plus large de la table et l'utilise comme la largeur par défaut.
J'ai constaté que j'avais besoin d'utiliser ouherwidth () sur IE ou j'avais une erreur d'éteinte de 1Px sur les en-têtes. J'utilise toujours IE7 donc ymmv.
J'ai aussi eu ce problème. Voici mon correctif, et ça marche très bien. Dans Flexigrid.js autour de la ligne 678, changez cette ligne.
$(tdDiv).css({textAlign:pth.align,width: $('div:first',pth).width() + "px"});
merci. Basé sur le poste de ligne 678, le mien a été corrigé avec les éléments suivants: Pour une raison quelconque, la police d'en-tête est plus grande que la police de détail ... J'espère que cela aide.
J'ai couru dans la même chose, découvrant que la largeur de mes divs contenant les en-têtes de colonne et les cellules de la table avaient la largeur = 0. Donc, je devais donc attendre un peu jusqu'à ce que l'ensemble de la table HTML ait été construit, puis je dû exécuter la méthode "format".
La prochaine chose est que j'ai la table HTML construite dans une division invisible au début. Donc, j'ai dû omettre le sélecteur Nous allons ici: L'appel de la méthode comme suit: espère avoir une autre solution pour le problème ;-)
Cordialement, Christoph non (: masqué) dans mon code.
a trouvé cela ailleurs:
le figuré - pour toute personne ayant un problème similaire: je l'avais assigné à un
Tout a fonctionné super!
http://markmail.org/message/kibcuxu3kme2d2e7
1 commentairesJe ne trouve aucune réponse au lien fourni -1
0
votesJe sais que cela viendra aussi étrange à certains, mais j'avais le même problème et une fois que j'ai réarrangé ma mise en page (la page entière, pas la grille elle-même) tout allait bien.
J'ai eu une disposition de fluide à 3 colonnes. J'ai déplacé la grille vers le haut de la page, juste après l'étiquette du corps, et il aligna parfaitement! Wow ...
0 commentaires
1
votesDe votre propre réponse, j'ai ajouté le réglage de la largeur min-largeur de manière à ce que les colonnes ne soient pas pressées différemment si la largeur de flexigres a été réglée trop étroite ou que le flexigrid a redimensionné, testé uniquement en chrome:
. . . // LINE 211 $('th:visible div:eq(' + n + ')', this.hDiv).css('width', nw); // ADD THIS AFTER LINE 211 $('th:visible div:eq(' + n + ')', this.hDiv).parent().css('min-width', nw); $('th:visible div:eq(' + n + ')', this.hDiv).parent().css('width', nw); . . . // LINE 214 $('td:visible div:eq(' + n + ')', this).css('width', nw); // ADD THIS AFTER LINE 214 $('td:visible div:eq(' + n + ')', this).parent().css('width', nw); $('td:visible div:eq(' + n + ')', this).parent().css('min-width', nw);
0 commentaires
9
votesMa solution est beaucoup plus simple que les autres suggérées.
Avant d'appeler la fonction Flexigrrid, ajoutez ceci: p>
$("#yourtable th").each(function() { $(this).attr("width", $(this).width()); });
0 commentaires
1
votesproblème similaire pour moi. Une page avec 3 onglets, chacun avec un Flexigrid. Seul l'un des onglets avaient problème où la cellule d'en-tête était en quelque sorte plus courte que les cellules de données au-dessous de celui-ci. Ce qui threww également hors de l'alignement de toutes les cellules d'en-tête suivant celui-ci.
.. ce que j'ai compris en examinant les éléments fournis en utilisant CTRL + MAJ + J fonctionnalité Chrome et l'inspection à l'intérieur du
... était que le largeur:px partie était même pas là J'y suis retournée et inspectée où je colModel et remarqué la définition pour cette seule colonne ... au lieu de
Largeur:, J'avais tapé par erreur Largeur:, au lieu (capsules de première lettre vs minuscules). Il a été une telle différence subtile mes yeux ne l'attrapant lors de l'examen au départ et comparer / contraste les onglets qui ont travaillé contre celui qui avait la question.
0 commentaires
0
votesCelui-ci a fonctionné pour moi:
onSuccess : function(){ $('#flex1 > tbody').wrap('<table cellpadding="0" cellspacing="0" />'); },
0 commentaires
0
votesCe code fonctionne bien dans mon projet. Il est similaire à d'autres réponses.
$("#my_table").flexigrid({ ... onSuccess: function(){ columnWidth(); $(window).resize(function(){ columnWidth(); }); } }); function columnWidth(){ var num_col = 0; //Work with the columns width of the first row of body $("#row1 td").each(function(td){ //row's column's width greater than header's column's width if($(this).width() > $("th[axis='col"+num_col+"']").width()){ $("th[axis='col"+num_col+"']").width($(this).width()); $("th[axis='col"+num_col+"']").css({"min-width":$(this).width()}); } //header's column's width greater than row's column's width else if($("th[axis='col"+num_col+"']").width() > $(this).width()){ $("td[abbr='"+$(this).prop('abbr')+"']").width($("th[axis='col"+num_col+"']").width()); $("td[abbr='"+$(this).prop('abbr')+"']").css({"min-width":$("th[axis='col"+num_col+"']").width()}); } ++num_col; }); }
0 commentaires