✔ jQuery UI sortable mit mehreren Tabellen

[Pinky]

Liebe Freunde

in einem neuen Webprojekt möchte ich die Benutzerfreundlichkeit erhöhen und darum auf Funktionen wie z.B. sortable aus dem jQuery UI- Framework zurückgreiffen. Soweit so gut .

Die Benutzer können in einer ersten Instanz Kategorien anlegen und anschliessend Seiten den Kategorien zuweisen. Ich habe eine Überischt (als <table>) über alle Kategorien sowie die jeweils zugeteilten Seiten gemacht:

<table id="sortlist1">
<tr><td colspan="2">Kategorie 1</td><tr>
<tbody>
<tr>
     <td>Unterseite 1</td>
     <td>Unterseite 2</td>
</tr>
</tbody>
</table>

<table id="sortlist2">
<tr><td colspan="2">Kategorie 2</td><tr>
<tbody>
<tr>
     <td>Unterseite 3</td>
     <td>Unterseite 4</td>
</tr>
</tbody>
</table>

Zur Sortierung verwende ich folgenden Code

$( "#sortlist1" ).sortable();
$( "#sortlist2" ).sortable();

Das funktioniert auch wunderbar. Nur wenn jetzt eine dritte Kategorie angelegt wird, müsste ich jedesmal in den jquery Code gehen und den Code um eine #sortlist (hier #sortlist3) erweitern. Gibt es keine Funktion, mit der ich dies umgehen kann? Wenn ich eine For-Schleife generiere, funktionierts leider nicht:

var num = AnzahlKategorien;
for (i=1;1<=num;i++) {
$( "#sortlist" + i ).sortable();
}

Mit dieser Methode ist nur immer der letze Loop gültig, ich brauche aber alle Loops gültig (hier 1 - 3).

Hat da wer grad eine Antwort parat, wie ich den jQuery-Code ebenfalls dynamisch halten kann, jedoch die möglichkeit besteht, dass innerhalb jeder Kategorie, die Reihenfolge angepasst werden kann?

Besten Dank für die Antwort & lieber Gruss
Euer Pinky

 

[Parantatatam]

Ich würde an deiner Stelle eher mit Klassen arbeiten. Also so hier:

<table class="sortable-table">
  <tr>
    <td colspan="2">Kategorie 1</td>
  <tr>
  <tbody>
    <tr>
      <td>Unterseite 1</td>
      <td>Unterseite 2</td>
    </tr>
  </tbody>
</table>
<table class="sortable-table">
  <tr>
    <td colspan="2">Kategorie 2</td>
  <tr>
  <tbody>
    <tr>
      <td>Unterseite 3</td>
      <td>Unterseite 4</td>
    </tr>
  </tbody>
</table>

$('.sortable-table').sortable();

 

[Pinky]

Ich habs so versucht, aber das reicht so nicht, da die Tables ja die selbe Klasse haben. Ich müsste also den Code so schreiben, doch stehe ich anschl. wieder vor dem selben Problem.

<table class="sortable-table1">
  <tr>
    <td colspan="2">Kategorie 1</td>
  <tr>
  <tbody>
    <tr>
      <td>Unterseite 1</td>
      <td>Unterseite 2</td>
    </tr>
  </tbody>
</table>
<table class="sortable-table2">
  <tr>
    <td colspan="2">Kategorie 2</td>
  <tr>
  <tbody>
    <tr>
      <td>Unterseite 3</td>
      <td>Unterseite 4</td>
    </tr>
  </tbody>
</table>

 

[Parantatatam]

Was heißt denn bei dir, dass es nicht reicht? Sind die Tabellen dann untereinander sortierbar?

Nachtrag: Du kannst auch mal das hier versuchen:

$('.sortable-table').each(function ()
{
  $(this).sortable();
});

 

[Pinky]

Wahrlich etwas dürftig, meine Aussage.

Gerne noch etwas mehr Detail: per While-Schleife gebe ich erst die Kategorien aus und innerhalb dieser While-Schleife eine Tabelle mit allen Unterseiten (ebenfall per While-Schleife), die zu dieser Kategorie gehören. Wenn nun also zwei Kategorien angelegt sind, so werden zwei Tabellen mit den jeweiligen Unterseiten generiert. Nun möchte ich, dass die Unterseiten innerhalb der jeweiligen Kategorie, geordnet werden können. Generell funktionierts; auch deine Tipps funktionieren alle. Doch das Problem leigt darin, dass jQuery irgendwie nicht befreifft, dass es sich um zwei Listen handelt. Erst wenn ich in jQuery die ganze sortable-Function nochmals schreibe, erkennt er die zweite Tabelle als Tabelle. Ansonsten nimmt er nur immer die Werte der ersten Tabelle.

Ist das etwas verständlicher? Noch schwierig, zu formulieren!

 

[Parantatatam]

An welcher Stelle befindet sich denn dein Skriptteil? Und woher bekommt deine Variable AnzahlKategorien ihren Wert? Ich könnte mir vorstellen, dass das Problem darin besteht, dass der komplette HTML-Quelltext zum Zeitpunkt der Ausführung noch nicht geladen wurde und dementsprechend nur das erste Element initialisiert wird.

 

[Pinky]

Die Anzahl würde ich per attr('num') irgendwie beziehen (das ist kein Problem).

Mein jQuery-Script lade ich im Index.php-Headbereich. Wie ist die Reihenfolge? Erst HTML bis unten durch und anschl. die Scripts laden oder HTML bis zum Script, dann Script laden und anschl. den Rest vom HTML-Code?

Wie könnte mein Problem im speziellen gelöst werden, sollte die Aufrufordnung das Problem sein?

Dank & Gruss
Euer Pinky

 

[Parantatatam]

Speziell ist da eigentlich nichts, da du es so löst, wie man so etwas generell mit jQuery löst:

$(document).ready(function ()
{
  $('.sortable-table').sortable();
});

 

[Pinky]

Aaah, jetzt hab ichs geschafft. Jetzt merk ich grad, dass ich mein Problem völlig falsch formuliert hatte. Das Sortieren der Tabellen funktionierte, doch die AJAX-Anfrage war falsch (die IDs wurden falsch gelesen). Die Codes müssen so aussehen:

$x = 1;
for ($i=1;$i<=3;$i++) {
echo '<table class="sortlist-' . $i . '">';
echo '<thead>' . '<tr>' . '<td>' . '<b>Titel' . $i . '</b>' . '</td>' . '</tr>' . '</thead>';
echo '<tbody>';
for ($n=1;$n<=10;$n++) {
echo '<tr id="listItem_' . $x . '">' . '<td>' . 'Entry [' . $n . ']' . '</td>' . '</tr>';
$x++;
}
echo '</tbody>';
echo '</table>';
}

$( '.sortlist-1 tbody, .sortlist-2 tbody' ).sortable({
axis: 'y',
opacity: 0.6,
handle: $('tr'),
update : function () {
var order = $( this ).sortable('serialize');
$('#ajaxInfo').load('path?' + order);
});

Pas Problem lag im var order = $( this ). Ich hatte da immer nochmals $( '.sortlist-1 tbody, .sortlist-2 tbody' ) drinstehen. So hat er mir natürlich nur immer die ersten Werte genommen.

Die $( '.sortlist-1 tbody, .sortlist-2 tbody' ) kann ich nun ja per Schleife generieren...!

Danke für die superschnelle Hilfe.

Euer Pinky