Używanie interfejsu użytkownika jQuery z możliwością sortowania z tabelami HTML

80

Chcę wyprowadzić niektóre dane z bazy danych w tabeli HTML i chcę, aby użytkownik mógł zmieniać kolejność wierszy tabeli. Aby to osiągnąć, użyłem sortable jQuery UI, a więc:

<script>
    $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
    </script>
<?php 
 while($row = mysql_fetch_assoc($co_authors)) {
                    echo "<tr id='sortable'><td>{$row['author_email']}</td>
                         <td>{$row['coauthor_level']}</td>";
                         <td><button class='remove' id='remove' name='remove' email="<?php echo $row['author_email'] ?>"
                            paper="<?php echo $row['paper_id'] ?>">Remove</button></td>
                         </tr>";
                }
?>

Problem polega na tym, że kiedy przeciągam tabelę tr, tylko tdsą przeciągane. Co najważniejsze, tylko pierwszy wiersz można przeciągać: efekt nie jest stosowany do innych wierszy. Jak mogę to rozwiązać?

Samer El Gendy
źródło
4
idatrybuty muszą być unikalne w dokumencie. Twój kod tworzy kilka elementów o tej samej id( sortable). Spróbuj classzamiast tego użyć .
Frédéric Hamidi
Bo to, co jest warte - osoby tdz contenteditableatrybutem nie wydają się być edytowalne, jeśli ich wiersz można posortować za pomocą tej metody. Tylko do Twojej wiadomości.
jg2703

Odpowiedzi:

195

Możesz wywołać sortablea <tbody>zamiast w poszczególnych wierszach.

<table>
    <tbody>
        <tr> 
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td> 
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>  
    </tbody>    
</table><script>
    $('tbody').sortable();
</script> 

TJ VanToll
źródło
teraz działa dobrze, a cały tr można przeciągać, ale nowym problemem jest teraz to, że pozycja tr się nie zmienia, myślę, że dlatego, że pobieram dane z bazy danych i powinny one przychodzić w tej kolejności, więc czy mogę zmienić pozycjonowanie również w bazie danych?
Samer El Gendy,
Tak, jeśli chcesz zachować posortowane pozycje, musisz gdzieś utrwalić te informacje.
TJ VanToll
3
TAK, DZIĘKI !! Tak bardzo bałem się, że będę musiał przerobić cały projekt i miałem tylko godzinę, aby to zadziałało, wielkie dzięki!
NaturalBornCamper
5
Publikowanie w imieniu użytkownika236766 : możesz zmienić ostatnie <tbody>na </tbody>;)
NathanOliver
Nie wiem, dlaczego, do diabła, zdecydowałem się nazwać sortable na stole, a nie element tbody ... Dzięki!
ksudu94