可拖出表格的角度数据表列

Posted 2023-05-07

【中文标题】可拖出表格的角度数据表列

【英文标题】：angular-datatable column draggable out of the table

【发布时间】：2016-01-31 05:54:18

【问题描述】：

是否可以避免列，而不是拖出数据表视图区域，您可以自己弄清楚，我在此链接中谈论的内容 https://l-lin.github.io/angular-datatables/#/withColReorder

当您尝试将列拖离数据表很远时。 我已经在官方组件网站上提出了这个问题 https://github.com/l-lin/angular-datatables/issues/496

（以防万一提出问题，更好地解释我在说什么）

【问题讨论】：

嗨，您有用于列重新排序的工作堆栈闪电战

【参考方案1】：

正如 l-lin 所指出的，angular-datatables 是 jQuery dataTables 的包装器，提供指令并确保 dataTables 不会与 angular 冲突。要更改核心功能，您仍然必须更改核心。

您可以通过猴子修补来更改 dataTables 核心库中的许多内容。为了防止将列标题拖到表格的<thead> 部分之外，您可以这样做：

var old_fnMouseMove = $.fn.DataTable.ColReorder.prototype._fnMouseMove;
$.fn.DataTable.ColReorder.prototype._fnMouseMove = function(e) 
    var x = e.clientX, 
        y = e.clientY, 
        r = document.querySelector('#example thead').getBoundingClientRect(),
        within = (x>r.left && x<r.right && y>r.top && y<r.bottom);

    if (within) old_fnMouseMove.apply(this, arguments);

在进行拖动时，上面会覆盖 ColReorders mousemove 事件。如果鼠标在<thead> 元素之外，它只是不将事件传递给原始函数 - 通过有效地防止将列拖动到外部。

angular-datatables 演示 -> http://plnkr.co/edit/uPv8FoUrJkQWnEaE2AQY?p=preview

纯 jQuery dataTables 演示 -> http://jsfiddle.net/0boznoh7/

【讨论】：

非常感谢您的帮助，在这期间我尝试做更多动态表，在表中使用 ng-repeat，这里的列移动有点奇怪，看起来只有列名能够不使用数据“plnkr.co/edit/PAtUDxmB9aQ5LQZu3uww?p=preview”移动，也得到“表中没有可用数据”，请对此提供帮助

@RAVIMONE，使用ng-repeat 时需要datatable="ng"。即<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" id="example"> -> l-lin.github.io/angular-datatables/#/angularWay ...我没有看到“没有数据在您的 plnkr.. 中的表中可用”？

非常感谢您到目前为止的帮助，当我将.withLightColumnFilter 过滤器l-lin.github.io/angular-datatables/#/withLightColumnFilter 集成到数据表时，我还有一个问题。我已经在这里github.com/l-lin/angular-datatables/issues/500进行了更详细的解释，请你看看这个问题，如果可能的话，帮我解决一下。