DataTables ColReorder當頁眉滾動接近邊界時滾動

我對從各種ASP數據庫收集的大量數據使用DataTables。另外，我正在使用以下DataTables插件： FixedHeaders，FixedColumns，ColReorder。DataTables ColReorder當頁眉滾動接近邊界時滾動

現在，通過ColReorder函數，當一個頭部（實際上是一列）被拖拽重新排序並溢出到兩側時（水平滾動），我希望表格滾動到一邊，這樣該列不僅可以拖動到表格的查看區域，還可以拖到整個表格中。

我已經嘗試了很多方法和步驟，例如試圖使光標靠近邊界時使其滾動（如「Drag Scrolls」http://javascriptmvc.com/docs.html#!jQuery.Drag），但我沒有成功，以及此方法 - http://mootools.net/docs/more/Interface/Scroller 。

我將非常感謝您的幫助。謝謝大家提前。

來源

2013-07-22 user2607009

這是一種可能讓你更接近解決問題的方法。根據我的實驗，您可以在this.dom.drag.css(...)代碼之前複製和修改函數_fnMouseMove中的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);

如果決定這種方法，你會更好長期以建立一個擴展/插件而不是修改核心代碼。這僅僅是爲了實驗目的。

我開始了這條道路，但相信我會做我自己的重新排序接口，因爲這種方法，即使正常工作和滾動，對於我正在開發的項目來說也不是那麼理想。

希望這可以幫助有人更接近解決方案！

瑞安

來源

2015-02-17 18:30:51 ryanm

測試與引導https://jsfiddle.net/bababalcksheep/gsf2r1v4/17/

我加入這個代碼通過修改功能_fnMouseMovedataTables.colReorder.js只是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);

來源

2016-03-12 11:27:18 django

DataTables ColReorder當頁眉滾動接近邊界時滾動

回答

相關問題