使 HTML 表格中的整行和列可拖放？

Posted 2023-05-08

【中文标题】使 HTML 表格中的整行和列可拖放？

【英文标题】：Making entire rows AND columns in an HTML table drag/droppable?

【发布时间】：2021-11-28 20:26:52

【问题描述】：

我有一个基本的 html 表格，启用了 jQuery 的 sortable 来对表格行进行排序。 (Codepen for the table; code is below)

我的最终目标是允许用户根据需要拖放行和/或列。我知道connectWith option 可以传递给可排序的，但它似乎使所有单独的 td 单元格都可以移动 - 我只希望它适用于整个列或整个行（而不是单个单元格）。

我看过 jQuery-ui 的 sortable API documentation，但我很难弄清楚它是如何工作的；我不确定基本的可排序类是否可以处理这样的场景，或者我是否需要构建一些外部 javascript 来实现这一点。

如果我需要使用自己的 javascript，这不是问题 - 问题是，我什至不知道从哪里开始（它会由事件侦听器处理吗？）。我不是在找人来为我解决问题 - 但好奇是否有人知道基本可排序类是否可以实现这种事情，如果没有（如果我需要构建自己的 js 来做到这一点），可以你指出了我从哪里开始的正确方向，因为我真的不确定。

表格 HTML：

<table class="mytable">
  <caption>My Table</caption>
  <tr>
    <td id="corner"></td>
    <th scope="col">Col I</th>
    <th scope="col">Col .II</th>
    <th scope="col">Col .III</th>
  </tr>
  <tr class="sortme">
    <th scope="row">Row I</th>
    <td>Open</td>
    <td>Open</td>
    <td>Open</td>
  </tr>
  <tr class="sortme">
    <th scope="row">Row II</th>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
  </tr>
   <tr class="sortme">
    <th scope="row">Row III</th>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
  </tr>
</table>   

jquery:

$(function() 
    $( "tbody" )
        .sortable(items: "tr.sortme" );
);

编辑：我已经用DataTables 解决了这个问题。它将同时对行和列进行重新排序。 (Working codepen.) 用法非常简单。阅读basic installation instructions 以了解您需要哪些脚本，download them (make sure to check 'ColReorder' and 'RowReorder' under the 'extensions' section)然后按如下方式初始化您的表：

<script>
  $(document).ready( function () 
    $('#myTable').DataTable(
      searching: false,
      ordering:  false,
      rowReorder: true,
      colReorder: true,
    );
 );
</script>

就这么简单。请注意，我将 'searching' 和 'ordering' 选项设置为 false，因为在我的情况下我不希望表中包含这些功能 - 您不需要提供这些功能，您可能会发现这些功能很有用。

需要牢记的重要事项：上面发布的 HTML 不能与 DataTables 一起使用。它有两个问题。 (1) 在行中使用标签（作为行标签，或我写过<th scope="row">Row III</th> 的示例）将不起作用。相反，我把它们变成了标签，然后它就起作用了。 (2) 此外，您的表格必须有 <thead> 和 <tbody> 才能使 DataTables 工作（请参阅 this section of the install guide which mentions that.)。

最后，我想提一下，我发现在初始化 DataTables 时提供以下选项很有用：

rowReorder: 
    update: false
,

显然，“更新”选项可能会导致某些表出现一些不良行为。对于我的简单表格，我注意到除非我将其设置为 false，否则无论拖动多远，我都只能将行上下移动一行。将其设置为 false 可修复该问题而不会导致任何问题。

【问题讨论】：

欢迎来到 Stack Overflow。没有直接的方法来组织列。这是由于 HTML 表具有行定义但没有列定义。因此，在移动行及其子元素很容易的地方，移动列就更难了。

您可能首先要考虑 DataTables 库：datatables.net 您正在寻找的这两个功能都可以使用：datatables.net/extensions/colreorder 如果您确实想使用 Sortable 制作自己的，这可以是完成。

这就是我的想法，也是我不想用 sortable 陷入困境的原因。我不会以任何方式停留在可排序的 jquery 上——这个库看起来很棒，我可能会改用它。非常感谢！

在旁注中，如果这对将来的任何人都有用，我昨天发现了这个演示，它允许使用 jquery 可排序的列和行重新排序，embed.plnkr.co/plunk/twDXmS我已经在本地复制了它，但它似乎依赖于一些现已失效的插件。 （他们的代码仍然可以访问，所以我只是在本地下载了它，但他们的主页是 404，我不相信它已经维护了很多年。）DataTables lib 似乎是一个更好的选择（并且不需要依赖 html 表格。）但是有一个演示似乎可以工作以防万一有人感兴趣。

我只想说，我终于在我的网页上启动并运行了 DataTables，它运行良好。列重新排序和行重新排序都可以同时进行。对于任何好奇的人：这会告诉您如何安装 DataTables。 datatables.net/manual/installation 。导入脚本后，就像创建我的 HTML 表一样简单，然后将其添加为 javascript：$(document).ready( function () $('#myTable').DataTable(searching: false, ordering: false, rowReorder: true, colReorder: true, ); );

【参考方案1】：

考虑以下内容。

$(function() 
  function moveColumn(table, sourceIndex, targetIndex) 
    console.log("Move Col " + sourceIndex + " to " + targetIndex);
    var body = $("tbody", table);
    $("tr", body).each(function(i, row) 
      $("td", row).eq(sourceIndex).insertAfter($("td", row).eq(targetIndex - 1));
    );
  

  $(".mytable > thead > tr").sortable(
    items: "> th.sortme",
    start: function(event, ui) 
      ui.item.data("source", ui.item.index());
    ,
    update: function(event, ui) 
      moveColumn($(this).closest("table"), ui.item.data("source"), ui.item.index());
      $(".mytable > tbody").sortable("refresh");
    
  );

  $(".mytable > tbody").sortable(
    items: "> tr.sortme"
  );
);

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<table class="mytable">
  <caption>My Table</caption>
  <thead>
    <tr>
      <td id="corner"></td>
      <th scope="col" class="sortme">Col I</th>
      <th scope="col" class="sortme">Col II</th>
      <th scope="col" class="sortme">Col III</th>
    </tr>
  </thead>
  <tbody>
    <tr class="sortme">
      <th scope="row">Row I</th>
      <td>Open</td>
      <td>Open</td>
      <td>Open</td>
    </tr>
    <tr class="sortme">
      <th scope="row">Row II</th>
      <td>Open</td>
      <td>Open</td>
      <td>Closed</td>
    </tr>
    <tr class="sortme">
      <th scope="row">Row III</th>
      <td>Open</td>
      <td>Open</td>
      <td>Closed</td>
    </tr>
  </tbody>
</table>

这是一个基本示例。有一些陷阱，比如列没有一个好的占位符，而行将有一个。

【讨论】：

这很好用！太感谢了！我一直在使用上面 cmets 中提到的演示，但它依赖于许多外部脚本，其中一个产生了我无法解决的错误。这很简单，流畅，非常适合我的需要。另外，它使“可排序”更有意义。太棒了！谢谢！

哦，等等，我意识到这只会移动列标题本身，而不是实际的数据单元格。我将继续使用它，看看是否可以让它移动整个列。谢谢你让我开始！

在旁注中，它确实有时会移动列（尽管列标题总是移动）。我不确定它到底在什么情况下这样做，但我正在玩这个。如果我能够让它工作，将在此处发布解决方案。不管怎样，这似乎比我最初做的更好