Jquery Datatables删除行不适用于拖放

Question

我正在使用：jquery.dataTables.js 来自：https://datatables.net

我的删除按钮不起作用，我想知道我做错了什么。

如果我删除拖放功能，按钮可以正常工作。

有人知道我做错了什么吗？

jsfiddle：http://jsfiddle.net/f7debwj2/24/

 rowReorder: {
      dataSrc: 'order',
      selector: 'tr',
    },

如果我删除selector: 'tr'，工作正常，但我不能因为整行需要可拖动

html:

<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>order</th>
      <th>name</th>
      <th>country</th>
      <th>action</th>
    </tr>
  </thead>
</table>

jquery

$(document).ready(function() {
  var dt = $('#example').dataTable();
  dt.fnDestroy();
});

$(document).ready(function() {
  var url = 'http://www.json-generator.com/api/json/get/bQzyuEGndu?indent=2';
  var table = $('#example').DataTable({
    ajax: url,
    rowReorder: {
      dataSrc: 'order',
      selector: 'tr',
    },
    columns: [{
      data: 'order'
    }, {
      data: 'place'
    }, {
      data: 'name'
    }, {
      data: 'delete'
    }],
    "fnDrawCallback": function(oSettings) {
      $("i.fa.fa-minus-square").click(function(event) {
        $(this).closest("tr").remove();
      });
    }
  });
});

Answer 1

通过对 rowReorder.js 的一个非常小的修改，我设法使它工作，希望它不会有任何其他后备。

我将第 182 行中的 rowReorder.js 文件从： return false; 到 return;

为什么？ 因为jquery有如下代码：

ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle ||
                        handleObj.handler ).apply( matched.elem, args );

                    if ( ret !== undefined ) {
                        if ( ( event.result = ret ) === false ) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                    }

当return false; ret 值为false 并且代码：

event.preventDefault();
event.stopPropagation();

正在执行。 event.stopPropogation 从事件中停止冒泡，这会导致您的“mousedown”事件不起作用。

当我们只使用return; 时，条件不成立，并且没有停止传播事件，它的工作原理如您在此演示中所见： Working Demo。

Answer 2

看起来 rowReorder 插件覆盖了“click”事件之前的“mousedown”事件，并阻止了它上面的任何其他处理程序。 来自https://cdn.datatables.net/rowreorder/1.2.0/js/dataTables.rowReorder.js：

$(dt.table().container()).on( 'mousedown.rowReorder touchstart.rowReorder', this.c.selector, function (e) {
            if ( ! that.c.enabled ) {
                return;
            }

            var tr = $(this).closest('tr');

            // Double check that it is a DataTable row
            if ( dt.row( tr ).any() ) {
                that._mouseDown( e, tr );
                return false;
            }
        } );

        dt.on( 'destroy.rowReorder', function () {
            $(dt.table().container()).off( '.rowReorder' );
            dt.off( '.rowReorder' );
        } );