Verwenden der jQuery-Benutzeroberfläche, sortierbar mit HTML-Tabellen

80

Ich möchte einige Daten aus der Datenbank in einer HTML-Tabelle ausgeben und möchte, dass der Benutzer Tabellenzeilen neu anordnen kann. Um dies zu erreichen, habe ich jQuery UI sortierbar verwendet, also:

<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>";
                }
?>

Das Problem ist, dass beim Ziehen einer Tabelle trnur diese tdgezogen werden. Außerdem und vor allem ist nur die erste Zeile ziehbar: Der Effekt wird nicht auf andere Zeilen angewendet. Wie kann ich das lösen?

Samer El Gendy
quelle
4
idAttribute müssen innerhalb eines Dokuments eindeutig sein. Ihr Code erstellt mehrere Elemente mit demselben id( sortable). Versuchen Sie classstattdessen ein.
Frédéric Hamidi
Für das, was es wert ist - tds mit dem contenteditableAttribut scheinen nicht bearbeitbar zu sein, wenn ihre Zeile mit dieser Methode sortiert werden kann. Nur zu Ihrer Information.
jg2703

Antworten:

195

Sie können sortablea <tbody>anstelle der einzelnen Zeilen aufrufen .

<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
quelle
Dies funktioniert jetzt einwandfrei und das gesamte tr ist ziehbar, aber das neue Problem ist jetzt, dass sich die tr-Position nicht ändert, ich denke, weil ich Daten aus der Datenbank ableite und sie in dieser Reihenfolge kommen sollten, also kann ich die Position ändern auch in der Datenbank?
Samer El Gendy
Ja, wenn Sie die sortierten Positionen beibehalten möchten, müssen Sie diese Informationen irgendwo beibehalten.
TJ VanToll
3
JA DANKE !! Ich hatte solche Angst, dass ich das gesamte Design wiederholen müsste, und ich hatte nur eine Stunde Zeit, damit es funktioniert, danke Haufen!
NaturalBornCamper
5
Posting im Namen von user236766 : Vielleicht möchten Sie das letzte ändern <tbody>in </tbody>;)
NathanOliver
Ich weiß nicht, warum zum Teufel ich beschlossen habe, sortierbar auf dem Tisch zu nennen und nicht das tbody-Element ... Danke!
ksudu94