在闪亮的 r 中渲染 javascript 组件（ag-grid）

Question

我正在尝试将他们网站上最基本的 ag-grid 示例包含在 R-shiny 应用程序中，从那里开始，我将添加越来越多的内容，尝试在数据编辑上设置适当的通信前端-后端。但是我坚持包含的基础知识。该组件包含在源代码中但未呈现：

这是来自 ag-grid 网站的基本示例： https://plnkr.co/edit/nmWxAxWONarW5gj2?p=preview%3Fp%3Dpreview&preview

这是我的 R-Shiny 应用程序

library(shiny)
library(tidyverse)

ui <- fluidPage(
  #This tells shiny to include both css and scripts of aggrid
  tags$script(src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"),
  titlePanel("Ag-Grid Basic Example"),
  uiOutput("myGrid")
)

server <- function(input, output, session) {
  #This tells shiny to run our javascript file "script.js" and send it to the UI for rendering
  output$myGrid<- renderUI({
    HTML('<script type="text/javascript", src="script.js">  </script>')
  })
}
shinyApp(ui = ui, server = server)

我在 www 文件夹中有 script.js，它是上面链接示例中 main.js 内容的简单复制粘贴。

const columnDefs = [
  { field: "make" },
  { field: "model" },
  { field: "price" }
];

// specify the data
const rowData = [
  { make: "Toyota", model: "Celica", price: 35000 },
  { make: "Ford", model: "Mondeo", price: 32000 },
  { make: "Porsche", model: "Boxster", price: 72000 }
];

// let the grid know which columns and what data to use
const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', () => {
    const gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
});

关于如何进行的任何提示？不幸的是，控制台没有告诉我任何相关信息，css cdn 和本地脚本被正确读取，但由于某些原因它没有呈现输出。

Answer 1

你不想直接在renderUI里面用东西直接修改uiOutput容器。
table 容器必须有一些初始高度和宽度。
由于这是在 renderUI 事件中文档准备就绪后加载的，因此不应使用 addEventListener('DOMContentLoaded'。文档不会再次就绪，因此不会触发此侦听器。

library(shiny)
library(tidyverse)
ui <- fluidPage(
    #This tells shiny to include both css and scripts of aggrid
    tags$script(src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"),
    titlePanel("Ag-Grid Basic Example"),
    uiOutput("myGrid_container")
)

server <- function(input, output, session) {
    #This tells shiny to run our javascript file "script.js" and send it to the UI for rendering
    output$myGrid_container<- renderUI({
        tagList(
            div(id = "myGrid", style="height: 200px; width:500px;", class="ag-theme-alpine"),
            tags$script(src="script.js")
        )
    })
}

shinyApp(ui = ui, server = server)

const columnDefs = [
  { field: "make" },
  { field: "model" },
  { field: "price" }
];

// specify the data
const rowData = [
  { make: "Toyota", model: "Celica", price: 35000 },
  { make: "Ford", model: "Mondeo", price: 32000 },
  { make: "Porsche", model: "Boxster", price: 72000 }
];

// let the grid know which columns and what data to use
const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData
};

// setup the grid after the page has finished loading
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);

在闪亮的 r 中渲染 javascript 组件（ag-grid）

render javascript component (ag-grid) in r shiny

javascript

r

shiny

ag-grid