JQuery UI Sortable: 带有一组行的表格？

Question

我有一个HTML表格（#view-page-table），其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>

我的jQuery现在很简单：

function reOrder() {
    $("#view-page-table tbody").sortable({
        helper: function(e, ui) {
             ui.children().each(function() {
                 $(this).width($(this).width());
             });
             return ui;
        }
    }).disableSelection();
}

似乎运行良好（辅助功能是维护单元格宽度而移动）。唯一的问题是，我需要一次移动两个。换句话说，用户需要拖动整个组一、二或三，不能只拖动一行。我尝试在表格中添加一个div，但我猜那是不行的。

- Nathan

Answer 1

我认为我有解决方案，但不是最优解。 尝试在表格内部进行操作。

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

将您的脚本替换为以下内容

function reOrder() {
    $("#view-page-table").sortable({
        helper: function(e, ui) {
             ui.children().each(function() {
                 $(this).width($(this).width());
             });
             return ui;
        },
        handle: "tbody"
    }).disableSelection();
}

祝你好运。

- Ahmed Assaf

---

以上代码对我不起作用，我不得不将 handle: "tobdy" 替换为 items: "tbody"。否则，非常好的解决方案！ - rlanvin

感谢这个答案。使用类似的方法，我实现了技术上正确的结果，但遇到了极端的格式问题。最终我放弃了我的努力并重新审视了整个问题的解决方法。谢谢。 - Nathan

Answer 2

尝试将相关行放在自己的tbody标签中。您可以在单个表格中使用多个tbody标签。这是一个理想的用例。

- ventaur

---

太棒了！我从来不知道那是可能的！ - Magnus

Answer 3

需要修改Ahmed Assaf的解决方案如下

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> 

脚本代码

// Return a helper with preserved width of cells  
var fixHelper = function(e, ui) {  
  ui.children().children().each(function() { 
    $(this).width($(this).width()); 
  });  
  return ui;  
};

$("#sort").sortable({
        helper: fixHelper,
        items: "tbody"
    }).disableSelection();

在fixHelper函数中，代码行

ui.children().each(function()

需要替换为

ui.children().children().each(function()

以获取TD宽度值。

而rlanvin在他的评论中指出，

handle: "tbody"

这一行需要替换为

items: "tbody"

jsfiddle上的演示

最好的问候 NexusFred

- Nexus Fred

---

需要哪个jquery-ui版本才能使用带参数的helper？对我来说，参数“ui”会出错。 - Anil D

抱歉耽搁了。在这个演示中，我使用的是JQuery UI 1.11.4。 - Nexus Fred