Question

我在桌子上启用了重新排序选项，并且工作正常，除了需要删除一些细节。

我右边有一个冻结的列，其中包含用于管理行的工具。我的表格允许向右滚动并易于访问这些工具。

似乎在创建此冻结列时，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”列拖动行时，效果很好，但我无法单击冻结列中的按钮，因为它会触发拖动事件。

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

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

Answer 1

我将选择项从td:first-child更改为td[name="reorder"]作为选择项。在所需的name="reorder"上添加了td的HTML中，这种方式允许您将拖动应用于所需的任何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>

查看这个小提琴：https://jsfiddle.net/Lfrxujgv/

停用对DataTables中冻结列的重新排序

1 个答案: