PrimeFaces DataTable: contrôler la largeur des colonnes

Version imprimable

Bonjour,

J'ai une datatable ayant un certain nombre de colonnes avec des contenus plus ou moins long (Et donc plus large que l’écran).

Actuellement les largeurs des colonnes dépendent du contenue de celle-ci hors je voudrais plutôt pouvoir donné moi même les largeurs voulus (notamment due au fait que parfois le titre d'une colonne est ce qu'il y a de plus long et du coup l’icône de tri se superpose avec le texte ...)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <p:dataTable styleClass="datatable" var="organization" value="#{organizationListBean.organizationsList}" style="margin: 5px;" resizableColumns="true" paginator="true" rows="10" rowsPerPageTemplate="10,50,100"> <p:column headerText="Code" sortBy="#{organization.code}" style="width:3000px"> #{organization.code} </p:column> <p:column headerText="Nom" sortBy="#{organization.name}" style="width: 125px;"> #{organization.name} </p:column> [...] </p:dataTable>
et avec le CSS :
Code:

1 2 3 4 5 6 7 8 .datatable td{ white-space: nowrap; } .datatable table { width: auto; }
J'utilise PrimeFaces 3.1.RC1
Donc y a t'il un moyen de fixé la taille de départ d'une colonne, a défaut un moyen de ne pas avoir l’icône de tri qui se superpose avec le titre de la colonne m’irait bien aussi!

01/03/2012, 17h51
N4rc0

Bonjour Lady,

D'après le ShowCase du site de primefaces concernant ton composant, il semblerait que tu ais fait ce qu'il fallait.

La piste à suivre serait donc de regarder du côté de ton navigateur le rendu effectué, en regardant grâce à un outil comme FireBug (Mozilla) ou Dragonfly (Opera), la valeur attribuée à tes colonnes, et si celle-ci est due à un calcul ou à une classe css.

Si les dimensions sont dues à une classe css héritée par un composant primefaces, peut-être pourrais-tu la redéfinir.
29/05/2012, 16h25
Lady

Je repasse sur ce sujet pour le mettre en résolu et pour signaler que la solution que j'ai finalement utiliser est un mélange de css et un petit script javascript à l'initialisation de la page pour donner exactement la taille que je veux au div et colonne composant un p:datatable.
25/06/2012, 11h40
Psycho185

Je voudrais bien voir le code correspondant à sa!
Même problème :)
25/06/2012, 11h50
Lady

Citation:

Envoyé par Psycho185

Je voudrais bien voir le code correspondant à sa!
Même problème :)

Ok j'essaye de te trouver ça. Sachant que ca marche qu'a partir de la 3.2 et que c'est pas 100% parfait

Bon voici le code de la fonction js.

J'ai utiliser une feuille de style css spécial qui contient les différentes classes de largeur de colonne qui s'appelle init-sizable-column-style.css.
Les tables à redimensionner doivent avoir la classe 'init-sizable-table'
Il suffis ensuite d'associer une des classes de init-sizable-column-style.css pour chaque colonne à initialiser.
Tu n'est pas obligé d'associer une classe de taille à chaque colonnes. Celles sans classe prendront la taille qui reste en largeur / nombre de cellules sans classes.

Le concept c'est de simuler l'envoi d'un resize manuel qui est envoyé en ajax au serveur (et stocké je ne sais où pour conserver les largeurs de colonnes d'une page à l'autre)

