阅读 R Shiny DT 数据表中长文本的更多按钮

我想在我的 R Shiny DT 数据表中包含“阅读更多”和“阅读更少”按钮，用于具有溢出/长文本的单元格。

这个精彩的答案 https://stackoverflow.com/a/51242920/4892627作者：Devansh J 在纯 CSS / javascript 数据表中演示了此功能。您可以单击“运行代码片段”按钮来查看它的运行情况。

不幸的是，我很难在闪亮的应用程序中获得相同的结果。我还查看了其他答案，1 https://stackoverflow.com/questions/70996172/how-can-i-add-read-more-and-read-less-functionality-for-long-text-in-r-shiny and 2 https://www.w3schools.com/howto/howto_js_read_more.asp，但它们并没有让我更接近闪亮上下文中数据表的解决方案。希望一辉能够挺身而出，拯救世界！

这是一个可以从文本溢出按钮中受益的 MWE。

library(shiny)
library(DT)
library(shinipsum)

text_df = data.frame(
  numbers = 1:3,
  letters = LETTERS[1:3],
  text = c("Lorem", substr(shinipsum::lorem, 1, 100), substr(shinipsum::lorem, 1, 5000))
)

# Define UI for application that draws a histogram
ui <- fluidPage(
  dataTableOutput("text_table")
)

# Define server logic required to draw a histogram
server <- function(input, output) {
   output$text_table = renderDataTable({
     datatable(text_df)
   })
}

shinyApp(ui = ui, server = server)

确实非常酷。不需要闪亮。

library(DT)
library(shinipsum)

text_df <- data.frame(
  numbers = 1:3,
  letters = LETTERS[1:3],
  text    = c(
    "Lorem", 
    substr(shinipsum::lorem, 1, 100), 
    substr(shinipsum::lorem, 1, 5000)
  )
)

js <- "
function(cell) {
  var $cell = $(cell);
  $cell.contents().wrapAll('<div class=\\\"content\\\"></div>');
  var $content = $cell.find('.content');
  $cell.append($('<button>Read more</button>'));
  $btn = $cell.find('button');
  $content.css({
    height: '50px',
    overflow: 'hidden'
  });
  $cell.data('isLess', true);
  $btn.click(function () {
    var isLess = $cell.data('isLess');
    $content.css('height', isLess ? 'auto' : '50px');
    $(this).text(isLess ? 'Read less' : 'Read more');
    $cell.data('isLess', !isLess);
  });
}
"
datatable(
  text_df,
  rownames = FALSE,
  options = list(
    "columnDefs" = list(
      list(
        "targets" = 2,
        "createdCell" = JS(js)
      )
    )
  )
)

您可以使用具有五个参数的函数createdCell:

function(cell, cellData, rowData, rowIndex, cellIndex) {

然后你可以做例如if(rowIndex > 0)跳过第一行，或者if(cellData.length > 100)以包含超过 100 个字符的目标单元格。