如何在 Tabulator JS 中使用 querySelector

Question

我正在尝试 TabulatorJS 5.2。 为了建表。

我面临的问题我不知道它为什么存在。 但是在构建表之后我试图查询选择它但没有结果回来。 如果我选择主表，我可以看到该表。 构建表格后如何获取表格的元素。

在这里，我尝试使用表 id 来控制台记录表

console.log( document.querySelector('#example-table') )

控制台结果：-

所以显然我可以得到主表查询。

如果我使用jquery ..

console.log( $('#example-table') )

我可以列出孩子们

但是，如果我尝试查询标题等内部元素，我没有得到任何结果！

console.log( $('.tabulator-header') )

我是新来的。 那么我在这里缺少什么？

Answer 1

在尝试查询其元素之前，您必须等待制表表构建完成。 Tabulator 有一个tableBuilt事件，您可以使用它来确保在与表格交互之前，表格在 DOM 中可用。 举个例子。 第一个console.log会给你null 。 tableBuilt事件中的第二个将为您提供所需的结果。

 let tableData = [ {id:1, name:"Billy Bob", age:"12"}, {id:2, name:"Mary May", age:"1"}, ] var table = new Tabulator("#example-table", { data:tableData, //set initial table data columns:[ {title:"Name", field:"name"}, {title:"Age", field:"age"} ] }) console.log(document.querySelector('.tabulator-header')) table.on("tableBuilt", () => { console.log(document.querySelector('.tabulator-header')) })

 <link href="https://unpkg.com/tabulator-tables@5.2.7/dist/css/tabulator.min.css" rel="stylesheet"> <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.2.7/dist/js/tabulator.min.js"></script> <div id="example-table"></div>