Discussion :

[nicolas_icy]

Bonjour à tous,
Je suis actuellement en stage et me trouve confronté à un problème très spécifique ; je vais tenter d'expliquer le plus clairement possible de quoi il est question.

Je dois adapter le portail de l'entreprise pour une consultation mobile. Ce portail contient de nombreux catalogues, qui sont de très grands tableaux pour la quasi totalité. Ce que je veux pouvoir réaliser, est que lors du clic sur une ligne du tableau, l'affichage d'une box contenant toutes les informations de la ligne associés aux bon titres :



Ce que j'arrive à faire dans un premier temps. Mais le problème survient lorsque j'ai des sous colonnes ; notons que le tableau est généré avec ASP.NET dans lequel j'ai peu de connaissances. Lors du parcours du tableau, les titres des sous colonnes sont situés "après" celles de la première ligne ; il faut avoir parcouru toute la première ligne du header avant d'accéder à la seconde.



En noir : indice
Vert : id du header
Rouge : classe du conteneur de la deuxième ligne
Bleu : Classe de toutes les cases contenu dans le header



Ce qui m'empêche au final, lors du parcours de la grille, de faire titre[i] et contenu[i], puisque les indices des titres des sous colonnes sont décalés.
J'ai tenté plusieurs techniques, et celle actuelle me permet de récupérer le Bandwith et Métro/National comme vous pouvez le voir, cependant la case d'après ne correspond pas au bon titre.

Voilà le code que j'ai en ce moment :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$(".Grid").find("tr").click(function () {
                    //Declarations
                    var gridSize = $(this).find("td").size();
                    var firstHeaderRowSize = $(".caseHeader").size() - $(".secondHeaderRow .caseHeader").size() - 1;
                    var title, titleSubCol, nbSousCol, nbColTraiter, tmp;
                    var tabContent = new Array(); //Tableau qui stocke données pdt exploration grille
 
                    tmp = 0;
                    nbColTraiter = 0;
 
                    initDialogInfo();
                    $("#dialog").empty(); //Clear the box
 
                    for (i = 0; i < gridSize; i++) {
                        //Titre à l'index actuel
                        title = $(".caseHeader")[i];
                        nbSousCol = parseInt($(title).attr("colspan")); //Nombre de lignes fusionnées
 
                        //Contenu de la cellulle à l'index actuel
                        contenu = $(this).find("td")[i].innerHTML;
 
                        //Si lignes fusionnées : sous-colonnes présentes
                        if (nbSousCol > 1) { nbColTraiter = nbSousCol; }
 
                        if (nbColTraiter > 0) {
//Si il reste des colonnes à traiter mais la case à l'index i ne contient pas de sous colonnes
                            if ((nbSousCol == 1) && (i + nbColTraiter) < gridSize) {
                            title = $(".caseHeader")[i];
                            tabContent[i + nbColTraiter] = new boxRowContent(title.innerText, $(this).find("td")[i + nbColTraiter].innerHTML, classRow(i+nbColTraiter));
                            }
 
                            if (tabContent[i] != undefined) {
                                continue;
                            }
 
                            title = $(".secondHeaderRow .caseHeader")[tmp];
                            tabContent[i] = new boxRowContent(title.innerText, contenu, classRow(i));
                            nbColTraiter--;
                            tmp++;
 
                        }
                        else {
                            if (title != undefined && contenu != undefined)
                                tabContent[i] = new boxRowContent(title.innerText, contenu, classRow(i));
                        }
                    }

J'ai un tableau tabContent comprenant des objets boxRowContent : titre, contenu et classe de la ligne (pour du css). Ce tableau tabContent va enregistrer tout au long du parcours des associations entre les titres et leur contenu.
Je récupère le colspan : si celui-ci est supérieur à un, il y a plusieurs sous colonnes. Je stocke ce nombre de sous colonnes à traiter dans une variable, que je vais décrémenter au fur et à mesure.

Et là ça se complique. Car, comme le parcours dans le header se fait sur la première ligne d'abord, le colspan pourra être supérieur à 1 plusieurs fois d'affilées, et donc remplacer à chaque fois le nombre de colonnes à traiter.
Donc parfois, quand les cases du header n'ont pas de sous colonnes, il reste des sous colonnes à traiter et ne tient donc pas compte du titre de la case à l'index i actuel.

J'ai également fais un indice tmp qui permet de parcourir la seconde ligne du header à partir de 0 (dans ce cas, le titre "Bandwidth" récupéré depuis $(".secondHeaderRow .caseHeader") sera à l'indice 0).

L'idée de ce code est de récupérer et stocker le titre de la première ligne, même si il y a des sous colonnes restantes à traiter, à un indice avancé du tableau. Dans l'idée, c'est beau, dans la pratique... C'est plus complexe.

Voilà mon problème dans les grandes lignes, si vous avez des questions ou ne comprenez certains aspects, n'hésitez pas. Si vous avez la solution, c'est encore mieux

Merci d'avance pour votre lecture et votre aide!