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();
}

它似乎工作正常（辅助功能是在移动时保持单元宽度）。唯一的问题是，我需要一次移动两个<tr>。换句话说，用户需要拖动所有第一组，第二组或第三组而不能仅拖动一行。我试图在表格中添加一个div，但我想这是一个禁忌。

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();
}

最好的运气

Answer 2

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

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宽度值。

行

handle: "tbody"

需要在 rlanvin 的评论

中替换为

items: "tbody"

Demo on jsfiddle

最好的问候 NexusFred

JQuery UI Sortable：带有多组行的表？

3 个答案: