使用带有 HTML 表格的 jQuery UI 可排序

Posted 2023-02-24

【中文标题】使用带有 HTML 表格的 jQuery UI 可排序

【英文标题】：Using jQuery UI sortable with HTML tables

【发布时间】：2012-07-13 07:42:40

【问题描述】：

我想在 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被拖动。此外，最重要的是，只有第一行是可拖动的：效果不会应用于其他行。我该如何解决这个问题？

【问题讨论】：

id 属性在文档中必须是唯一的。您的代码正在创建多个具有相同 id (sortable) 的元素。尝试改用class。

对于它的价值 - tds 与 contenteditable 属性似乎不可编辑，如果他们的行可以使用这种方法进行排序。仅供参考。

【参考方案1】：

您可以在<tbody> 上调用sortable，而不是在各个行上。

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

$(function() 
  $( "tbody" ).sortable();
);

 
table 
    border-spacing: collapse;
    border-spacing: 0;

td 
    width: 50px;
    height: 25px;
    border: 1px solid black;

 

<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<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>
        <tr>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td> 
            <td>10</td>
        </tr>  
    </tbody>    
</table>

【讨论】：

现在工作正常，整个 tr 是可拖动的，但现在的新问题是 tr 位置没有改变，我想是因为我从数据库中获取数据，它们应该进来order，那我也可以更改数据库中的定位吗？

是的，如果您想保留已排序的位置，则必须在某处保留该信息。

非常感谢！！我很害怕我不得不重做整个设计，我只有一小时的时间来完成它，谢谢大家！

代表user236766发帖：你可能想把最后一个<tbody>改成</tbody>;)

不知道为什么我决定在 table 上调用 sortable 而不是 tbody 元素...谢谢！