javascript - 禁用对数据表中卡住列的重新排序

Question

我在我的 table 上启用了重新订购选项并且工作正常，除了有一个细节我需要去掉。

我在右侧有一个卡住的列，其中包含用于管理该行的工具。我的表格允许左右滚动，并且可以轻松访问这些工具。

在创建这个卡住列时，DataTables 似乎创建了另一个从主表克隆的表。

这是表的初始化:

scope.TableData = $('#tableData').DataTable({
    rowReorder: {
        selector: 'td:first-child',
        update: false,
    },
    paging: true,
    fixedColumns: {
        rightColumns: 1,
        leftColumns: 0
    },
    select: {
        style: 'os',
        selector: 'td:nth-child(2)'
    },
    "search": {
        "regex": true
    },
    order: [[1, 'asc']],
    'filter': true,
    'scrollX': true,
    'bInfo': true,
    'scrollCollapse': true,
    scroller: {
        rowHeight: 20
    },
    'columnDefs': [
        { className: 'select-checkbox', targets: 1 },
        { className: 'reorder', targets: 0, orderable: true },
        { orderable: false, targets: -1 }
    ],
    "order": [],
    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    "language": {
        "lengthMenu": "@Html.ResStr("DataRowLengthMenu")",
        "zeroRecords": "@Html.ResStr("DataRowEmpty")",
        "info": "@Html.ResStr("DataRowInfo")",
        "infoEmpty": "@Html.ResStr("DataRowEmpty")",
        "infoFiltered": "@Html.ResStr("DataRowFilter")",
        "search": "",
        "processing": "<span style=\"color: dodgerblue; font-weight: bold;\">@Html.ResStr("PleaseWait")</span>",
        "lengthMenu": "@Html.ResStr("DataRowLengthMenu")<br><br>",
        "paginate": {
            "next": "@Html.ResStr("DataRowNext")",
            "previous": "@Html.ResStr("DataRowPrevious")"
        },
        select: {
            rows: {
                _: "@Html.ResStr("DataRowsSelected")",
                0: "",
                1: "@Html.ResStr("DataRowSelected")"
            }
        }
    }
});

(不要介意 @Html.ResStr，javascript 在 ASP MVC View 中)

这是问题的动画 GIF:

如您所见，通过“Seq”列拖动行时效果很好，但我无法单击卡住列中的按钮，因为它会触发拖动事件。

这是一个有问题的 fiddle 。单击行上的按钮，您会看到。

https://jsfiddle.net/1qod8mLx/2/

Answer 1

我将选择从 td:first-child 更改为 td[name="reorder"] 作为选择。并在 HTML 中添加了 name="reorder" 在你想要的 td 上，这种方式允许你在你想要的任何 td 上应用拖动.

var table = $('#tableData').DataTable({
    rowReorder: {
      selector: 'td[name="reorder"]',
      update: false,
    },
    paging: true,
    fixedColumns: {
      rightColumns: 1,
      leftColumns: 0
    },
    select: {
      style: 'os',
      selector: 'td:nth-child(2)'
    },
    "search": {
      "regex": true
    },
    'filter': true,
    'scrollX': true,
    'bInfo': true,
    'scrollCollapse': true,
    scroller: {
      rowHeight: 20
    },
    'columnDefs': [{
        className: 'select-checkbox',
        targets: 1
      },
      {
        className: 'reorder',
        targets: 0,
        orderable: true
      },
      {
        orderable: false,
        targets: -1
      }
    ],
    "order": []
  });

表格中的示例行:

     <tr>
        <td name="reorder">1</td>
        <td style="line-height: 20px; height: 20px; vertical-align: middle;"></td>
        <td>1</td>
        <td>Lead</td>
        <td>#1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        <td>a@a.com</td>
        <td>444-333-2222</td>
        <td align="center" style="background-color: #e6e6e6;vertical-align: middle">
          <button class="btn btn-sm btn-default btn-edit-row"><span class="glyphicon glyphicon-pencil"></span></button>
          <button class="btn btn-sm btn-default btn-delete-row"><span class="glyphicon glyphicon-trash"></span></button>

        </td>
      </tr>

请参阅此 fiddle :https://jsfiddle.net/Lfrxujgv/