ShinyR中如何在DT数据表内实现“其他”选项关联文本输入？

当然可以实现这个需求！下面是一个完整的可运行示例，结合Shiny、DT和JavaScript来达成你想要的效果——当用户在DT表格的下拉选单中选中「other」选项时，自动显示对应的文本输入框来收集自定义内容，选中其他选项时则隐藏输入框。

完整代码示例 #

library(shiny)
library(DT)

answer_options <- c("reading", "swimming", "cooking", "hiking", "binge-watching series", "other")
question2 <- "What hobbies do you have?"

shinyApp(
  ui = fluidPage(
    h2("Questions"),
    p("Please answer the question below."),
    DT::dataTableOutput('hobby_table'),
    # 用于展示收集到的数据（可选，方便测试）
    verbatimTextOutput("collected_data")
  ),
  server = function(input, output) {
    
    # 构造DT表格的初始数据
    df <- data.frame(
      Question = question2,
      Response = "",
      Custom_Response = "",
      stringsAsFactors = FALSE
    )
    
    output$hobby_table <- DT::renderDataTable({
      DT::datatable(df,
                    editable = list(target = 'cell', disable = list(columns = c(0))), # 仅允许编辑Response和Custom_Response列
                    options = list(
                      dom = 't', # 只显示表格，隐藏其他控件
                      columnDefs = list(
                        # 定义Response列为下拉选单
                        list(
                          targets = 1,
                          render = JS(
                            "function(data, type, row, meta) {
                               if(type === 'display') {
                                 var select = '<select class=\"response-select\">';
                                 var options = ['reading', 'swimming', 'cooking', 'hiking', 'binge-watching series', 'other'];
                                 for(var i=0; i<options.length; i++) {
                                   select += '<option value=\"' + options[i] + '\"' + 
                                     (data === options[i] ? ' selected' : '') + '>' + options[i] + '</option>';
                                 }
                                 select += '</select>';
                                 return select;
                               }
                               return data;
                             }"
                          )
                        ),
                        # 初始隐藏Custom_Response列
                        list(
                          targets = 2,
                          visible = FALSE
                        )
                      ),
                      # 添加JavaScript回调，监听下拉选单变化
                      initComplete = JS(
                        "function(settings, json) {
                           var table = settings.oInstance.api();
                           // 监听所有下拉选单的change事件
                           table.$('.response-select').on('change', function() {
                             var row = table.row($(this).closest('tr')).index();
                             var value = $(this).val();
                             // 更新Response单元格的值
                             table.cell(row, 1).data(value).draw();
                             // 根据选项显示/隐藏Custom_Response输入框
                             if(value === 'other') {
                               table.column(2).visible(true);
                               // 确保输入框可编辑
                               table.cell(row, 2).edit();
                             } else {
                               table.column(2).visible(false);
                               // 清空自定义内容
                               table.cell(row, 2).data('').draw();
                             }
                           });
                         }"
                      )
                    ),
                    escape = FALSE # 允许渲染HTML元素
      )
    })
    
    # 监听表格编辑事件，收集数据
    output$collected_data <- renderPrint({
      req(input$hobby_table_cell_edit)
      edit_info <- input$hobby_table_cell_edit
      # 更新数据框（DT列索引从0开始，R的data.frame从1开始）
      df[edit_info$row, edit_info$col + 1] <- edit_info$value
      
      cat("收集到的信息：\n")
      cat("问题：", df$Question, "\n")
      cat("选择的爱好：", df$Response, "\n")
      if(df$Response == "other") {
        cat("自定义爱好：", df$Custom_Response, "\n")
      }
    })
  }
)

关键功能说明 #

• 下拉选单构造：通过DT的render选项，在Response列渲染自定义的下拉选单，包含你指定的所有选项。
• 动态显示/隐藏输入框：利用initComplete回调函数，监听下拉选单的change事件，当选中「other」时，显示Custom_Response列并触发单元格编辑；选中其他选项时隐藏该列并清空内容。
• 数据收集：通过input$hobby_table_cell_edit监听表格的编辑事件，实时更新并展示收集到的数据，你可以根据需求将数据保存到数据库或文件中。

内容的提问来源于stack exchange，提问作者mizzlosis