logo标签列表

R闪亮的DataTables ColVis行为

jqueryrshinydt
9
我在RStudio Shiny服务器页面上使用了DataTables，并且在下面的示例中使TableTools和ColReorder正常工作，但是ColVis（“显示/隐藏列”按钮）的行为与http://datatables.net/extensions/colvis/中的示例不同：
单击“显示/隐藏列”按钮时，列表会与下面的表格值混合，我无法通过再次单击按钮或单击页面上的任何其他位置来使列表消失（同样，在datatables页面上的示例行为正确）。

enter image description here

此外，我对使用 sDom 来排序表格中的不同元素感到困惑。我希望 显示/隐藏列 按钮位于右上角而不是左上角。我也不确定如何在表格的 sDom 中排序不同的元素，以便在更改列的顺序、保存为 CSV/Excel 或隐藏某些列后，可以获得新的表格布局而不是原始布局。
有什么想法吗？

ui.R

shinyUI(pageWithSidebar(

h1('Diamonds DataTable with TableTools'),
        tagList(
                  singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js',type='text/javascript'))),
                  singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/js/TableTools.min.js',type='text/javascript'))),
                  singleton(tags$head(tags$script(src='//cdn.datatables.net/colreorder/1.1.1/js/dataTables.colReorder.min.js',type='text/javascript'))),
                  singleton(tags$head(tags$script(src='//cdn.datatables.net/colvis/1.1.0/js/dataTables.colVis.min.js',type='text/javascript'))),
                  singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/js/ZeroClipboard.min.js',type='text/javascript'))),
                  singleton(tags$head(tags$link(href='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/css/TableTools.min.css',rel='stylesheet',type='text/css'))),
                  singleton(tags$script(HTML("if (window.innerHeight < 400) alert('Screen too small');")))
                ),
        dataTableOutput("mytable")
      )
)

server.R

shinyServer(function(input, output, session) {
output$mytable = renderDataTable({
          diamonds[,1:6]
      }, options = list(
               "sDom" = 'RMDCT<"clear">lfrtip',
               "oTableTools" = list(
                       "sSwfPath" = "//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls.swf",
                       "aButtons" = list(
                                 "copy",
                                 "print",
                                 list("sExtends" = "collection",
                                                     "sButtonText" = "Save",
                                                     "aButtons" = c("csv","xls")
                                                )
                               )
                     )
             )
    )
})

此外，列排序和列重排存在问题： 如果先进行排序，然后重新排列列并再次排序，则列标题会翻转。例如，按列深度排序，然后将第一列向左移动，再次点击标题进行排序，现在我们得到了从错误列中获取内容的深度标题。见快照：

enter image description here

你只需要使用这个库的sDom选项。然后小部件应该正确显示。但是，小部件会更改DOM中的对象，因此您可能需要合并对Shiny.unbindAll()和Shiny.bindAll()的调用，请参见https://groups.google.com/forum/#!msg/shiny-discuss/IE6aQfKXd1I/M_IpbLUUG9AJ - jdharrison
这个 Shiny.unbindAll() 和 Shiny.bindAll() 的调用应该相对于表格的哪里进行？ - 719016
1个回答
7
一些注释：
当前的data.table版本与shiny不兼容。我们需要1.9.4版本。然后，我们还需要colvis的pre 1.1.0版本。不幸的是，这个版本引用了一个旧版本的jQuery，它调用了jQuery.browser。因此，需要删除对jQuery.browser的引用，它出现在856到859行。sDom属性也有些棘手，它在新的data.table中似乎没有出现，被dom替换。文档位于http://legacy.datatables.net/usage/options#sDom。我们使用以下代码将colVis内容添加到中：<"cvclear"C>。通过将其放在sDom语句开头进行排序，可以将其放置在顶部。这样做是有效的，但我们需要将其右对齐。通常会通过向类添加align = "right"来实现，但由于类是通过sDom调用启动的，因此我们必须使用HTML5 css text-align:right。我们使用tags$style添加这个。

因此，以上内容应该允许我们在当前的 shiny 中使用 colVis。当 shiny 升级到 data.table 1.10.0 时，我们应该能够使用当前的 colVis 插件文件，并且希望不需要进行修复。

以下内容对我有效：

ui.R

# get the colVis js file and delete lines 
library(RCurl)
write(getURL("https://raw.githubusercontent.com/openMF/mifosx-community-apps/master/IndividualLendingGeneralJavaScript/resources/libs/DataTables-1.9.4/extras/ColVis/media/js/ColVis.js")
      , file = 'www/colvis.js')
tf <- readLines("www/colvis.js")[-c(856:859)]
write(tf, file = "www/colvis.js")
shinyUI({
  pageWithSidebar(

    h1('Diamonds DataTable with TableTools'),
    tagList(
      singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js',type='text/javascript'))),
      singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/js/TableTools.min.js',type='text/javascript'))),
      singleton(tags$head(tags$script(src='//cdn.datatables.net/colreorder/1.1.1/js/dataTables.colReorder.min.js',type='text/javascript'))),
      singleton(tags$head(tags$script(src='colvis.js',type='text/javascript'))),
      singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/js/ZeroClipboard.min.js',type='text/javascript'))),
      singleton(tags$head(tags$link(href='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/css/TableTools.min.css',rel='stylesheet',type='text/css'))),
      singleton(tags$head(tags$link(href='https://raw.githubusercontent.com/openMF/mifosx-community-apps/master/IndividualLendingGeneralJavaScript/resources/libs/DataTables-1.9.4/extras/ColVis/media/css/ColVis.css',rel='stylesheet',type='text/css'))),     
      singleton(tags$script(HTML("if (window.innerHeight < 400) alert('Screen too small');"))),
      singleton(tags$head(tags$link(href='https://raw.githubusercontent.com/DataTables/ColVis/18b52dfdd7255ffe96a92aadc16cadd70e3e174a/media/css/ColVis.css',rel='stylesheet',type='text/css')))  
      , tags$head(
        tags$style(HTML("
                        .cvclear{
                         text-align:right}")
        )
      )
    ),
    dataTableOutput("mytable")
  )
})

server.R

library(shiny)
library(ggplot2)

shinyServer(function(input, output, session) {
  output$mytable = renderDataTable({
    diamonds[,1:6]
  }, options = list(
    "sDom" = 'RMD<"cvclear"C><"clear"T>lfrtip',
    "oTableTools" = list(
      "sSwfPath" = "//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls.swf",
      "aButtons" = list(
        "copy",
        "print",
        list("sExtends" = "collection",
             "sButtonText" = "Save",
             "aButtons" = c("csv","xls")
        )
      )
    )
  )
  )
}
)

您可以在以下网址查看应用程序：

http://128.199.255.233:3838/userApps/john/cvtestapp/

enter image description here

我现在基本上已经把它搞定了，除非进行排序，然后重新排列列并再次排序，否则列标题会翻转。例如，按深度列排序，然后将第一列向左移动，然后再次单击标题进行排序，现在我们得到了带有来自错误列的内容的深度标题...（问题中的快照） - 719016
ColReorder和排序中的错误仍然存在，但我认为这可能与此问题无关，因此我将标记此答案为已接受 :-) - 719016
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接