使用jsTreeR的grid参数时init.ts出错

Question

我已经在这里和这里提出了这个问题。到目前为止，已经存在解决方法，但是，我仍然不明白根本原因。

使用最新 CRAN 版本的

library(shiny)

和

library(jsTreeR)

(2.5.0) 运行以下应用程序时调整浏览器窗口大小后可以在浏览器控制台中看到此错误：

示例应用程序：

library(jsTreeR)
library(shiny)

nodes <- list(
  list(
    text = "Fruits",
    type = "fruit",
    children = list(
      list(
        text = "Apple",
        type = "fruit",
        data = list(
          quantity = 20
        )
      ),
      list(
        text = "Banana",
        type = "fruit",
        data = list(
          quantity = 31
        )
      ),
      list(
        text = "Grapes",
        type = "fruit",
        data = list(
          quantity = 34
        )
      )
    ),
    state = list(
      opened = TRUE
    )
  )
)

grid <- list(
  columns = list(
    list(
      width = 200,
      header = "Product"
    ),
    list(
      width = 150,
      value = "quantity",
      header = "Quantity"
    )
  )
)

ui <-   fluidPage(
  titlePanel("jsTree grid"),
  jstreeOutput("jstree")
)

server <-   function(input, output, session){
  output$jstree <- renderJstree(jstree(nodes, search = TRUE, grid = grid))
}

shinyApp(ui, server)

仅当

jstree

与

grid

参数一起提供时才会出现这种情况。

@StéphaneLaurent 确定 类

shiny-bound-output

被分配给

jstree-grid-wrapper

div，这导致了问题，并且删除它可以防止错误。

我想了解为什么首先添加此类，以及是否有正确的方法来实现

grid

参数而不会遇到此问题。

Answer 1

我认为答案就在文件 jstreegrid.js 中，在

ready.jstree

事件的监听器中，代码从第 493 行开始：

.on(
  "ready.jstree",
  $.proxy(function (e, data) {
    // find the line-height of the first known node
    var anchorHeight = this.element
        .find("[class~='jstree-anchor']:first")
        .outerHeight(),
      q,
      cls = this.element.attr("class") || "";
    $(
      '<style type="text/css">div.jstree-grid-cell-root-' +
        this.rootid +
        " {line-height: " +
        anchorHeight +
        "px; height: " +
        anchorHeight +
        "px;}</style>"
    ).appendTo("head");

    // add container classes to the wrapper - EXCEPT those that are added by jstree, i.e. "jstree" and "jstree-*"
    q = cls.split(/\s+/).map(function (i) {
      var match = i.match(/^jstree(-|$)/);
      return match ? "" : i;
    });
    this.gridWrapper.addClass(q.join(" "));
  }, this)
);

在此代码中，

cls = this.element.attr("class")

是由属于树的所有类组成的字符串，并用空格分隔。然后

q = cls.split(/\s+/).map(...

是除

jstree

类和以

jstree-

开头的类之外的所有类的数组，然后将这些类添加到网格（

jstree-grid-wrapper

div）中。然后我看到两种可能性：

• 在这个阶段，树已经有了

  shiny-bound-output

  类，然后将其添加到网格中；

• 或者树还没有

  shiny-bound-output

  类，但它具有

  jstreer

  类，然后 htmlwidgets 将类

  shiny-bound-output

  添加到具有

  jstreer

  类的所有元素。