Визуализация HTML с помощью обратного вызова JS в R DT :: datatables - PullRequest
Новая
       6

Визуализация HTML с помощью обратного вызова JS в R DT :: datatables

0 голосов
/ 16 января 2019

Отработка примера Томасрайгла здесь (https://github.com/rstudio/DT/issues/393#issuecomment-279627237), У меня есть небольшое отклонение, которое не работает, я думаю, из-за основной проблемы JS.

Создать данные 

library(DT)
dataSet <- data.frame(name=c("Jack", "Jill"),
                  age=c(25,25),
                  tableHtml=c("<table><tr><th>Value A</th><th>Value B</th></tr><tr><td>1</td><td>2</td></tr></table>",
                              "<div><table><tr><th>Value A</th><th>Value B</th></tr><tr><td>3</td><td>4</td></tr></table></div>"),
                  stringsAsFactors=FALSE)'

Подход 1. Отображение таблицы HTML в таблице DT РАБОТАЕТ, но не то, что мне нужно

Теперь, что я хотел бы сделать, это отобразить HTML-таблицу как вложенный дочерний элемент для каждой строки в интерактивной таблице DT. Этот первый блок работает, но, очевидно, будет отображать одну и ту же таблицу для каждой строки DT, поскольку HTML-код жестко задан в обратном вызове: 

## Working, but same child table for every row
DT::datatable(
    cbind(' ' = '&oplus;', dataSet),
    escape = -2,
    options = list(
        columnDefs = list(
            list(visible = FALSE, targets = c(0,4)),
            list(orderable = FALSE, className = 'details-control', targets = 1)
        )
    ),
    callback = JS("
                  table.column(1).nodes().to$().css({cursor: 'pointer'});
                  var format = function(d) {
                    return '<div><table><tr><th>Value A</th><th>Value B</th></tr><tr><td>1</td><td>2</td></tr></table></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;');
                      }
                    });"
                  )
)

Подход 2: визуализация разных таблиц HTML для каждой строки НЕ РАБОТАЮЩАЯ

Входит столбец tableHtml фрейма данных dataSet. Для каждой строки фрейма данных dataSet я хотел бы отобразить строку таблицы DT с дочерней строкой, содержащей таблицу, используя HTML в столбце tableHtml фрейма данных dataSet. Ниже я пытаюсь просто вернуть d[4], но это возвращает необработанный HTML без рендеринга таблицы. 

## Attempt at different child table for each row
datatable(
    cbind(' ' = '&oplus;', dataSet),
    escape = -2,
    options = list(
        columnDefs = list(
            list(visible = FALSE, targets = c(0,4)),
            list(orderable = FALSE, className = 'details-control', targets = 1)
        )
    ),
    callback = JS("
                  table.column(1).nodes().to$().css({cursor: 'pointer'});
                  var format = function(d) {
                    return d[4]
                  };
                  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;');
                      }
                    });"
                  )
)

Я пробовал около 20 вариантов, но ни один из них не работает так, как ожидалось. Тот факт, что моя первая модификация примера Томасрайгла работает, заставляет меня думать, что это просто небольшая проблема JS, которая мне не подходит. Любая помощь приветствуется.

1 Ответ

0 голосов
/ 16 января 2019

Ну, еще 2 часа возни и переключение с escape = -2 на escape = FALSE делает свое дело.

...