DataTables DT:重置单击单元格的值

Posted

技术标签:

【中文标题】DataTables DT:重置单击单元格的值【英文标题】:DataTables DT: reset value of clicked cell 【发布时间】:2017-12-17 08:32:34 【问题描述】:

我想添加单击表格单元格后发生的某些事情的功能(例如打开模式)。因为(假设我的 dt 的 ID 为“dt”)input$dt_cell_clicked 在我单击新单元格之前保持不变,因此我无法在重新单击该单元格时执行相同的事件。

我尝试使用javascript手动重置input$dt_cell_clicked。这可行,但是 DT 中似乎有一个内部更新标记,它注意到我之前单击了单元格并且没有将 input$dt_cell_clicked 的值设置为单击的值。有解决方法还是这是一个错误?

谢谢!

小例子:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  h2("Last clicked:"),
  verbatimTextOutput("last_clicked"),
  actionButton("reset", "Reset clicked value"),
  h2("Datatable:"),
  DT::dataTableOutput("dt"),
  useShinyjs(),
  extendShinyjs(text = paste0("shinyjs.resetDTClick = function()  Shiny.onInputChange('dt_cell_clicked', null); "))
)

server <- function(input, output) 

  # the last clicke value
  output$last_clicked <- renderPrint(
    str(input$dt_cell_clicked)
  )

  output$dt <- DT::renderDataTable(
    DT::datatable(head(mtcars, 2))
  )

  observeEvent(input$dt_cell_clicked, 
    validate(need(length(input$dt_cell_clicked) > 0, ''))
    alert("You clicked something!")
  )

  observeEvent(input$reset, 
    js$resetDTClick()
  )


shinyApp(ui, server)

【问题讨论】:

尝试使用DT::selectRows 取消选择行。 这不是关于行选择,而是关于重置最后点击的值:) 【参考方案1】:

在提示使用代理 (Gregor de Cillia) 之后,我找到了一个使用绕道的解决方法:最后选择的单元格。观察到最后选择的单元格,并在新选择时执行一些操作。我们可以使用 DT 代理重置选择。

library(shiny)

ui <- fluidPage(
  h2("Last clicked:"),
  verbatimTextOutput("last_clicked"),
  actionButton("reset", "Reset clicked value"),
  h2("Datatable:"),
  DT::dataTableOutput("dt")
)

server <- function(input, output) 

  # the last clicked=selected value
  output$last_clicked <- renderPrint(
    str(input$dt_rows_selected)
  )

  output$dt <- DT::renderDataTable(
    DT::datatable(head(mtcars, 2), selection = 'single')
  )

  # do some action after selecting a value
  observeEvent(input$dt_rows_selected, 
    validate(need(!is.null(input$dt_rows_selected), ''))
    print("You clicked something!")
  )

  myProxy = DT::dataTableProxy('dt')

  # reset last selected value using the proxy
  observeEvent(input$reset, 
    DT::selectRows(myProxy, NULL)
  )


shinyApp(ui, server)

【讨论】:

【参考方案2】:

这是一个可以正确重置的版本。它使用一个响应值(称为last),只要按下重置按钮,就会设置为NULL,并在更新此值时采用input$dt_cell_clicked 的值。

我还通过将dataTableProxyselectRows 一起使用从shinyjs 中删除了依赖项

library(shiny)

ui <- fluidPage(
  h2("Last clicked:"),
  verbatimTextOutput("last_clicked"),
  actionButton("reset", "Reset clicked value"),
  h2("Datatable:"),
  DT::dataTableOutput("dt")
)

server <- function(input, output) 

  # the last clicke value
  output$last_clicked <- renderPrint(
    str(last())
  )

  output$dt <- DT::renderDataTable(
    DT::datatable(head(mtcars, 2))
  )

  observeEvent(input$dt_cell_clicked, 
    validate(need(length(input$dt_cell_clicked) > 0, ''))
    print("You clicked something!")
  )

  myProxy = DT::dataTableProxy('dt')
  last = reactiveVal(NULL)

  observe(
    last(input$dt_cell_clicked)
  )

  observeEvent(input$reset, 
    DT::selectRows(myProxy, NULL)
    last(NULL)
    output$dt <- DT::renderDataTable(    # EDIT
      DT::datatable(head(mtcars, 2))      # EDIT
    )                                    # EDIT
  )


shinyApp(ui, server)

【讨论】:

谢谢,但行为上的唯一区别是取消选择。 input$dt_last_cell_clicked 在用户单击“重置”后仍未更新。原因很简单:last被设置为NULL,但是再次点击并没有更新last,因为input$dt_cell_clicked没有被重置。 那么为什么不使用last 而不是 input$dt_last_cell_clicked?一般来说,更新输入并不容易,除非 (DT) API 支持它。如果您需要在 javascript 中使用此值,还有另一种方法,但据我所知,这不是您问题的一部分。 因为在 last() 设置为 NULL 并且用户点击 DT 之后,last 没有更新 - 这是显而易见的原因,因为 input$dt_cell_clicked 在此过程中没有改变,所以不能更新last() ...这让我想到了使用最后选择的单元格,而不是最后点击的值。谢谢! 您实际上不需要last() 或重新渲染绕道。请参阅我发布的答案。

以上是关于DataTables DT:重置单击单元格的值的主要内容,如果未能解决你的问题,请参考以下文章

jquery DataTables - 更改单元格的值而不仅仅是显示值

DataTables jQuery:如何使用单元格的值而不是基于正在呈现的值进行搜索?

获取使用Javascript单击的行中HTML单元格的值

如何在不使用按钮或 tbody 的情况下从动态生成的表中单击一行来获取 HTML 表中单元格的值

如何将过滤器和订单数据设置到 DataTables 单元格

在 TableViewCell 内单击时 UIButton 标签重置