将鼠标悬停在 DT::datatable 中的单元格上后，在工具提示中显示单元格值

Posted 2023-05-07

【中文标题】将鼠标悬停在 DT::datatable 中的单元格上后，在工具提示中显示单元格值

【英文标题】：Display cell value in tooltip after hovering over a cell in DT::datatable

【发布时间】：2019-02-01 00:38:09

【问题描述】：

在将鼠标悬停在 DT::datatable 中的特定单元格上后，如何利用 javascript 在工具提示中显示单元格值？我决定在达到一定宽度后隐藏长文本 (overflow-x: hidden; white-space: nowrap;) 以保持格式清晰，并且我希望用户在选择将鼠标悬停在给定单元格上时能够看到全文。

datatable(df,
          class="compact",
          selection="none",
          rownames=F,
          colnames=NULL,
          options=list(dom="t",
                       pageLength=10
          ),
          escape=F)

【问题讨论】：

你能提供一个MCVE吗？

【参考方案1】：

这是一个使用新可用插件 ellipsis 的解决方案。

library(DT) # version 0.5

dat <- data.frame(
  A = c("fnufnufroufrcnoonfrncacfnouafc", "fanunfrpn frnpncfrurnucfrnupfenc"),
  B = c("DZDOPCDNAL DKODKPODPOKKPODZKPO", "AZERTYUIOPQSDFGHJKLMWXCVBN")
)

datatable(
  dat, 
  plugins = "ellipsis",
  options = list(
    columnDefs = list(list(
      targets = c(1,2),
      render = JS("$.fn.dataTable.render.ellipsis( 17, false )")
    ))
  )
)

插件文档：https://datatables.net/plug-ins/dataRender/ellipsis

【讨论】：

这很棒。谢谢！

【参考方案2】：

你可以试试这个：

datatable(head(iris), 
          options=list(initComplete = JS("function(settings) var table=settings.oInstance.api(); table.$('td').each(function()this.setAttribute('title', $(this).html()))")))

这会为每个单元格设置一个工具提示。

为单个特定单元格设置工具提示：

datatable(head(iris), 
          options=list(initComplete = JS(
            "function(settings) 
            var table = settings.oInstance.api();
            var cell = table.cell(2,2);
            cell.node().setAttribute('title', cell.data());
            ")))

【讨论】：

是的，第一个解决方案就是它！这为用户提供了一种将鼠标悬停在单元格上并将其完整值视为工具提示的方法。对于包含非常大/长值的列，它会派上用场；我可以通过隐藏多余的字符并允许用户使用工具提示查看完整值（如有必要）来使表格更紧凑。

@DaleKube 仅供参考，ellipsis 插件现已在 DT 的新版本中提供。我还没有尝试过，但它似乎对您的问题有用。