Блог

У меня есть datatable, который можно редактировать. Цель здесь состоит в том, чтобы пользователь мог отредактировать GRPs/TRPs файл, если захочет. После редактирования этого столбца Costs($) столбец будет соответствующим образом обновлен. Здесь я пытаюсь написать некоторый JS-код и включить его в аргумент обратного вызова datatable. Что-то не так с JS-кодом, и я не могу понять, что это такое. Я очень новичок в том, что JS так обнажен со мной.

 # the math behind it
cost = OVERRIDE_CPP * GRPs/TRPs

df <- data.frame (Market  = c("ALBANY-SCHENECTADY-TROY, NY", "ALBUQUERQUE-SANTA FE"),
                  Weeks = c(1, 1),
                  OVERRIDE_CPP = c(141.7, 188), 
                  GRPs_TRPs = c(100L, 100L),
                  Cost = c(14170, 18800),
                  Impressions = c(2053.993,2053.993)
)

# Coster DataTable JS function
CosterTableJS <- function() {
  return( 
    JS(
        "var ok = true;",
        "function onUpdate(updatedCell, updatedRow, oldValue) {",
        "  var column = updatedCell.index().column;",
        "  if(column === 4){",
        "    ok = false;",
        "  }else if(column === 3){",
        "    ok = true;",
        "  }",
        "}",
        "",
        "// make the datatable",
        "var format_datatable = function(d, rowIdx){",
        "  // footer callback to display the totals",
        "  var footerCallback = function(tfoot, data, start, end, display){",
        "    var api = this.api();",
        "// update the Cost when the GRP/TRP's are changed",
        "    var col_trp_grp = api.column(3).data();",
        "    var col_override_cpp = api.column(2).data();",
        "    if(ok){",
        "      for(var i = 0; i < col_trp_grp.length; i  ){",
        "        api.cell(i,4).data(parseFloat(col_trp_grp[i]) * parseFloat(col_override_cpp[i]));",
        "      }",
        "    }",
        "    Shiny.setInputValue('weeklyData:weeklyData', table.data().toArray());",
        "  }",
        "  var n = d.length - 1;",
        "  var id = 'table#';",
        "  var columns = Object.keys(d[n][0]).map(function(x){",
        "    return {data: x, title: x};",
        "  });",
        "  if (Object.keys(d[n][0]).indexOf('_details') === -1) {",
        "    var subtable = $(id).DataTable({",
        "                 'data': d[n],",
        "                 'columns': columns,",
        "                 'autoWidth': true,",
        "                 'deferRender': true,",
        "                 'info': false,",
        "                 'lengthChange': false,",
        "                 'ordering': d[n].length > 1,",
        "                 'order': [],",
        "                 'paging': true,",
        "                 'scrollX': false,",
        "                 'scrollY': false,",
        "                 'searching': false,",
        "                 'sortClasses': false,",
        "                 'pageLength': 50,",
        "                 'footerCallback': footerCallback,",
        "                 'columnDefs': [",
        "                  {targets: [0, 1, 2, 3, 4, 5]},",
        "                  {targets: '_all', className: 'dt-center'}",
        "                 ]",
        "               });",
        "  } else {",
        "    var subtable = $(id).DataTable({",
        "            'data': d[n],",
        "            'columns': columns,",
        "            'autoWidth': true,",
        "            'deferRender': true,",
        "            'info': false,",
        "            'lengthChange': false,",
        "            'ordering': d[n].length > 1,",
        "            'order': [],",
        "            'paging': true,",
        "            'scrollX': false,",
        "            'scrollY': false,",
        "            'searching': false,",
        "            'sortClasses': false,",
        "            'pageLength': 50,",
        "            'footerCallback': footerCallback,",
        "            'columnDefs': [",
        "              {targets: -1, visible: false},",
        "              {targets: 0, orderable: false, className: 'details-control'},",
        "              {targets: '_all', className: 'dt-center'}",
        "             ]",
        "          }).column(0).nodes().to$().css({cursor: 'pointer'});",
        "  }",
        "};"
    )
  )
}

 coster_callback_js <- CosterTableJS()
 rowNames <- FALSE

# Table
datatable(
  df,
  callback = coster_callback_js,
  rownames = rowNames,
  style = "bootstrap4",
  extensions = 'Buttons',
  options = list(
    dom = "Bt",
    columnDefs = list(
      list(width = '300px', targets = 0)
    ),
    lengthMenu = list(c(-1, 10, 20),
                      c("All", 10, 20))
  )
)