Question

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

table.selectRow(1);

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

但是，如果我不知道表对象是什么，该如何从包含div的表对象中访问呢？

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

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

Answer 1

table是您创建的对象，其纯Java语言驱动，无需选择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>

Answer 2

您可以使用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

在变量中包含表对象后，就可以按文档显示的那样使用它。

Answer 3

您可以在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

中找到

制表符4.2-如何从div元素ID获取表对象

3 个答案: