Использование jQuery UI с возможностью сортировки с помощью HTML-таблиц


80

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

<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атрибуты должны быть уникальными в пределах документа. Ваш код создает несколько элементов с помощью same id( sortable). Попробуйте classвместо этого использовать.
Frédéric Hamidi

Как бы то ни было, - tds с contenteditableатрибутом не кажутся редактируемыми, если их строка может быть отсортирована с помощью этого метода. Просто к вашему сведению.
jg2703

Ответы:


195

Вы можете вызывать sortablea <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 не меняется, я думаю, потому что я получаю данные из базы данных, и они должны поступать в этом порядке, поэтому могу ли я изменить позиционирование в базе тоже?
Самер Эль Генди,

Да, если вы хотите сохранить отсортированные позиции, вам придется где-то хранить эту информацию.
TJ VanToll

3
ДА СПАСИБО !! Я так боялся, что мне придется переделывать весь дизайн, и у меня был всего один час, чтобы заставить его работать, огромное спасибо!
NaturalBornCamper

5
Публикация от имени пользователя 236766 : вы можете изменить последнее <tbody>на </tbody>;)
NathanOliver

Не знаю, какого черта я решил назвать sortable на столе, а не на элементе tbody ... Спасибо!
ksudu94
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.