3

我有一个接近以下 HTML 的 HTML 表（#view-page-table）：

<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，但我想这是一个禁忌。

4

3 回答 3

6

我想我有解决方案，但不是最佳的。试着在里面做表

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

祝你好运

于 2012-12-30T16:59:00.240 回答
2

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

于 2012-12-30T16:51:30.410 回答
1

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(函数()
需要替换为
ui.children().children().each(function()
捕捉 TD 宽度值。

和线

句柄：“tbody”
需要替换为
项目：“身体”
rlanvin在他的评论中指出

jsfiddle 上的演示

最好的问候 NexusFred

于 2016-08-24T11:03:12.860 回答