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

Question

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

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

table.selectRow(1);

Run Code Online (Sandbox Code Playgroud)

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

dot*_*pro 0

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

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，9 月前
查看次数：	4186 次
最近记录：	4 年，1 月前