Следующий рабочий пример взят из моего предыдущего вопроса Предотвратить событие, произошедшее в Shiny, если нет доступных входных данных пользовательского интерфейса. Теперь я хочу отформатировать поле numericInput
с запятыми, чтобы помочь пользователям читать большие числа. Я последовал примеру Варианта 2 из этого поста «https://beta.rstudioconnect.com/barbara/format-numbers/», чтобы изменить Total
numericInput
с помощью этого стиля. Ключевым моментом является создание файла .js
, который форматирует числа и сохраняет его в каталоге www
в той же папке, что и блестящий скрипт.
Это прекрасно работает с числовым вводом Total
. Однако, как я могу использовать тот же формат для обновленных, добавленных позже numericINputs
? Проблема в том, что я не могу знать, сколько numericInput
будет добавлено позже, поэтому трудно изменить файл format_numbers.js
, если я не знаю входной идентификатор для добавления в этот файл.
format_numbers.js
выглядит следующим образом.
$(document).ready(function() {
// Helper function to guarantee cross-browser compatibility
// adapted from: http://stackoverflow.com/a/16157942
function localeString(x, sep, grp) {
var sx = (''+x).split('.'), s = '', i, j;
sep || (sep = ','); // default separator
grp || grp === 0 || (grp = 3); // default grouping
i = sx[0].length;
while (i > grp) {
j = i - grp;
s = sep + sx[0].slice(j, i) + s;
i = j;
}
s = sx[0].slice(0, i) + s;
sx[0] = s;
return sx.join('.');
}
// To change Total's input field (lose arrows and other functionality)
$('#Total')[0].type = 'text';
// To format the number when the app starts up
$('#Total').val(localeString($('#Total').val()));
// To format the number whenever the input changes
$('#Total').keyup(function(event) {
$(this).val(localeString($(this).val().replace(/,/g, '')));
});
});
Блестящий сценарий выглядит следующим образом.
library(shiny)
# Define UI
ui <- fluidPage(
# Modify tags
tags$head(tags$script(src = "format_numbers.js")),
# Action button to add numeric input
actionButton("add", "Add UI"),
actionButton("sum", "Sum"),
# Numeric Input
numericInput(inputId = "Total", label = "Total", value = 0),
# Text output
"The number is ",
textOutput(outputId = "out_num", inline = TRUE)
)
# Server logic
server <- function(input, output, session){
# Add numeric input
observeEvent(input$add, {
insertUI(
selector = "#add",
where = "afterEnd",
ui = numericInput(paste0("txt", input$add), label = "Number", value = 0)
)
})
# Reactive values for Total
Num_In <- reactiveValues(
Total_In = 0
)
# Convert number to character
# This is to fill in the Total numeric input formatting with comma
total_num_as_char <- reactive({format(Num_In$Total_In, big.mark = ",", trim = TRUE)})
total_input <- reactive({Num_In$Total_In})
observeEvent(input$sum, {
num_names <- names(input)[grepl("^txt", names(input))]
if (length(num_names) == 0) {
foo <- 0
} else {
foo <- sum(sapply(num_names, function(x) input[[x]]), na.rm = TRUE)
}
Num_In$Total_In <- foo
updateNumericInput(session = session,
inputId = "Total",
value = total_num_as_char())
})
# Convert input to numeric
total_num <- reactive({as.numeric(gsub(",", "", input$Total))})
# Create text output
output$out_num <- renderText({total_num()})
}
# Complete app with UI and server components
shinyApp(ui, server)
Для меня работает следующее.
Когда компонент пользовательского интерфейса добавляется с помощью insertUI
, запускается событие JS shiny:bound
. Тогда мы можем воспользоваться этим:
// Helper function to guarantee cross-browser compatibility
// adapted from: http://stackoverflow.com/a/16157942
function localeString(x, sep, grp) {
var sx = (''+x).split('.'), s = '', i, j;
sep || (sep = ','); // default separator
grp || grp === 0 || (grp = 3); // default grouping
i = sx[0].length;
while (i > grp) {
j = i - grp;
s = sep + sx[0].slice(j, i) + s;
i = j;
}
s = sx[0].slice(0, i) + s;
sx[0] = s;
return sx.join('.');
}
$(document).ready(function() {
// To change Total's input field (lose arrows and other functionality)
$('#Total')[0].type = 'text';
// To format the number when the app starts up
$('#Total').val(localeString($('#Total').val()));
// To format the number whenever the input changes
$('#Total').keyup(function(event) {
$(this).val(localeString($(this).val().replace(/,/g, '')));
});
});
$(document).on('shiny:bound', function(evt){
var id = evt.target.getAttribute('id');
if ((/^(txt)/).test(id)){
var selector = '#' + id;
$(selector)[0].type = 'text';
$(selector).val(localeString($(selector).val()));
$(selector).keyup(function(event) {
$(this).val(localeString($(this).val().replace(/,/g, '')));
});
}
});
Теперь в Р:
unformat <- function(x) as.numeric(gsub(",", "", x))
а также
observeEvent(input$sum, {
num_names <- names(input)[grepl("^txt", names(input))]
if (length(num_names) == 0) {
foo <- 0
} else {
foo <- sum(sapply(num_names,
function(x) unformat(input[[x]])), na.rm = TRUE)
}
Num_In$Total_In <- foo
updateNumericInput(session = session,
inputId = "Total",
value = total_num_as_char())
})
@www Странно. Я проверил еще раз, и да, это работает. Например. 1111
автоматически меняется на 1,111
.
Я согласен, что это должно работать. Я чувствую, что у меня тот же код, что и ваше решение. Единственным отличием может быть расположение функции unformat
, но это не должно иметь значения. Я отредактировал свой пост и поставил код js
и shiny
. Если вы не возражаете, не могли бы вы проверить, работают ли коды на вашей машине? Большое спасибо.
@www Вы пытались поместить функцию localeString
вне $(document).ready(function() {......})
? В противном случае я не уверен, что это определено в $(document).on('shiny:bound', ......
.
Оно работает. Как вы сказали, мой сценарий js
был неправильным. Большое спасибо за изучение этого.
Это для вашей помощи. Это решение выглядит многообещающе. Я проголосовал за ваш ответ. После изменения
js
и сценария R с вашими обновлениями добавленные поля числового ввода по-прежнему отображают числа без запятых. Не могли бы вы снова проверить, работает ли это решение на вашем компьютере?