使用 JQuery-UI 对第 2 级表中的列进行排序答案

【问题标题】：Sorting columns in table with 2 th level using JQuery-UI使用 JQuery-UI 对第 2 级表中的列进行排序
【发布时间】：2014-08-07 15:59:30
【问题描述】：

我有一个看起来像这样的 HTML 表格

我希望能够对表格内的列进行排序，但仅限于上面的列。

例如，只有 A-1、A-2 和 A-3 可以按任何可能的顺序低于 A。

我使用 JQueryUI 和这段代码初始化排序

$("table thead tr:last").sortable({
    axis: 'X',
    containment: 'parent',
    items: " > th",
    helper: 'clone',
    cursor: 'move',
});

Here is the JSFiddle

到目前为止，我已经尝试将 th 内部包装器的第二行分组并将此包装器用作包含 div。

<tr>
    <dragWrapper>
        <th>A-1</th>
        <th>A-2</th>
        <th>A-3</th>
    </dragWrapper>
    <dragWrapper>
        <th>B-1</th>
        <th>B-2</th>
    </dragWrapper>
    <dragWrapper>
        <th>C-1</th>
        <th>C-2</th>
    </dragWrapper>
</tr>

它确实有效，但它完全破坏了表格布局......

【问题讨论】：

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

【解决方案1】：

更新小提琴：http://jsfiddle.net/kmblackwood/uca9940v/6/

这里有几件事：

您不能定义自定义 HTML 元素。例如，<dragWrapper> 不会被浏览器解释（除非您使用的是问题中未提及的编译器/语言）。

我所做的是重建你的表结构，这样你的每个字母 ID 块都是它自己的表。

您还在 jQuery 方法中使用了选择器 tr:last，它应该是 tr:last-child。

【讨论】：