2

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

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

我尝试了许多方法和解决方法，例如当光标靠近边界时尝试使其滚动（如“拖动滚动” http://javascriptmvc.com/docs.html#!jQuery.Drag中的此处），但我没有成功，以及这种方法 - http://mootools.net/docs/more/Interface/Scroller。

我非常感谢您的帮助。谢谢大家。

4

2 回答 2

0

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

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);
}

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

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

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

我开始走这条路，但相信我会做我自己的重新排序界面，因为这种方法，即使工作和滚动正常，也不是我正在处理的项目的理想选择。

希望这可以帮助某人更接近解决方案！

瑞安

于 2015-02-17T18:30:51.303 回答
0

使用引导程序测试https://jsfiddle.net/bababalcksheep/gsf2r1v4/17/

我通过在似乎可以正常工作之前修改dataTables.colReorder.js函数来添加此代码， 但只有一个问题。长列很难捕捉到下一个短列。_fnMouseMovethis.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);
于 2016-03-12T11:27:18.673 回答