代码之家 › 专栏 › 技术社区 › Mark

SweetAlert2消息,在r中有下拉框,闪亮

sweetalert2 shiny r javascript

Mark · 技术社区 · 6 年前

如何建立一个R光泽版本的 sweetalert2 包含下拉菜单的消息。 我已经在r-shining中构建了相当数量和类型的SweetAlert消息,但这对我来说是一种新的类型,并且我坚持正确的方式从消息内的selectinput中获得选择,将其作为文本而不是数字。

使其工作到一定程度,但输出是列表中第n个元素的数目,而不是文本字符串…..

最初的纯javascript示例: example 在下面选择 (张贴在邮件底部。

在我做了一个演示应用程序后,它显示的是数字而不是文本,我尝试了这个方法:(按照我最终基于另一个方法构建的工作解决方案) SO 关于SweetAlerts的问题

myjava <- "shinyjs.swalFromButton = function(params) { 
    var defaultParams = {
title : null,
html : null,
inputOptions: null
};
params = shinyjs.getParams(params, defaultParams);
swal({title : params.title, html : params.html, inputOptions : params.inputOptions,
input: 'select',
inputPlaceholder: 'Select a batchname',
showCancelButton: true,
inputValidator: function(value) {
  return new Promise(function(resolve) {
    if (value === 'Select a batchname') {
      resolve('You need to select a batchname')
    } else {
      resolve()
    }
  })
}
})
.then(function(result){
  if(result.dismiss === swal.DismissReason.cancel) {
  } else {
    Shiny.setInputValue('SweetDropChoice', result.value, {priority: 'event'});
  }
});
};"

我认为我的问题是,我不知道如何在我自己的版本中正确地使用来自示例的解决方案。

这是用来测试它的应用程序。您需要更改目录并下载两个文件 甜味剂2 工作在这里: https://www.jsdelivr.com/package/npm/sweetalert2 , 下载按钮位于标题右侧: 甜味剂2 所需的2个文件在迪特命名文件夹:

sweetellert2.min.js&sweetellert2.min.css

setwd(PASTE LOCATION WHERE YOU SAVED THE SWEETALERT SCRIPTS)

    library(shiny)
    library(shinyjs)

    myjava <- "shinyjs.swalFromButton = function(params) { 
        var defaultParams = {
    title : null,
    html : null,
    inputOptions: null
    };
    params = shinyjs.getParams(params, defaultParams);
    swal({title : params.title, html : params.html, inputOptions : params.inputOptions,
    input: 'select',
    inputPlaceholder: 'Select a batchname',
    showCancelButton: true})
    .then(function(result){
    if (result.value === 'Select a batchname') {
    resolve('You need to select a batchname:)')
    } else {
    var batchname = result.value
    Shiny.setInputValue('SweetDropChoice', batchname, {priority: 'event'});}
    });
    };"



    ui  <- fluidPage(

      actionButton(inputId = 'messagebutton', label = 'click me'),
      verbatimTextOutput('Choice', placeholder = T),
      shinyjs::useShinyjs(),
      shinyjs::extendShinyjs(text = myjava),
      tags$head(includeScript("sweetalert2.min.js"),
                includeCSS("sweetalert2.min.css")
      )
    )

    server <- function(input, output, session) { 

      values <- reactiveValues(Choice = '?',
                               Choices = rownames(mtcars)[1:6] ## dummy input to use in the sweetalert with dropdown
                               )

      observeEvent(input$messagebutton, { 
        shinyjs::js$swalFromButton( title = paste('<span style ="color:#339FFF;">An alert with a choice'),
                                    html = paste('Pick a name'), 
                                    inputOptions = values$Choices)
      })


      output$Choice <- renderPrint({input$SweetDropChoice})  ## print output of new sweetalert

    }

    shinyApp(ui = ui, server = server)

2 回复 | 直到 6 年前

Stéphane Laurent 6 年前

这是我的版本。但据我所知,这和你的一样。除了我没有包括 if(result.dismiss === swal.DismissReason.cancel) (我不确定这是正确的,顺便说一句,没有 dismiss 字段在 result )

myjava <- "
shinyjs.swalFromButton = function(params) { 
  var defaultParams = {
    title: null,
    html: null,
    inputOptions: null
  };
  params = shinyjs.getParams(params, defaultParams);
  swal({
    title: params.title, 
    html: params.html, 
    inputOptions: params.inputOptions,
    input: 'select',
    inputPlaceholder: 'Select a batchname',
    showCancelButton: true,
    inputValidator: function(value) {
      return new Promise(function(resolve) {
        if (value !== '') {
          resolve();
        } else {
          resolve('You need to select a batch :)');
        }
      });
    }
  })
  .then(function(result){
    var batchname = params.inputOptions[result.value];
    Shiny.setInputValue('SweetDropChoice', batchname, {priority: 'event'});
  });
};"

Mark 6 年前

@ Stphane 奇怪的是,我现在有了另一个版本…

myjava <- "shinyjs.swalFromButton = function(params) { 
    var defaultParams = {
title : null,
html : null,
inputOptions: null
};
params = shinyjs.getParams(params, defaultParams);
swal({title : params.title, html : params.html, inputOptions : params.inputOptions,
input: 'select',
inputPlaceholder: 'Select a batchname',
showCancelButton: true,
inputValidator: function(value) {
return new Promise(function(resolve) {
if (value === '') {
resolve('You need to select a batchname')
} else {
resolve()
}
})
}
})
.then(function(result){
if(result.dismiss === swal.DismissReason.cancel) {
} else {
var batchname = params.inputOptions[result.value];
Shiny.setInputValue('SweetDropChoice', batchname, {priority: 'event'});
}
});
};"