Início / coding / Perguntas / 77993697
Accepted
ismirsehregal
Asked: 2024-02-14 18:44:45 +0800 CST

Erro em init.ts ao usar o parâmetro de grade do jsTreeR

  • 772

Já levantei a questão aqui e aqui . Até agora existe uma solução alternativa , mas ainda não entendo a causa raiz.

Ao executar o seguinte aplicativo usando a versão mais recente do CRAN library(shiny)e library(jsTreeR)(2.5.0) após redimensionar a janela do navegador, esse erro pode ser visto no console do navegador:

imagem

Aplicativo de exemplo:

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)

Este é apenas o caso quando jstreeé fornecido com o gridparâmetro.

@StéphaneLaurent identificou que a classe shiny-bound-outputestá atribuída ao jstree-grid-wrapperdiv que causa o problema e que removê-la evita o erro.

Gostaria de entender por que essa classe foi adicionada e se existe uma maneira adequada de implementar o gridparâmetro sem encontrar esse problema.

1 respostas

  1. Best Answer

    Acho que a resposta está no arquivo jstreegrid.js , no listener do ready.jstreeevento, código começando na linha 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)
);

    Neste código, cls = this.element.attr("class")é a sequência de caracteres composta por todas as classes atribuídas à árvore, separadas por um espaço em branco. Em seguida q = cls.split(/\s+/).map(..., é o array de todas essas classes, exceto a jstreeclasse e as classes iniciadas com jstree-, e essas classes são então adicionadas à grade (a jstree-grid-wrapperdiv). E então vejo duas possibilidades:

    • nesta fase, a árvore já possui a shiny-bound-outputclasse, que então é adicionada à grade;

    • ou a árvore ainda não tem a shiny-bound-outputclasse, mas tem a classe jstreer, e então o htmlwidgets adiciona a classe shiny-bound-outputa todos os elementos que possuem a jstreerclasse.

    Editar

    Acabei de verificar e a árvore tem as duas classes shiny-bound-outpute jstreerneste estágio.

    Uma possível solução é modificar o jstreegrid.js para que ele não copie essas classes para a grade. Na verdade não vejo outra solução.

    • 1

relate perguntas