javascript - 悬停标题而不是固定标题
问题描述
我正在处理这个问题。我尝试了一些 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')))
})
}
)
当我执行那个额外的步骤时,我既没有得到错误,也没有呈现数据表。
我正在寻找:能够混合使用 rowCalllback 和 Styleinterval 或者一般来说,一个更好的解决方案,让用户知道他在大型数据表上的确切位置。
先感谢您。
解决方案
我会以这种方式做工具提示:
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);",
" }",
" }",
"}")))
)
推荐阅读
- c++ - 如何在 C++ 中为 if 和 else 语句定义新的行为
- python - 将文件从服务帐户转移到常规帐户
- html - 无法展开导航栏
- decision-tree - 如何在 h2o 中使用决策树算法?
- laravel - 如何在 env 文件中安全保存密码 - Laravel
- firebase - Flutter如何使用Future返回值作为变量
- java - 无法使用弹性搜索构建 Spring Boot 应用程序
- jquery - 与 Datatable 功能交互后,表格正在清空
- typescript - 如何理解 TS 代码解析的结果?
- android - 使用 Android 加速度传感器进行距离测量