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

我想保持满足的属性。用户应该能够通过拖动＆＃34; 3-lines.png＆＃34;来重新排序行。图标位于最右边的单元格中。

可能吗？

Answer 1

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

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

使用一列的可排序表行

1 个答案: