如何使此自定义侧边栏功能区面板对数据更改(即添加、编辑、删除)做出React

u7up0aaq 于 2023-01-10 发布在 React

关注(0)|答案(1)|浏览(106)

我试图让左边的总计对主面板中的数据表的变化做出React，但没有任何运气弄清楚如何以及在哪里插入代码来做到这一点。目前它们只在应用程序启动时呈现。
这里是显示它们的函数的部分代码。应用程序顶部

sumDebit <- function(){debitresult <- dbGetQuery(pool,"SELECT sum(debit) as tdebits FROM po.katpay ")
    return(debitresult)
    }
sumCredit <- function(){creditresult <- dbGetQuery(pool,"SELECT sum(credit) as tcredits FROM po.katpay ")
    return(creditresult)
    }
totBalance <- function(){sumDebit() - sumCredit()}
    
sidebarPanel2 <- function (..., out1 = NULL,out2=NULL,out3=NULL,out4=NULL, width = 18) 
    {
      div(class = paste0("col-sm-", width), 
          tags$form(class = "well", ...),out1,out2,out3,out4
      )
    }

UI部分

ui <- fluidPage(
  
  # Application title
  titlePanel("Payment Editor"),
  shinyjs::useShinyjs(),
  shinyjs::inlineCSS(appCSS),
  
  
  fluidRow(
        actionButton("add_button", "Add", icon("plus")),
        actionButton("edit_button", "Edit", icon("edit")),
        actionButton("delete_button", "Delete", icon("trash-alt")),
        actionButton("refresh_button", "Refresh", icon("refresh"))
      ),
  
  # Sidebar 
  sidebarLayout(
    sidebarPanel(width = 2,
      selectInput(
        inputId = "group_dims",
        label = "Filter",
        choices = c("date", "debit", "credit","company", "note"),
        selected = c("None"),
        multiple = TRUE
      ), 
     
      sidebarPanel2(fluid = TRUE,
                   
                    out1 = h5("Total Debits = " , formatC(sumDebit(),format="d",big.mark=',')),
                    out2 = h5("Total Credits = ", formatC(sumCredit(),format="d",big.mark=',')),
                    #out3 = tags$hr(style="color:black"),
                    out4 = h5("Balance = ",formatC(totBalance(),format="d",big.mark=',')),
                    ),
    ),
    
    # DT table
    mainPanel(DT::dataTableOutput("responses_table") %>% shinycssloaders::withSpinner()),
   
  )
)# end fluidpage

添加/编辑/删除功能/按钮都工作正常，但我坚持如何使sidebarpanel2中的值更新的变化。如果我添加代码在服务器部分，我得到错误的用户界面，即找不到符号等。所以我想我不是真正理解如何用户界面和服务器是互动或什么标签，定义等，以传递他们之间，如果这是有意义的？
我试过使函数本身React没有运气...得到必须在一个React容器错误
我的猜测是大多数函数需要在服务器部分，我只需要在用户界面部分的字段值来填充，但我也不知道如何做到这一点。

- 不包括服务器代码，因为此时它对此没有任何作用。

r

来源：https://stackoverflow.com/questions/75018257/how-can-i-make-this-custom-sidebar-well-panel-reactive-to-the-data-changing-i-e

1条答案

按热度按时间

mspsb9vt1#

所以对于下一个家伙...或者提醒我在路上，我以为闪亮会很容易做的事情，结果需要一些JS和HTML来做。
这里的关键是div/classes和id，以便能够选择元素......我认为......基本理解这实际上只是一个客户机/服务器Web应用程序。
最上面的部分...

sidebarPanel2 <- function (..., debit = NULL,credit=NULL,balance=NULL, width = 18)
{
  withTags(
            div(id="well2", class = paste0("col-sm-", width),
                div(class="debit",(debit)), # might not need these classes but works. 
                div(class="credit",(credit)),
                div(class="balance",(balance))
                ) # end div
          ) # end withTags
} # end sidebar2

...在UI部分JS中处理服务器响应...

# section defines javascript to change values on client
tags$script('
  Shiny.addCustomMessageHandler("DebitHandler",
        function(debit) {
          document.getElementById("debit").innerHTML=debit
        });'),
tags$script('
  Shiny.addCustomMessageHandler("CreditHandler",
        function(credit) {
          document.getElementById("credit").innerHTML=credit
        });'),
tags$script('
Shiny.addCustomMessageHandler("BalanceHandler",
        function(balance) {
          document.getElementById("balance").innerHTML=balance
        });'),

然后...

#create second sidebar 'well' and populate for first run
  sidebarPanel2(fluid=TRUE,
                debit =  h5(id="debit","Total Debits  = ",format(sumDebit(),format="d",big.mark=',',nsmall =2)),
                credit = h5(id="credit","Total Credits = ", format(sumCredit(),format="d",big.mark=',',nsmall =2)),
                balance = h5(id="balance","Total Balance = ", format(totBalance(),format="d",big.mark=',',nsmall=2))
                ), # end sidepanel2
            ), # end sidepanel

...以及服务器部分

#generate new balances and send it back to the client on edits.add.delete
  #handler function called '?????Handler'
  observe({
    debit=paste("Total Debits = ", format(sumDebit(),format="d",big.mark=',',nsmall =2))
    credit=paste("Total Credits = ", format(sumCredit(),format="d",big.mark=',',nsmall =2))
    balance=paste("Total Balance = ", format(sumDebit() - sumCredit(),format="d",big.mark=',',nsmall =2))
    
    input$submit                                                                                                            
    input$submit_edit
    input$refresh_button
    input$delete_button
    
    if(input$refresh_button){ 
      session$sendCustomMessage(type ="DebitHandler",debit)
      session$sendCustomMessage(type ="CreditHandler",credit)
      session$sendCustomMessage(type ="BalanceHandler",balance)
    }
    
    if(input$delete_button){
      session$sendCustomMessage(type ="DebitHandler",debit)
      session$sendCustomMessage(type ="CreditHandler",credit)
      session$sendCustomMessage(type ="BalanceHandler",balance)
    }
  })

由于某种原因，submit和submit_edit也可以工作，但没有为它们编写代码？？这里有很多浪费的周期和多余的查询。。在我看来，但它很有效。
仅供参考，这是well2html在客户端的最终外观。

<div id="well2" class="col-sm-18">
    <div class="debit">
        <h5 id="debit">Total Debits = 46,456.88</h5>
    </div>
    <div class="credit">
        <h5 id="credit">Total Credits = 18,618.38</h5>
    </div>
    <div class="balance">
        <h5 id="balance">Total Balance = 27,838.50</h5>
    </div>
</div>

在shiny类"well"输入选择容器内

赞(0）回复(0）举报 2023-01-10

我来回答

如何使此自定义侧边栏功能区面板对数据更改(即添加、编辑、删除)做出React

1条答案

相关问题

热门标签

最新问答