首页 > 解决方案 > HTMLDivelement 的元素实例在制表符初始化中为假

问题描述

我想在旧版 GWT 应用程序中使用 Tabulator。

我正在从本机 JS(GWT 的 ScriptInjector 中包含的一个文件)创建 Tabulator。这是我的代码:

      const table = new Tabulator($(".tabulatordiv_id")[0], {
        data:tabledata, //assign data to table
        layout:"fitColumns", //fit columns to width of table (optional)
        columns: [{title:"Name", field:"name"}]
      });

我收到错误消息:“制表符创建错误 - 提供的元素无效”。

我查看了 Tabulator 并发现它停在这里:

Tabulator.prototype.initializeElement = function (element) {
    if (typeof HTMLElement !== "undefined" && element instanceof HTMLElement) {
        this.element = element;
        return true;
    } else if (typeof element === "string") {
        this.element = document.querySelector(element);
        if (this.element) {
            return true;
        } else {
            console.error("Tabulator Creation Error - no element found matching selector: ", element);
            return false;
        }
    } else {
        console.error("Tabulator Creation Error - Invalid element provided:", element);
        return false;
    }
};

因为“element instanceof HTMLElement”是 FALSE。

我从旧版应用程序中拉出页面并使其尽可能与原始应用程序相似(拉入相同的 js 库、GWT js 文件等)以重现问题,但失败了。我无法在旧版应用程序之外重现它。

但是,如果我将 Tabulator.js 中的 init 更改为更宽松一点,如下所示:

//      if (typeof HTMLElement !== "undefined" && element instanceof HTMLElement) {
        if (typeof HTMLElement !== "undefined" && typeof element !== "string") {
        this.element = element;

然后它工作。

我很确定我传递给 Tabulator 的是一个 HTMLElement(在浏览器中双重检查,具有 HTMLElement 应该具有的所有属性)。

所以我想问一下“instanceof HTMLElement”检查的基数是多少?如果我在 Tabulator init 中进行检查,我以后遇到麻烦的可能性有多大?

标签: javascripthtmlgwttabulator

解决方案


您似乎在那里传递了一个冗余的 jquery 选择器。您不妨将选择器查询字符串直接传递到 Tabulator 并让它为您找到元素:

 const table = new Tabulator($(".tabulatordiv_id")[0], {

应该

 const table = new Tabulator(".tabulatordiv_id", {

推荐阅读