代码之家 › 专栏 › 技术社区 › Nadrieci

悬停标题而不是固定标题

dt shiny r javascript

Nadrieci · 技术社区 · 6 年前

我正在处理这个问题 issue . 我试过一些CSS解决方案,但没能解决。

我最后决定将每个单元格悬停,以便显示行名称(第一列)和列名称(标题)。

下面的代码实现了这个技巧 ,

shinyApp(
  ui = fluidPage(
    DT::dataTableOutput("mtcarsTable")
  ),
  server = function(input, output) {

    output$mtcarsTable <- DT::renderDataTable({
      DT::datatable(datasets::mtcars[,1:3], 
                    extensions = c('FixedColumns'), selection=list(mode="single", target="cell"), class = 'cell-border stripe', escape = F ,
                    options = list(rowCallback = JS(
                      "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
                      "var full_text = aData[0] + ','+ aData[1];",
                      "var headers = Array.prototype.slice.apply(document.querySelectorAll('th'));",
                      "$('td', nRow).each(function(i) {
                      this.title = [aData[0], headers[i].innerText].filter(Boolean).join(', ');
    });",
                      "}")
                    )
                    )
    })
  }
)

不幸的是,这似乎与FormatStyle不兼容:

shinyApp(
  ui = fluidPage(
    DT::dataTableOutput("mtcarsTable")
  ),
  server = function(input, output) {

    output$mtcarsTable <- DT::renderDataTable({
      DT::datatable(datasets::mtcars[,1:3], 
                    extensions = c('FixedColumns'), selection=list(mode="single", target="cell"), class = 'cell-border stripe', escape = F ,
                    options = list(rowCallback = JS(
                      "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
                      "var full_text = aData[0] + ','+ aData[1];",
                      "var headers = Array.prototype.slice.apply(document.querySelectorAll('th'));",
                      "$('td', nRow).each(function(i) {
                      this.title = [aData[0], headers[i].innerText].filter(Boolean).join(', ');
    });",
                      "}")
                    )
                    ) %>%
        formatStyle(columns = 1,  backgroundColor = styleInterval(c(19,20,22), c('red','green','yellow', 'black')))
    })
  }
)

当我执行这个额外的步骤时,既没有得到错误,也没有得到呈现的数据表。

我要寻找的是:能够混合rowcallback和styleinterval,或者一般来说,一个更好的解决方案,让用户知道他在大型数据表上的确切位置。

提前谢谢。

1 回复 | 直到 6 年前

Stéphane Laurent 6 年前

library(DT)

datatable(head(iris), 
          options=list(initComplete = JS(c(
            "function(settings){",
            "  var table = settings.oInstance.api();",
            "  var ncols = table.columns().count();",
            "  var nrows = table.rows().count();",
            "  for(var i=0; i<nrows; i++){",
            "    var rowname = table.cell(i,0).data();",
            "    for(var j=1; j<ncols; j++){",
            "      var headerName = table.column(j).header().innerText;",
            "      var cell = table.cell(i,j);",
            "      cell.node().setAttribute('title', rowname + ', ' + headerName);",
            "    }",
            "  }",
            "}")))
)