Je sais pas si c'est le mieux ou le plus optimale mais ça peut peut au moins te donner une piste.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
function inittable(){
 
    /* GET THE STYLE SHEET */
    var styleSheet;
    for(var i = 0 ; i < document.styleSheets.length; i++) {
        if(document.styleSheets[i].href.indexOf('init-sizable-column-style') != -1) {
            styleSheet = document.styleSheets[i];
            break;
        }
    }
    var cssRulesTable;
    if(navigator.appName=='Microsoft Internet Explorer') {
        cssRulesTable = styleSheet.rules;
    } else {
        cssRulesTable = styleSheet.cssRules;
    }
    /* CREATE A RULES HASH MAP AS [CSS_CLASS_NAME : WIDTH_PROPERTY_VALUE]*/
    var rules = new Object();
    for(i = 0 ; i < cssRulesTable.length; i++) {
        if(navigator.appName=='Microsoft Internet Explorer') {
            rules[cssRulesTable[i].selectorText] = cssRulesTable[i].style.getAttribute("width");
        } else {
            rules[cssRulesTable[i].selectorText] = cssRulesTable[i].style.getPropertyValue("width");
        }
    }
 
    $('.init-sizable-table').each(function(index) {
        var columnWidths = [];
        var headercells = $(this).find('thead:first th div.ui-dt-c');
        var bodycells=$(this).find("td");
        var totalwidth = $(this).width(); 
 
 
        /* First loop associate each column with it's defined width + do sums for calculation */
        var percentSum = 0;
        var pxSum = 0;
        var notClassedCount = 0;
        var paddingRightSum = 0;
        var paddingLeftSum = 0;
        var borderWidthSum =  0;
        for(var b = 0; b < headercells.length; b++){          
            paddingRightSum += parseInt(headercells.eq(b).css("paddingRight"));
            paddingLeftSum += parseInt(headercells.eq(b).css("paddingLeft"));
            borderWidthSum +=  parseInt(headercells.eq(b).parent().css("borderRightWidth"));   
            columnWidths[b] = "";
            var cellClasses = headercells.eq(b).parent().attr('class').split(" ");
            var classed = false;
            for(i = 0 ; i < cellClasses.length; i++) {
                if(rules[cellClasses[i]]) {
                    columnWidths[b] = rules[cellClasses[i]];
                    if(rules[cellClasses[i]].indexOf("%") != -1) {
                        percentSum += parseInt(rules[cellClasses[i]].replace("%",""));
                    } else if (rules[cellClasses[i]].indexOf("px") != -1) {
                        pxSum += parseInt(rules[cellClasses[i]].replace("px",""));
                    }
                    classed = true;
                    break;
                }
            }
            if(!classed) notClassedCount++;
        }
 
 
 
        /* calculate percent value for not classed and the px value of a percent*/ 
        var notClassedPercent =  100 / notClassedCount ;
        var percentInPixels = (totalwidth - pxSum  - (paddingRightSum + paddingLeftSum + borderWidthSum + 5)) / (percentSum + (notClassedPercent *  notClassedCount));
 
        // calculate width in pixel for each column and set the headers.
        for(b = 0; b < headercells.length; b++){
 
            if(columnWidths[b].indexOf("px") != -1) {
                columnWidths[b] = Math.round(parseInt(columnWidths[b].replace("px","")));
            } else if (columnWidths[b].indexOf("%") != -1) {
                columnWidths[b] = Math.round(parseInt(columnWidths[b].replace("%","")) * percentInPixels);
            } else {
                columnWidths[b] = Math.round(notClassedPercent * percentInPixels);
            }     
            headercells.eq(b).width(columnWidths[b]);
            headercells.eq(b).parent().width('');
 
        var k = headercells.eq(b).parent();
        var n = columnWidths[b];
        var request={source:this.id,process:this.id,params:[{name:this.id+"_updateBody",value:true}
                        ,{name:this.id+"_colResize",value:true}
                        ,{name:this.id+"_columnId",value:k.attr("id")}
                        ,{name:this.id+"_width",value:n}
                        ,{name:this.id+"_height",value:k.height()}
                        ]};                   
         PrimeFaces.ab(request);
        }
        for(b = 0; b<bodycells.length; b++) {
            var a = bodycells.eq(b);
            a.width('').children("div.ui-dt-c").width(columnWidths[a.index()]);
        }
 
    }); 
};
 
window.onload = inittable;

dans le fichier css j'ai fait des classes du style :

Code:

1
2
3
4
5
6
7
8
 
init-sizable-five-percent {
    width: 5%;
}
 
init-sizable-ten-percent {
    width: 10%;
}

Mais comme tu vois mon code gère du '%' ou du 'px'.