Discussion :

[francky74]

Bonjour,

Je suis en train de créer un filtre pour ordonner les colonnes d'un tableau (5 colonnes). Ce filtre s'actionne lors d'un clic dans une case du header.

Mon problème est que, lorsque je clique donc sur une case du header, il n'y a que 3 colonnes sur les 5 qui sont mises dans l'ordre ...
Ce que je veux, c'est que la ligne entière soit indivisible, que toutes les cases d'une ligne restent sur la même ligne après avoir été ordonnées puisqu'elles appartiennent à un objet.

Pour expliquer plus avant, mon tableau affiche des "produits conditionnés". Un produit conditionné est composé d'un produit et d'un conditionnement.
Par exemple le produit : "samoussa", lié avec le conditionnement : "lot de 10" nous donne un produit conditionné "samoussas lot de 10".



Et lorsque je clique pour mettre dans l'ordre selon la désignation du produit, ce sont les colonnes de conditionnement qui sont ordonnées ... mais les produits restent dans le même ordre comme vous pouvez le voir sur la copie d'écran ci-dessous :




Voici mon code Html du tableau :

Code html :

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
<table id="tableProduitsConditionnes" class="table table-striped">
	<thead>
		<tr>
			<th ng-click="sortData('pc.produit.designation')">
				Produit
				<div ng-class="getSortClass('pc.produit.designation')"></div>
			</th>
			<th ng-click="sortData('pc.produit.prix')">
				Prix produit
				<div ng-class="getSortClass('pc.produit.prix')"></div>
			</th>
			<th>Conditionnement</th>
			<th>Prix total</th>
			<th>en carte ?</th>
		</tr>
	</thead>
	<tbody>
		<tr ng-repeat="pc in produitsConditionnes | orderBy:sortColumn:reverseSort">
			<td style="display:none;" ng-model="idProduitConditionne">{{pc.idProduitConditionne}}</td>
			<td>{{pc.produit.designation}}</td>						
			<td>{{pc.produit.prix}}</td>			
			<td>{{pc.conditionnement.designation}}</td>				
			<td>{{pc.prixProdCond}}</td>				
			<td>{{pc.enCarte}}</td>		
			<td>
				<button class="btn btn-default"
					ng-click="modifier_produit_conditionne(produitConditionne.idProduitConditionne)">Modifier</button>
				<button class="btn btn-danger"
					ng-click="supprimer_produit_conditionne(produitConditionne.idProduitConditionne)">Supprimer</button>
			</td>						
		</tr>
	</tbody>
</table>

Voici le javascript :

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
	//gestion des orderBy
	$scope.reverseSort = false;
	$scope.sortColumn = "pc.produit.designation";
 
	$scope.sortData = function(column) {
			$scope.reverseSort = ($scope.sortColumn == column)? !$scope.reverseSort : false;
			$scope.sortColumn = column;
	}
 
	$scope.getSortClass = function(column) {
		if($scope.sortColumn == column) {
			return $scope.reverseSort ? 'arrow-down' : 'arrow-up';
		}
		return '';
	}

Comment puis-je faire pour que les lignes soient ordonnées toutes ?

Autre problème : je voudrais bien voir le code json qui est envoyé par mon serveur mais avec firefox il l'affiche sous forme d'objet ... comment faire pour voir le json s'il vous plaît ?

Voici 2 copies d'écran du json envoyé par le serveur (une copie avec les objets internes non déployés, et une autre copie avec les objets internes déployés) :
Objets internes non déployés


Objets internes déployés


Merci,

PS : j'ai essayé de faire un codePen mais je n'arrive pas à le faire fonctionner à cause du json ... http://codepen.io/francky74/pen/gwmvdo

[francky74]

Bonjour,

Bon, déjà, mon problème est ridicule puisque les données sont symétriques et donc on ne voit pas les deux premières colonnes changer d'ordre ...
Mais j'ai quand même fait une modification au cas où ...

J'ai créé un bean dans lequel je met en attribut les colonnes du tableau.
Dans l'action (côté serveur) je créé ces beans que je mets dans une liste ... puis j'affiche la liste qui ne contient plus un seul objet ...