Використання інтерфейсу jQuery, який можна сортувати з таблицями HTML


80

Я хочу вивести деякі дані з бази даних у таблиці HTML, і я хочу, щоб користувач міг змінити порядок рядків таблиці. Для досягнення цього я використав jQuery UI для сортування, таким чином:

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

Проблема в тому, що коли я перетягую таблицю tr, tdперетягуються лише . Крім того, і найголовніше, лише перший рядок можна перенести: ефект не застосовується до інших рядків. Як я можу це вирішити?


4
idатрибути повинні бути унікальними в документі. Ваш код створює кілька елементів з однаковим id( sortable). Спробуйте використовувати classзамість цього.
Фредерік Хаміді,

Для чого це коштує - tdS з contenteditableатрибутом , здається, не можуть редагуватися , якщо їх рядки можна впорядкувати з допомогою цього методу. Просто FYI.
jg2703

Відповіді:


195

Ви можете зателефонувати sortableна , <tbody>а не на окремих рядках.

<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> 


це працює нормально зараз, і весь tr можна перенести, але нова проблема зараз полягає в тому, що позиція tr не змінюється, я думаю, оскільки я отримую дані з бази даних, і вони повинні надходити в такому порядку, так що я можу змінити позиціонування в базі даних теж?
Samer El Gendy

Так, якщо ви хочете зберегти відсортовані позиції, вам доведеться десь зберігати цю інформацію.
TJ VanToll

3
ТАК ДЯКУЄМО !! Я так боявся, що мені доведеться переробляти цілий дизайн, і у мене була лише одна година, щоб змусити його працювати, спасибі купи!
NaturalBornCamper

5
Публікація від імені користувача 236766 : можливо, ви захочете змінити останнього <tbody>на </tbody>;)
NathanOliver

Не знаю, чому, на біса, я вирішив назвати сортувальним на столі, а не елементом tbody ... Дякую!
ksudu94
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.