4 pièce(s) jointe(s)
Application d'un filtre orderBy
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".
Pièce jointe 221085
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 :
Pièce jointe 221080
Voici mon code Html du tableau :
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
| <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:
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
Pièce jointe 221086
Objets internes déployés
Pièce jointe 221081
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
