/ / jQuery ui sortierbar, 2 sortierbare Tabellen, eine deaktivieren, wenn andere verwendet werden - jquery, jquery-ui, jquery-ui-sortable

jQuery ui sortierbar, 2 sortierbare Tabellen, eine deaktivieren, wenn andere verwendet wird - jquery, jquery-ui, jquery-ui-sortierbar

Ich habe einen Tisch, der sortierbar ist. In jeder Zeile befindet sich eine Verknüpfung, die dynamisch eine andere sortierbare Tabelle lädt (erweitert die Zeile). Das Problem, das ich habe, ist, dass Sie die gesamte dynamisch sortierte Tabelle immer noch sortieren können, wenn Sie nicht in den richtigen Bereich klicken, da sie sich noch in der sortierbaren Zeile der übergeordneten Tabelle befindet. Was ich tun möchte, ist die Sortierung für die übergeordnete Tabelle zu deaktivieren, wenn die neue Tabelle geladen wird.

Also das:

<table class="sortable">
<tr><td><a class="load" href="#">load content</a></td></tr>
<tr><td><a class="load" href="#">load content</a></td></tr>
</table>

verwandelt sich in dieses:

<table class="sortable">
<tr><td>
<table class="sortable_subtable">
<tr><td>loaded content row 1</td><tr>
<tr><td>loaded content row 2</td><tr>
</table>
</td></tr>
<tr><td><a class="load" href="#">load content</a></td></tr>
</table>

Ich habe es versucht $(".sortable").sortable("disable"); auf das click -Ereignis, das die sortable_subtable lädt, aber es beendet nur die gesamte sortierbare Benutzeroberfläche

Hinweis: Ich möchte nichts verbergen

im Grunde möchte ich das:

$(".sortable, .sortable_subtable").sortable();

$(".load").click(function(e){
//disable sortable on ".sortable" only
//loads dynamic content into table row, expanding row
});

Antworten:

1 für die Antwort № 1

Ich habe das mit list anstelle von Tabellen getestet und es scheint zu funktionieren. Überprüfen Sie die Arbeitsweise Jaffer Beispiel.

Es sieht aus wie das

<ul class="sortable">
<li><a class="load" href="#">load content 1</a></li>
<li>
<ul class="sortable_subtable">
<li><a class="load" href="#">loaded content row 1</a>
<li><a class="load" href="#">loaded content row 2</a></li>
</ul>
</li>
<li><a class="load" href="#">load content 3</a></li>
</ul>

Und das Skript:

$(".sortable, .sortable_subtable").sortable();
$(".sortable").sortable("disable");

Nachdem die zweite Zeile die Hauptliste deaktiviert hat, können Sie nur die Untertabellenliste sortieren

AKTUALISIEREN Ein gefunden Post wie man Tabellen mit sortierbaren verwendet.
Grundsätzlich die Reihen hineinlegen <tbody class=content>
dann benutze

$("#tableId tbody.content").sortable();