Tabulator 4.2 - 如何从 div 元素 id 获取表格对象答案

【问题标题】：Tabulator 4.2 - How do I get the table object from the div element idTabulator 4.2 - 如何从 div 元素 id 获取表格对象
【发布时间】：2019-05-13 21:52:16
【问题描述】：

在文档中的示例中，我被告知可以使用

table.selectRow(1);

在表格中选择 data.id = 1 的行。

但是如果我不知道表对象是什么——我如何从包含的 div 访问表对象？即

$('#divMyTabulatorDiv).someMethod().someOtherMethod().table

我需要使用哪些方法/属性从 HTML 元素的 id 访问 Tabulator 网格的表格组件？

【问题讨论】：

标签： javascript html tabulator

【解决方案1】：

您可以使用 Tabulator 原型上的 findTable 函数查找表，传入表的查询选择器或 DOM 节点：

var table = Tabulator.prototype.findTable("#example-table")[0]; // find table object for table with id of example-table

findTable 函数将返回匹配表的数组。如果没有找到匹配，它将返回false

详情请见Tabulator Options Documentation

【讨论】：

这应该是公认的答案！毕竟是 Tabulator 的创造者自己回答的。

【解决方案2】：

table 是您创建的对象，它是纯 Javascript 驱动的，不需要 Html 选择

const tabledata1 = [{
    id: 1,
    name: "Oli ",
    money: "0",
    col: "red",
    dob: ""
  },
  {
    id: 2,
    name: "Mary ",
    money: "0",
    col: "blue",
    dob: "14/05/1982"
  },
  {
    id: 3,
    name: "Christine ",
    money: "0",
    col: "green",
    dob: "22/05/1982"
  },
  {
    id: 4,
    name: "Brendon ",
    money: "0",
    col: "orange",
    dob: "01/08/1980"
  },
  {
    id: 5,
    name: "Margret ",
    money: "0",
    col: "yellow",
    dob: "31/01/1999"
  },
];

const col1 = [ //Define Table Columns
  {
    title: "Name",
    field: "name",
    width: 150
  },
  {
    title: "money",
    field: "money",
    align: "left",
    formatter: "money"
  },
  {
    title: "Favourite Color",
    field: "col"
  },
  {
    title: "Date Of Birth",
    field: "dob",
    sorter: "date",
    align: "center"
  },
];


const table = new Tabulator("#example-table", {
  data: tabledata1, //assign data to table
  layout: "fitColumns", //fit columns to width of table (optional)
  columns: col1,
  selectable: true,

});



$('#selectRow').click(function() {
  table.selectRow(1);
});

<!DOCTYPE html>
<html lang="en">

<script src="https://unpkg.com/tabulator-tables@4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.2.4/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id="example-table"></div>

  <button id="selectRow">Select Row 1</button>



</body>

</html>

【讨论】：

我认为问题是如何在给定它呈现的 div 元素的情况下获取 table-object。如果您不想污染全局命名空间但仍想稍后访问该表，如果 Tabulator 展示某种 HTMLElement -> Table Lookup，那就太好了。

【解决方案3】：

您可以使用Tabulator.prototype.findTable(querySelector)（我不知道这是在哪个版本中添加的，但它存在于 4.5 和 4.6 中）来获取与 querySelector 匹配的制表符数组。 querySelector 是document.querySelectorAll 的任何有效字符串。

https://jsfiddle.net/s60qL1hw/2/

const myTable = new Tabulator("#example-table1");

const findTable = Tabulator.prototype.findTable("#example-table1");

alert('Tables are the same?\n' + (myTable === findTable[0])); // true

一旦变量中有表格对象，就可以按照文档显示的方式使用它。

【讨论】：

【解决方案4】：

从 v5 开始，制表器有一种更直接的方式来使用 css 选择器获取表格对象。如果你的制表符 div 是这样的：

<div id="tabulator1"></div>

然后您可以通过以下方式将制表符 obj 放入变量中：

let table = Tabulator.findTable("#tabulator1")[0];

在此之后，我可以获取数据、进行更改等：

let data = table.getData();

参考：http://tabulator.info/docs/5.0/options#find-table

【讨论】：