Discussion :

[stomerfull]

Bonjour à tous ,

J'ai un tableau de liste avec un checkbox sur chaque ligne
Le but est de faire un UP ou DOWN (bouton sur l'entête du tableau)pour les lignes qui sont cochés

Mon problème c'est que si je coche deux lignes et je fais UP les 2 lignes cochées montent bien après la precedente ligne

Par contre si je sélectionne 2 lignes et je fais DOWN là ça ne bouge pas , le insertAfter ne se comporte pas comme insertBefore


Voici le code

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
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<button id="up">Up</button><button id="down">Down</button>
<table id="rowclick" class="table table-striped table-bordered table-hover flip-content">
   <thead class="flip-header">
      <tr>
         <th colspan="2">
            Rank												
         </th>
         <th>
            ID												
         </th>
         <th>
            Product 											
         </th>
         <th>&nbsp;</th>
      </tr>
   </thead>
   <tbody>
      <tr class="odd gradeX parent parent-hide" id="item-2119">
         <td>
            16														
         </td>
         <td>
            2119														
         </td>
         <td>
           test														
         </td>
         <td class="center">
         <input type="checkbox">
         </td>
      </tr>
      <tr class="odd gradeX parent parent-hide" id="item-2120">
         <td>
            17														
         </td>
         <td>
            2120														
         </td>
         <td>
           test1													
         </td>
         <td class="center">
         <input type="checkbox">
         </td>
      </tr>
      <tr class="odd gradeX parent parent-hide" id="item-2121">
         <td>
            18														
         </td>
         <td>
            2121														
         </td>
         <td>
           Test2														
         </td>
         <td class="center">
         <input type="checkbox">
         </td>
      </tr>
      <tr class="odd gradeX parent parent-hide" id="item-2122">
         <td>
            19														
         </td>
         <td>
            2122														
         </td>
         <td>
            Test 3														
         </td>
         <td class="center">
         <input type="checkbox">
         </td>
      </tr>
      <tr class="odd gradeX parent parent-hide" id="item-2123">
         <td>
            20														
         </td>
         <td>
            2123														
         </td>
         <td>
           test4														
         </td>
         <td class="center">
         <input type="checkbox">
         </td>
      </tr>
      <tr class="odd gradeX parent parent-hide" id="item-2464">
         <td>
            99999														
         </td>
         <td>
            2464														
         </td>
         <td>
            test 5														
         </td>
         <td class="center">
         </td>
      </tr>
 
   </tbody>
</table>
 
 
 
<script type="text/javascript">
    $(document).ready(function(){
        $("#up").click(function(event){
                event.preventDefault();
                $("#rowclick").find("input:checkbox:checked").each(function(){
                        var check_index = $(this).closest('tr').index();
                        //alert(check_index);
                        //var check = $(this).closest('tr');
                        var current = $(this).closest('tr')
                            var previous = current.prev('tr');
                            if(previous.length !== 0){
                                current.insertBefore(previous);
                                }
                });
        });
 
        $("#down").click(function(event){
                event.preventDefault();
                $("#rowclick").find("input:checkbox:checked").each(function(){
                        var check_index = $(this).closest('tr').index();
                        //alert(check_index);
                        //var check = $(this).closest('tr');
                        var current1 = $(this).closest('tr')
                                var next = current1.next('tr');
                                if(next.length !== 0){
                                        alert("OK");
                                    current1.insertAfter(next);
                                }else{
                                        alert("KO");
                                }
                });
        });
 
    });
 
</script>

j'ai mis un alert('OK'); et ça rentre bien dedans sauf que le insertAfter ne comporte/marche pas comme insertBefore si on selection plusieurs lignes

Merci pour votre aide

[SpaceFrog]

as tu essayé After() ?

[stomerfull]

Oui j'ai essayé avec after() mais ça ne marche pas.

insertAfter() fonctionne seulement pour une seule ligne séléctionnée mais si je selectionne plusieurs lignes ça ne marche pas

[stomerfull]

la solution est d'inverser l'ordre de récupération des lignes quand on fait DOWN et ça marche

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
 
$('#down').on('click',function(e){
    		e.preventDefault();
    		$($('#rowclick').find('tr').get().reverse()).each(function(){
 
    			if($(this).find('input[type=checkbox]').is(':checked')){
    				var current1 = $(this).closest('tr')
					var next = current1.next('tr');
					if(next.length !== 0){
				    	current1.insertAfter(next);
					}
    			}
 
    		});
 
    	});

merci