在闪亮的R中的DT中设置扩展行按钮的样式 [英] Styling the expand row button in DT in shiny R

问题描述

我正在尝试设置DT中可用的展开行按钮的样式。可以在此处使用该样式。我用于创建数据表的代码是-

I'm trying to style the expand rows button available in DT. The styling is available here. The code I'm using for creating the datatable is-

library(DT)
datatable(
  cbind(' ' = '⊕', mtcars), escape = -2,
  options = list(
    columnDefs = list(
      list(visible = FALSE, targets = c(0, 2, 3)),
      list(orderable = FALSE, className = 'details-control', targets = 1)
    )
  ),
  callback = JS("
  table.column(1).nodes().to$().css({cursor: 'pointer'});
  var format = function(d) {
    return '<div style=\"background-color:#eee; padding: .5em;\"> Model: ' +
            d[0] + ', mpg: ' + d[2] + ', cyl: ' + d[3] + '</div>';
  };
  table.on('click', 'td.details-control', function() {
    var td = $(this), row = table.row(td.closest('tr'));
    if (row.child.isShown()) {
      row.child.hide();
      td.html('&oplus;');
    } else {
      row.child(format(row.data())).show();
      td.html('&CircleMinus;');
    }
  });"
))*

我不太舒服精通JS，所以我迷路了。我尝试使用链接中的JS和CSS文件，但无法取得任何进展。谢谢所有潜在客户！

I'm not well versed with JS so I'm lost where to start off. I've tried using the JS and CSS files from the link but haven't been able to make any progress. Any leads appreciated, thanks!

推荐答案

如果在浏览器中打开表格，则此方法就这样工作（在RStudio查看器）。但我怀疑有一个更简单的解决方案...而且此解决方案依赖于托管在Github上的图像，这不是很酷...

This works like this if you open the table in the browser (this doesn't work in the RStudio viewer). But I suspect there's an easier solution... Moreover this solution relies on images hosted on Github, that's not very cool...

library(DT)
datatable(
  cbind(' ' = '<img src=\"https://raw.githubusercontent.com/DataTables/DataTables/master/examples/resources/details_open.png\"/>', 
        mtcars), escape = -2,
  options = list(
    columnDefs = list(
      list(visible = FALSE, targets = c(0, 2, 3)),
      list(orderable = FALSE, className = 'details-control', targets = 1)
    )
  ),
  callback = JS("
                table.column(1).nodes().to$().css({cursor: 'pointer'});
                var format = function(d) {
                return '<div style=\"background-color:#eee; padding: .5em;\"> Model: ' +
                d[0] + ', mpg: ' + d[2] + ', cyl: ' + d[3] + '</div>';
                };
                table.on('click', 'td.details-control', function() {
                var td = $(this), row = table.row(td.closest('tr'));
                if (row.child.isShown()) {
                row.child.hide();
                td.html('<img src=\"https://raw.githubusercontent.com/DataTables/DataTables/master/examples/resources/details_open.png\"/>');
                } else {
                row.child(format(row.data())).show();
                td.html('<img src=\"https://raw.githubusercontent.com/DataTables/DataTables/master/examples/resources/details_close.png\"/>');
                }
                });"
))

这篇关于在闪亮的R中的DT中设置扩展行按钮的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！