Tabulator初始化中HTMLDivelement的元素instanceof为false

问题描述

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

我正在从本机JS（GWT的ScriptInjector附带的文件）创建制表器。这是我的代码：

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

因为“ 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中进行该检查，以后再遇到麻烦的可能性有多大？

解决方法

您似乎在其中传递了一个冗余的jquery选择器。您最好将选择器查询字符串直接传递到Tabulator中，然后让它为您找到元素：

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

应该是

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

正确使用Tabulator.js可以在我们的应用程序中正常工作。我现在无法重现最初的问题。

但是，请注意我帖子中的“更宽容”初始化。如果将“未定义的”元素传递给Tabulator并不会失败，但是当然会导致稍后在rtlCheck中失败。

gwt html javascript tabulator