Jquery ui JQuery UI可排序：有行集的表？

我有一个HTML表格（#查看页面表格），其内容接近以下HTML：

<table id="view-page-table">
    <thead>
        <th>Header1</th>
        <th>Header2</th>
    </thead>
    <tbody>
        <tr><td>Group 1</td><td>Group 1</td></tr>
        <tr><td>Group 1</td><td>Group 1</td></tr>

        <tr><td>Group 2</td><td>Group 2</td></tr>
        <tr><td>Group 2</td><td>Group 2</td></tr>

        <tr><td>Group 3</td><td>Group 3</td></tr>
        <tr><td>Group 3</td><td>Group 4</td></tr>
    </tbody>
</table>

---

它似乎工作得很好（辅助功能是在移动时保持单元格宽度）。唯一的问题是，我需要一次移动两个

。换句话说，用户需要拖动所有组1、组2或组3，而不能仅拖动一行。我试图在表中添加一个div，但我想这是一个禁忌。

尝试将相关行包装到它们自己的tbody标记中。可以在一个表中使用多个tbody标记。这是一个理想的用例。

我认为我有解决方案，但不是最佳方案。 试着在里面做tabel

<tbody>
        <tr><td>Group 1</td><td>Group 1</td></tr>
        <tr><td>Group 1</td><td>Group 1</td></tr>
</tbody>
<tbody>
        <tr><td>Group 2</td><td>Group 2</td></tr>
        <tr><td>Group 2</td><td>Group 2</td></tr>
</tbody>
<tbody>
        <tr><td>Group 3</td><td>Group 3</td></tr>
        <tr><td>Group 3</td><td>Group 4</td></tr>
</tbody>

---

祝你好运

艾哈迈德·阿萨夫的解决方案需要修改如下

HTML代码

<table id="sort" border="1" width="500">  
    <thead>  
    <tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr>  
    </thead>  
    <tbody class="red">
            <tr><td>Group 1</td><td>Group 1</td><td>Group 1</td></tr>
            <tr><td>Group 1</td><td>Group 1</td><td>Group 1</td></tr>
    </tbody>                                    
    <tbody>                                     
            <tr><td>Group 2</td><td>Group 2</td><td>Group 2</td></tr>
            <tr><td>Group 2</td><td colspan="2">Group 2 and Group 2</td></tr>
    </tbody>                                    
    <tbody class="blue">                                     
            <tr><td>Group 3</td><td>Group 3</td><td>Group 3</td></tr>
            <tr><td>Group 3</td><td>Group 4</td><td>Group 4</td></tr>
    </tbody>
</table> 

在fixHelper函数中，代码行ui.children（）.each（函数（））需要替换为ui.children（）.children（）.each（函数（））以捕获TD宽度值

ui.children().each(function() ui.children().children().each(function() items: "tbody" 行句柄：“tbody”需要替换为items：“tbody”在他的评论中用rlanvin表示

ui.children().children().each(function() handle: "tbody" items: "tbody"

致意

---

NexusFred

上面的代码对我不起作用，我不得不用

项目：“tbody”替换
手柄：“tobdy”

。否则，这是一个非常好的解决方案！感谢您的回答。使用类似的方法，我获得了技术上正确的结果，但存在极端的格式问题。我最终放弃了努力，重新审视了我是如何处理这个问题的。谢谢。回答太棒了！不知道这是可能的！需要设置哪个jquery ui版本带有参数的助手？对我来说，参数“ui”给出了错误。很抱歉延迟。在这个演示中，我使用了JQuery ui 1.11.4。 items: "tbody"