在 R Shiny 的数据表中添加工具提示答案

【问题标题】：Add tool tip in a datatable in R Shiny在 R Shiny 的数据表中添加工具提示
【发布时间】：2017-05-20 23:12:05
【问题描述】：

我正在尝试使用 JS 脚本 attr 函数添加工具提示，某些编写的脚本没有给出预期的结果（为数据表的第一列添加工具提示）。就像我一样新的 JS 脚本无法调试错误，谁能告诉我为什么下面的代码没有给我正确的结果。这是一段代码：

library(shiny)
library(DT)

shinyApp(
ui = fluidPage(

DT::dataTableOutput("table2")

),
server = function(input, output) {

output$table2<-DT::renderDataTable({
  responseDataFilter2_home<-iris[,c(4,3,1)]
  displayableData<-as.data.frame(responseDataFilter2_home, stringAsFactors = FALSe, row.names = NULL)
},server = TRUE, selection = 'single',callback = JS("table.on('dblclick.dt', 'td', function(nRow, aData){
                                                         var row=table.cell(this).index().row;
                                                        var full_text = aData[1] + ','+ aData[2]
                                                        $('td:eq(1)', nRow).attr('title', full_text);
                                                         Shiny.onInputChange('rows_home',[row, Math.random()]);});
                                                         table.on('click.dt', 'td', function(nRow, aData) {
                                                         var k=table.cell(this).index().row;
                                                        var full_text = aData[1] + ','+ aData[2]
                                                        $('td:eq(1)', nRow).attr('title', full_text);
                                                         if(table.rows('.selected').indexes().toArray()!= '' && table.rows('.selected').indexes().toArray() ==k){
                                                         k=-1;}
                                                         Shiny.onInputChange('rows_up_home',[k, Math.random()]);
                                                         });"),
escape=FALSE,options=list(paging=FALSE,searching = FALSE,ordering=FALSE,scrollY = 400,scrollCollapse=TRUE,
                          columnDefs = list(list(width = '800%', targets = c(1)))),rownames=FALSE,colnames="Name")

}
)

【问题讨论】：

您能否解释一下您想要在工具提示中显示的内容？
@SBista 我试图连接 col1 和 col2 并通过保持 JS 脚本的其他部分保持不变，因为它们是为其他一些功能设计的。

标签： javascript r shiny dt

【解决方案1】：

我已经用我在link 中给出的答案修改了您的代码，以便您在不影响 JS 代码的其他部分的情况下获得工具提示：

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(

    DT::dataTableOutput("table2")

  ),
  server = function(input, output) {

    output$table2<-DT::renderDataTable({
      responseDataFilter2_home<-iris[,c(4,3,1)]
      displayableData<-DT::datatable(data = as.data.frame(responseDataFilter2_home, stringAsFactors = FALSE, row.names = NULL),rownames = FALSE,
                                     escape = FALSE, selection = 'single', callback =  JS("table.on('dblclick.dt', 'td', function(nRow, aData){
                                                         var row=table.cell(this).index().row;
                                                        var full_text = aData[1] + ','+ aData[2]
                                                        $('td:eq(1)', nRow).attr('title', full_text);
                                                        Shiny.onInputChange('rows_home',[row, Math.random()]);});
                                                        table.on('click.dt', 'td', function(nRow, aData) {
                                                        var k=table.cell(this).index().row;
                                                        var full_text = aData[1] + ','+ aData[2]
                                                        $('td:eq(1)', nRow).attr('title', full_text);
                                                        if(table.rows('.selected').indexes().toArray()!= '' && table.rows('.selected').indexes().toArray() ==k){
                                                        k=-1;}
                                                        Shiny.onInputChange('rows_up_home',[k, Math.random()]);
                                                        });"),

                                     options = list(rowCallback = JS(
                                       "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
                                       "var full_text = aData[0] + ','+ aData[1];",
                                       "$('td:eq(0)', nRow).attr('title', full_text);",
                                       "}"),paging=FALSE,searching = FALSE,ordering=FALSE,scrollY = 400,scrollCollapse=TRUE,
                                       columnDefs = list(list(width = '800%', targets = c(1))),colnames="Name") )


    })

    })

希望对你有帮助！

【讨论】：

谢谢。它有助于。再多一个查询 - 显示的表格有 3 个列 - 4,3,1。现在，如果我需要在 col1 上使用 col 2 和 col 5 的工具提示，那么可以解决什么问题。实际表将仅显示 col-4,3,1，但工具提示的串联将具有 2 和 5。以 iris 表为例。
由于您只提取了第 4,3 和 1 列的数据，因此数据表将无法访问第 2 和 5 列的值。为此，我想最好的方法是在显示时隐藏不需要的列，而不是将列从iris 提取到responseDataFilter2_home。
谢谢。知道了。要动态隐藏列，我们可以添加以下代码 - columnDefs = list(list(width = '800%', visible=FALSE, targets=c(3,4)))

【解决方案2】：

您可以从这个最小的工作示例开始：

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(

    DT::dataTableOutput("table2")

  ),
  server = function(input, output) {

    output$table2<-DT::renderDataTable({
      responseDataFilter2_home<-iris[,c(4,3,1)]
      displayableData<-DT::datatable(responseDataFilter2_home,options = list(rowCallback = JS(
        "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
        "var full_text = aData[1] + ','+ aData[2]",
        "$('td:eq(1)', nRow).attr('title', full_text);",
        "}")
      ))#, stringAsFactors = FALSe, row.names = NULL)
    },server = TRUE, selection = 'single', escape=FALSE,options=list(paging=FALSE,searching = FALSE,ordering=FALSE,scrollY = 400,scrollCollapse=TRUE,
                          columnDefs = list(list(width = '800%', targets = c(1)))),rownames=FALSE,colnames="Name")

    }
 )

【讨论】：

感谢您的建议。当我尝试将其与作为现有代码一部分的现有 JS 元素集成时。工具提示不起作用。这就是我的原始代码的问题 - 其他东西有效，但工具提示无效。有什么解决方法吗？
除了添加工具提示之外，您还想做什么？
你的代码可以很好地用于工具提示，但我需要将工具提示与已经编写的 JS 脚本集成在一起，因为我遇到了问题。感谢您的努力。