使用一列的可排序表行

Question

我不确定标题是否描述了我的问题。我正在尝试制作可以内联更改值的表格（使用contenteditable）并且可以排序。

很遗憾，我不知道如何将这些功能组合在一起。 HTML 如下所示：

<table id="sort">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Last Name</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td contenteditable="true">John</td>
      <td contenteditable="true">Doe</td>
      <td><img src="images/3-lines.png" /></td>
    </tr>
    <tr>
      <td>1</td>
      <td contenteditable="true">John</td>
      <td contenteditable="true">Doe</td>
      <td><img src="images/3-lines.png" /></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;
},
    updateIndex = function(e, ui) {
        $('td.index', ui.item.parent()).each(function (i) {
            $(this).html(i + 1);
        });
    };

$("#sort tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex
}).disableSelection();

我想保留 contenteditable 属性。用户应该能够通过拖动最右侧单元格上的“3-lines.png”图标来重新排序行。

有可能吗？

Answer 1

如果您可以添加一个 jquery 插件，请使用 DataTables，我认为它可以满足您的需求。

https://editor.datatables.net/examples/inline-editing/simple