gridjs - 如何从 HTML 加载答案

【问题标题】：gridjs - how to load from HTMLgridjs - 如何从 HTML 加载
【发布时间】：2023-01-17 11:59:25
【问题描述】：

我有一个现有的 HTML 表格。我想要一个瘦 JS 库来添加简单的搜索和排序。 GridJS 看起来很有前途，但我不明白docs for loading from HTML。例如，我无法使用 useRef 函数。即使示例中的第一行代码对我来说也失败了：

>>> gridjs.useRef(null)
Uncaught TypeError: Bt is undefined
    Preact 3
    <anonymous> debugger eval code:1

这是一个最小的例子：

<html>
<head>
    <link href='https://unpkg.com/gridjs/dist/theme/mermaid.min.css' rel='stylesheet'>
    <script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
</head>
<body>
    <table id='table'>
        <tr>
            <td>Foo</td>
            <td>Bar</td>
            <td>Baz</td>
        </tr>
    </table>
    <script>
        window.onload = function() {
            var node = document.getElementById('table');
            new gridjs.Grid({'from': node});
        }
    </script>
</body>
</html>

我得到错误

Uncaught TypeError: t.querySelector(...) is null
    fromHTMLTable header.ts:288
    fromUserConfig header.ts:256
    fromUserConfig config.ts:179
    update config.ts:146
    e grid.ts:15
    onload example.html:17
    EventHandlerNonNull* example.html:15

【问题讨论】：

这可能是他们的跟踪器的一个错误：github.com/grid-js/gridjs/issues。它似乎是为了清除 from 输入以呈现到包装器中，但奇怪的是它在清除后尝试读取。据我所知from 完全被窃听了。

标签： javascript gridjs

【解决方案1】：

我知道这个答案来的有点晚，但我希望它能帮助未来的访客。

看起来您仍然需要调用 render 函数，它的工作方式似乎是将表隐藏在 DOM 中并将 Grid.js 表注入您指定的包装器。

例如，这对我有用：

new gridjs.Grid({
    from: document.getElementById('mySourceTable'),
}).render(document.getElementById('myDestinationWrapper'));

最后，我认为需要 thead 和 tbody - 文档也显示了这些元素：From HTML Table

这是一个 sn-p 作为演示：

document.addEventListener("DOMContentLoaded", function() {
  new gridjs.Grid({
    from: document.getElementById('sourceTable')
  }).render(document.getElementById('destinationWrapper'));
});

<html>

<head>
  <link href='https://unpkg.com/gridjs/dist/theme/mermaid.min.css' rel='stylesheet'>
  <script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
</head>

<body>
  <div id='destinationWrapper'></div>
  <table id='sourceTable'>
    <thead>
      <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Foo</td>
        <td>Bar</td>
        <td>Baz</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【讨论】：