R 闪亮和制表符

Question

我搜索了“r闪亮制表符”，预计结果多于零。在 R Shiny 应用程序中嵌入制表符是否可能？制表符事件可以发送回 R 吗？

我创建了一个示例制表器。下面的测试应用程序包含我们在另一个应用程序中使用的所有 jQuery 引用，但我不确定 R 中是否需要它们。

从哪里获取它来初始化并显示 tabulatorDiv 中的两行示例数据？

library(shiny)
library(shinyjs)

tabulatorClass <- 
"class AIClass {
    doLoad() {
        const sampleData = [
            { AI: 'Substance2', AIGroup: 'GroupA', Volume: 1.23, Price: 4.56, Included: true },
            { AI: 'Substance1', AIGroup: 'GroupB', Volume: 3.21, Price: 6.54, Included: true },
        ];

        this.aiTableCopy = structuredClone(sampleData);
        this.aiTableCopy.forEach(a => a.newRow = false);

        const aiTableCopyTemp = structuredClone(this.aiTableCopy);

        if (!this.aiTable) {
            this.aiTable = new Tabulator('#tabulatorDiv', {
                columns: [
                    { title: 'AI', field: 'AI', width: 100 },
                    { title: 'AIGroup', field: 'AIGroup', width: 100 },
                    { title: 'Volume', field: 'Volume', width: 100 },
                    { title: 'Price', field: 'Price', width: 100 },
                    { title: 'Included', field: 'Included', width: 75 }
                ],
                initialSort: [{ column: 'AI', dir: 'asc' }],
                data: aiTableCopyTemp
            });
            this.aiTable.on('cellEdited', function (cell) {
                cell._cell.row.data.newRow = false;
                myClass.doSave();
            });
            this.aiTable.on('tableBuilt', function () {
            });
        }
        else {
            this.aiTable.replaceData(aiTableCopyTemp);
        }
    }

    doSave() {
        // how to do this in R Shiny will be the subject of another question
    }
}

const myClass = new AIClass();"

ui <- 
  htmltools::tagList(
    shinyjs::useShinyjs(),
    htmltools::tags$head(
      htmltools::tags$script(src = "https://code.jquery.com/jquery-1.11.3.min.js"), # is this needed?
      htmltools::tags$script(src = "https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"), # is this needed?
      htmltools::tags$link(rel = "stylesheet", type = "text/css", href = "https://unpkg.com/[email protected]/dist/css/tabulator.min.css"),
      htmltools::tags$link(rel = "stylesheet", type = "text/css", href = "https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.3.4/css/tabulator_bootstrap5.min.css"),
      htmltools::tags$script(src = "https://unpkg.com/[email protected]/dist/js/tabulator.min.js"),
      htmltools::tags$script(tabulatorClass)
    ),
    fluidPage(
      div(id = "tabulatorDiv")
    )
)

server <- function(input, output, session) {
  # how to initialize and show Tabulator?
  # myClass.doLoad();
}

shinyApp(ui, server)

Answer 1

查看最新的 Tabulator 示例以及有关 Tabulator 和 jQuery 的问题后，我修改了 jQuery 部分并简化了脚本导入。在 RStudio 中，该脚本确实显示了一个带有两个示例数据行的制表符。数字和复选框列可以编辑。排序工作。并且会触发单元格编辑后事件。

library(shiny)
library(shinyjs)

jQueryScript <- 
"$(document).ready(function() {
  const sampleData = [
      { AI: 'Substance2', AIGroup: 'GroupA', Volume: 1.23, Price: 4.56, Included: true },
      { AI: 'Substance1', AIGroup: 'GroupB', Volume: 3.21, Price: 6.54, Included: false },
  ];

  var table = new Tabulator('#tabulatorDiv', {
        columns: [
            { title: 'AI', field: 'AI', width: 150 },
            { title: 'AIGroup', field: 'AIGroup', width: 150 },
            { title: 'Volume', field: 'Volume', width: 100, editor: true },
            { title: 'Price', field: 'Price', width: 100, editor: true },
            { title: 'Included', field: 'Included', width: 100, hozAlign:'center', editor:true, formatter:'tickCross' },
        ],
        data: sampleData,
    });
    
  table.on('cellEdited', function (cell) {
    //alert() here breaks Tabulator events
    //alert(cell._cell.row.data);
  });
});"

ui <- 
  htmltools::tagList(
    shinyjs::useShinyjs(),
    htmltools::tags$head(
      htmltools::tags$link(rel = "stylesheet", type = "text/css", href = "https://unpkg.com/[email protected]/dist/css/tabulator.min.css"),
      htmltools::tags$script(src = "https://unpkg.com/[email protected]/dist/js/tabulator.min.js"),
      htmltools::tags$script(jQueryScript)
    ),
    fluidPage(
      div(id = "tabulatorDiv")
    )
)

server <- function(input, output, session) {
}

# browser console shows errors, which may be useful in debugging jQueryScript
# shinyApp(ui, server, options = list(launch.browser = TRUE))
shinyApp(ui, server)