在 jQueryUI 可排序的表之间移动一列，包括 th答案

【问题标题】：move a column ,including th, between tables in jQueryUI sortable在 jQueryUI 可排序的表之间移动一列，包括 th
【发布时间】：2014-08-27 08:39:15
【问题描述】：

Fiddle Example

我有两个示例表格，第一个单元格中有主题标题。

<table class='sort connect'>
    <thead>
        <tr>
            <th class='ui-state-disabled'></th>
            <th>Person 1</th>
            <th>Person 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='ui-state-disabled'>Age</td>
            <td>18</td>
            <td>23</td>
        </tr>
         <tr>
            <td class='ui-state-disabled'>Job</td>
            <td>Clerk</td>
            <td>Policeman</td>
        </tr>
    </tbody>
</table>


<table class='sort connect'>
    <thead>
        <tr>
            <th class='ui-state-disabled'></th>
            <th>Person 3</th>
            <th>Person 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='ui-state-disabled'>Age</td>
            <td>17</td>
            <td>46</td>
        </tr>
         <tr>
            <td class='ui-state-disabled'>Job</td>
            <td>Student</td>
            <td>Firefighter</td>
        </tr>
    </tbody>
</table>

我已经使th 和td 的第一个孩子无法排序，因为它们是标题。有没有办法使用 jQueryUI 可排序将其他列一次移动一个（td:nth-child,th:nth-child）到另一个表？如何在change 或start 事件中使整列可排序？

这是我的预期输出：

<table class='sort connect'>
    <thead>
        <tr>
            <th class='ui-state-disabled'></th>
            <th>Person 1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='ui-state-disabled'>Age</td>
            <td>18</td>
        </tr>
         <tr>
            <td class='ui-state-disabled'>Job</td>
            <td>Clerk</td>
        </tr>
    </tbody>
</table>


<table class='sort connect'>
    <thead>
        <tr>
            <th class='ui-state-disabled'></th>
            <th>Person 3</th>
            <th>Person 2</th> // sorted
            <th>Person 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='ui-state-disabled'>Age</td>
            <td>17</td>
            <td>23</td> //sorted
            <td>46</td>
        </tr>
         <tr>
            <td class='ui-state-disabled'>Job</td>
            <td>Student</td>
            <td>Policeman</td> //sorted
            <td>Firefighter</td>
        </tr>
    </tbody>
</table>

JS代码：

var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      $(this).width($originals.eq(index).width())
    });
    return $helper;
};

$(function() {
    $( ".sort" ).sortable({
    change: function( event, ui ) {
      var see = ui.item.index();
          console.log(see);
      $(this).find('td:nth-child(see),th:nth-child(see)')
    },
     helper: fixHelperModified, 
     cancel: ".ui-state-disabled",
     connectWith: ".connect"
    }).disableSelection();
  });

【问题讨论】：

您的 HTML 结构需要保持不变还是可以编辑？ IE。为每一列创建一个表，然后将它们放在一个 div 中，并使 div 可排序，可排序的元素是表本身
我没有时间 ATM 来编写任何代码，但我认为解决方案比字面移动更抽象一些。连续计算 td 的数量，并对其进行模数以获取连续的所有 td，即，我们要移动带有子元素 els td3/td6/td9 的表。也许有人可以运行。 HTH
我不确定这是否有帮助，但对我来说，这看起来像是一个数据表示问题。 AFAIK，一行代表一个 record，列代表该记录的一个 attribute 值。对我来说，这里person 是一条记录，age、job 等是人的属性。（person1、person2 等是 age 或 job 的属性吗？好吧，不适合我。）基于此，you're structure should be like this。对，不是问题的答案，因此是评论:)

标签： javascript jquery html jquery-ui jquery-ui-sortable

【解决方案1】：

this 之类的呢？

这是您所要求的解决方法，但它的作用基本相同，只是根据您的需要修复样式、空格等

HTML

<div class="sortableContainer sort connect">
    <div>
        <table>
            <thead>
                <tr>
                    <td height="20px"></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Age</td>
                </tr>
                <tr>
                    <td>Job</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <table>
            <thead>
                <tr>
                    <td>Person 1</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>18</td>
                </tr>
                <tr>
                    <td>Clerk</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <table>
            <thead>
                <tr>
                    <td>Person 2</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>23</td>
                </tr>
                <tr>
                    <td>Policeman</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="sortableContainer sort connect">
    <div>
        <table>
            <thead>
                <tr>
                    <td height="20px"></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Age</td>
                </tr>
                <tr>
                    <td>Job</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <table>
            <thead>
                <tr>
                    <td>Person 3</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>17</td>
                </tr>
                <tr>
                    <td>Student</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <table>
            <thead>
                <tr>
                    <td>Person 4</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>46</td>
                </tr>
                <tr>
                    <td>Firefighter</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

td, th {
    border:1px solid #222
}
.red {
    background:red
}
.ui-state-disabled {
    opacity:1
}
.sortableContainer>div {
    display:inline-block;
}
table {
    border-spacing:0px;
    border-collapse:collapse;
}

$(function () {
    $(".sort").sortable({
        connectWith: ".connect"
    }).disableSelection();
});

【讨论】：

我没有考虑过。这似乎是一个很好的解决方案。我需要注意的是第二个和第三个表中内容的长度，以确保它们的高度和宽度与第一个表匹配。否则整个结构就会被破坏。
@RedGiant 我不太清楚你的意思，你能强调一下吗？
@RedGiant 我想我现在知道你的意思了，无论如何，这就是你的意思吗？ jsfiddle.net/tt3ceLbf/22
是的，这就是我想说的。我想保持表格之间的高度相等，因此如果其中一个单元格包含更多文本，它不会破坏整个结构。
@RedGiant 关于我提供的代码，您还有什么其他问题吗？或者您有什么想要添加或更改的内容吗？