Question

我正在使用DataTables从各种ASP数据库收集大量数据。另外，我使用以下DataTables插件： FixedHeaders，FixedColumns，ColReorder。

现在，使用ColReorder函数，当一个标题（实际上是一列）被拖动以重新排序它并溢出到两侧（水平滚动）时，我希望表格滚动到它的一边，这样列不仅可以拖动到表格的查看区域，还可以拖动到整个表格。

我尝试过各种各样的方法和行走方式，例如当光标接近边界时尝试滚动（就像在“Drag Scrolls”http://javascriptmvc.com/docs.html#!jQuery.Drag中这样），但是我没有成功，以及这个方法 - http://mootools.net/docs/more/Interface/Scroller。

我非常感谢你的帮助。提前谢谢大家。

Answer 1

这是一种可以让您更接近解决问题的方法。根据我的实验，您可以在_fnMouseMove代码之前复制和修改函数this.dom.drag.css(...)中的dataTables.colReorder.js。

var scrollLeftVal = $(this.s.dt.nTableWrapper).find('.dataTables_scrollBody').scrollLeft();
if((e.pageX - this.s.mouse.offsetX) > (this.s.dt.nTableWrapper.clientWidth - 50)) {
  scrollLeftVal += 10;
  $(this.s.dt.nTableWrapper).find('.dataTables_scrollBody').scrollLeft(scrollLeftVal);
}

拖动列标题时，这将向右滚动窗口。还需要一种反向方法，以及修改指针和拖动元素的位置，如下所示：

this.dom.pointer.css( 'left', this.s.aoTargets[i-1].x - scrollLeftVal );

如果您决定采用这种方法，那么建立扩展/插件而不是修改核心代码会更好。这仅用于实验目的。

我开始沿着这条路走下去，但相信我会做自己的重新排序界面，因为这种方法即使正常工作和滚动，也不适合我正在进行的项目。

希望这有助于某人更接近解决方案！

赖安

Answer 2

使用bootstrap https://jsfiddle.net/bababalcksheep/gsf2r1v4/17/

进行测试

我在dataTables.colReorder.js之前修改了_fnMouseMove中的this.dom.drag.css(...)，从而添加了此代码似乎工作正常但只有一个问题。冗长的列很难捕捉到下一个短宽度列。

例如：在https://jsfiddle.net/bababalcksheep/gsf2r1v4/17/中，尝试将项目列拖到下一个EXT列。我怀疑这是因为项目列的宽度较大。

非常感谢对此问题的任何进一步解决

var scrollHead = $(this.s.dt.nTableWrapper).find('.dataTables_scrollHead');
var scrollBody = $(this.s.dt.nTableWrapper).find('.dataTables_scrollBody');
var scrollLeftVal = e.pageX - scrollHead.parent().offset().left - this.s.mouse.offsetX;
//
var difference =  scrollHead[0].clientWidth  -  scrollLeftVal   ;
//is near Right edge, scroll to far right
if (difference < 150){
    scrollLeftVal = scrollHead[0].scrollWidth - scrollHead[0].clientWidth;// max scrollleft Value
}
//is near Left edge, scroll to far Left
if(scrollLeftVal < 100){
    scrollLeftVal= 0;
} 
//
scrollBody.scrollLeft(scrollLeftVal);

当标题滚动接近边界时，DataTables ColReorder滚动

2 个答案: