Javascript 对数据表中冻结的列禁用重新排序

我在我的桌子上启用了“重新订购”选项，效果很好，只是有一个细节需要处理

我有一个冻结列的权利与工具来管理行。我的表格允许向左向右滚动，并使这些工具易于访问

在创建此冻结列时，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视图中

下面是问题的动画GIF：

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

这是一把有问题的小提琴。单击行上的按钮，您将看到

---

我将selected从td:first-child更改为td[name=reorder]作为select。在HTML added name=reorder中，您可以通过这种方式在您想要的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>

---

查看此提琴：

我们可以使用一个可用的示例吗？@Deckerz添加了它。您是否尝试将event.stopPropagation添加到按钮单击或鼠标向下事件？@ratherblue单击这些单元格中的任何内容时都会发生这种情况，而不仅仅是按钮。也许我可以在更高的层次上尝试。