在两个 Tabulator 表格之间同步水平滚动（Tabulator 5）

Question

自 Tabulator 5.0 发布以来，事件和回调发生了变化。对于以前的版本，有一个在两个 Tabulator tables (https://github.com/olifolkerd/tabulator/issues/203)

之间同步滚动的解决方案

我现在的问题是这些 callbacks/events 在 Tabulator 5 中不再存在，但我想要一个类似的解决方案。

我有两个 Tabulator 5 tables 并且想要同步水平滚动。当我滚动一个 table 时，另一个应该做同样的滚动。两个 table 确实具有相同的列定义。

有谁知道我如何在 Tabulator 5 中解决这个问题？

Answer 1

您可以使用 Scroll Horizontal 事件。代码将是：

table1.on('scrollHorizontal',function(left,dir){
  $(".tabulator-tableholder","#table2").scrollLeft(left)
});

table2.on('scrollHorizontal',function(left,dir){
      $(".tabulator-tableholder","#table1").scrollLeft(left)
});

例如：

var tabledata = [{
  id: 1,
  name: "Oli Bob",
  age: "12",
  col: "red",
  dob: ""
}, {
  id: 2,
  name: "Mary May",
  age: "1",
  col: "blue",
  dob: "14/05/1982"
}, {
  id: 3,
  name: "Christine Lobowski",
  age: "42",
  col: "green",
  dob: "22/05/1982"
}, {
  id: 4,
  name: "Brendon Philips",
  age: "125",
  col: "orange",
  dob: "01/08/1980"
}, {
  id: 5,
  name: "Margret Marmajuke",
  age: "16",
  col: "yellow",
  dob: "31/01/1999"
}];
var table1 = new Tabulator("#table1", {
  height: 150,
  data: tabledata,
  layout: "fitColumns",
  columns: [{
    title: "Name",
    field: "name",
    width: 150
  }, {
    title: "Age",
    field: "age",
    hozAlign: "left",
    formatter: "progress"
  }, {
    title: "Favourite Color",
    field: "col"
  }, {
    title: "Date Of Birth",
    field: "dob",
    sorter: "date",
    hozAlign: "center"
  }, {
    title: "Name",
    field: "name",
    width: 150
  }, {
    title: "Age",
    field: "age",
    hozAlign: "left",
    formatter: "progress"
  }, {
    title: "Favourite Color",
    field: "col"
  }, {
    title: "Date Of Birth",
    field: "dob",
    sorter: "date",
    hozAlign: "center"
  }]
});
var table2 = new Tabulator("#table2", {
  height: 150,
  data: tabledata,
  layout: "fitColumns",
  columns: [{
    title: "Name",
    field: "name",
    width: 150
  }, {
    title: "Age",
    field: "age",
    hozAlign: "left",
    formatter: "progress"
  }, {
    title: "Favourite Color",
    field: "col"
  }, {
    title: "Date Of Birth",
    field: "dob",
    sorter: "date",
    hozAlign: "center"
  }, {
    title: "Name",
    field: "name",
    width: 150
  }, {
    title: "Age",
    field: "age",
    hozAlign: "left",
    formatter: "progress"
  }, {
    title: "Favourite Color",
    field: "col"
  }, {
    title: "Date Of Birth",
    field: "dob",
    sorter: "date",
    hozAlign: "center"
  }]
});

table1.on("scrollHorizontal", function(left, dir) {
  $(".tabulator-tableholder", "#table2").scrollLeft(left)
});
table1.on("scrollVertical", function(top, dir) {
  $(".tabulator-tableholder", "#table2").scrollTop(top)
});
table2.on("scrollHorizontal", function(left, dir) {
  $(".tabulator-tableholder", "#table1").scrollLeft(left)
});
table2.on("scrollVertical", function(top, dir) {
  $(".tabulator-tableholder", "#table1").scrollTop(top)
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.1.7/css/tabulator_bootstrap3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.1.7/js/tabulator.min.js"></script>

<div style="width:48%;display:inline-block;">
  <div id="table1"></div>
</div>
<div style="width:48%;display:inline-block;">
  <div id="table2"></div>
</div>

Answer 2

您可以使用 Tabulator 的 scrollHorizontal 事件来同步两个表格之间的水平滚动。例如：

table1.on("scrollHorizontal", (left) => {
  document.querySelector("#table2 .tabulator-tableholder").scrollLeft = left
})

table2.on("scrollHorizontal", (left) => {
  document.querySelector("#table1 .tabulator-tableholder").scrollLeft = left
})

这是一个工作代码笔：https://codepen.io/izmirli/pen/LYeNpYO

在两个 Tabulator 表格之间同步水平滚动（Tabulator 5）

Sync horizontal scroll between two Tabulator tables (Tabulator 5)

javascript

tabulator