主页 / coding / 问题 / 77993697
Accepted
ismirsehregal
Asked: 2024-02-14 18:44:45 +0800 CST

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

  • 772

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

当调整浏览器窗口大小后library(shiny)使用最新的 CRAN 版本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-wrapperdiv 导致了问题，并且删除它可以防止错误。

我想了解为什么首先添加此类，以及是否有适当的方法来实现参数grid而不会遇到此问题。

1 个回答

  1. Best Answer

    我认为答案就在文件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(...之外的所有这些类的数组，然后将这些类添加到网格（div ）中。然后我看到两种可能性：jstreejstree-jstree-grid-wrapper

    • 在这个阶段，树已经有了类shiny-bound-output，然后将其添加到网格中；

    • 或者树还没有类shiny-bound-output，但它有类jstreer，然后htmlwidgets将类添加shiny-bound-output到具有该类的所有元素jstreer。

    编辑

    我刚刚检查过，树在这个阶段有两个shiny-bound-output类jstreer。

    一个可能的解决方案是修改jstreegrid.js，使其不会将这些类复制到网格中。事实上我没有看到任何其他解决方案。

    • 1

相关问题