UI Sortable. J'aimerais pouvoir déplacer plusieurs lignes d'un tableau en une seule fois

**clepslunique** · 02/11/2010, 11h05

Bonjour,
Je suis actuellement en train de travailler sur un mini projet. Mon but est de pouvoir deplacer les lignes d'un tableau grâce à l'api sortable de jquery. Ceci ne m'a posé aucun problème mais une complication est survenu. J'ai ajouter une sorte de dépendance à mon programme. C'est à dire que certaines lignes de mon tableau que j'appellerai ligne fille dépendent d'une ligne principale (ligne père). J'aimerai pouvoir faire en sorte que quand je déplace la ligne père, la ou les lignes fille puissent suivre. Je vous transmet mon code que j'ai amplement simplifié :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta name="language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>Essai numero 1 jquery pearl stage</title>
    <meta name="description" content="Essai_numero_1 "/>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.5.custom.min.js"></script>
<script type=text/javascript>
$(document).ready(function() {
    alert("run");
    $(".sort_list").sortable({ 
        connectWith :'.sort_list',
    });
    $(".sub_list").sortable();
    $(".sort_list").disableSelection();
    $(".sub_list").disableSelection();
});
 
</script>
<body>
<table>
<br />
<tbody class="sort_list">
  <tr><td>un</td></tr>
  <tr><td>deux</td></tr>
  <tr><td>trois</td>
    <tbody class="sub_list">
        <tr><td>trois_un</td></tr>
        <tr><td>trois_deux</td></tr>
    </tbody>
  </tr>
</tbody>
<tbody class="sort_list">
  <tr><td>six</td></tr>
  <tr><td>sept</td></tr>
</tbody>
</body>
</head>

Et voici un exemple de ce que je voudrais obtenir (cet exemple utilise des listes avec puces) :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta name="language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>Essai numero 1 jquery pearl stage</title>
	<meta name="description" content="Essai_numero_1 "/>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jquery-ui-1.8.5.custom.min.js"></script>
<script type=text/javascript>
$(document).ready(function() {
	alert("run");
	$("#sort_list").sortable();
	$(".sub_list").sortable();
	$("#sort_list").disableSelection();
	$(".sub_list").disableSelection();
});
 
</script>
<body>
<ul id="sort_list">
  <li>one</li>
  <li>two
    <ul class="sub_list">
    <li>sub one</li>
    <li>sub two</li>
    </ul>
  </li>
  <li>three</li>
  <li>four</li>
</ul>
</body>
</head>

Sa fait une semaine que je cherche et je ne trouve pas. Je commence sérieusement à désespèrer. En vous remerciant d'avance.

**Sayrus** · 03/11/2010, 08h57

Je ne vois pas où est le problème? Les sous lignes sont contenues dans la ligne parente, si tu bouges la ligne parente, les autres doivent suivre normalement? Tu n'as pas un exemple en ligne?

**clepslunique** · 03/11/2010, 13h46

Hélas non je n'ai pas d'exemple en ligne. Et non ça ne marche pas. Je ne saisis pas le problème mais je pense que cela vient du fait que ''sortable'' a été conçu éssentiellement pour les listes et ça ne reconnait pas les balises parents / enfants dans les tableaux ou blocs (div) donc voila je recherche un moyen intermédiaire de résoudre le problème notamment en utilisant la fonction tableDnD http://www.isocra.com/2008/02/table-...jquery-plugin/. Mais ça ne donne rien

**Sayrus** · 03/11/2010, 14h46

Et si tu enlèves tes ".disableSelection();" à la fin de tes sortables?

**clepslunique** · 03/11/2010, 14h57

Nan ça ne fait rien.

**Sayrus** · 03/11/2010, 15h51

Ben c'est bizarre, j'ai repris ton exemple tel quel, ça marche chez moi...

Si je déplace la ligne 2 et que je la met après 3, la ligne 2 se trouve entre la ligne 3 et 4 et les sous lignes y sont aussi...

Ou alors, je n'ai pas dutout compris l'objectif...

UI Sortable. J'aimerais pouvoir déplacer plusieurs lignes d'un tableau en une seule fois

jQuery

Vue hybride

Discussions similaires

Partager

Partager