Блог

Есть ли способ исправить верхнюю часть панели здесь? Прямо сейчас виджеты (selectinput) исправлены, но когда пользователь прокручивает страницу вниз, она покрывается таблицей данных. Можем ли мы не убедиться, что это не будет охвачено и только данные будут перемещены вниз?

 library(shiny)
library(DT)
ui <- shinyUI(fluidPage(
  titlePanel(fluidRow(
    div(column(12, align="center",
           selectInput("rmd1", "RMDw", choices = c(1,2)),
           selectInput("rmd2", "RMD2", choices = c(1,2))
    ), style = "position:fixed; width:inherit;")
  )),
  br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),
  dataTableOutput("uioutput", height = "2000px")
  
))

server <- function(input, output, session) {
  output$uioutput <- renderDataTable({
    datatable(iris)
  })
}

shinyApp(ui, server)
 

Вы можете использовать свойство CSS z-index для управления порядком стека HTML-элементов:

 library(shiny)
library(DT)
ui <- shinyUI(fluidPage(
  titlePanel(fluidRow(
    div(column(12, align="center",
               selectInput("rmd1", "RMDw", choices = c(1,2)),
               selectInput("rmd2", "RMD2", choices = c(1,2))
    ), style = "position:fixed; width:inherit; z-index: 1; background-color: white;")
  )),
  br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),
  dataTableOutput("uioutput", height = "2000px")
  
))

server <- function(input, output, session) {
  output$uioutput <- renderDataTable({
    datatable(iris)
  })
}

shinyApp(ui, server)
 

Другой подход заключается в использовании позиции: липкий;.

Изменение строки стиля на position:absolute делает так, чтобы поля выбора прокручивались вверх и вниз страницы при прокрутке вниз, если это то, что вы искали.

 library(shiny)
library(DT)
ui <- shinyUI(fluidPage(
  titlePanel(fluidRow(
    div(column(12, align="center",
           selectInput("rmd1", "RMDw", choices = c(1,2)),
           selectInput("rmd2", "RMD2", choices = c(1,2))
    ), style = "position:absolute; width:inherit;")
  )),
  br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),
  dataTableOutput("uioutput", height = "2000px")
  
))

server <- function(input, output, session) {
  output$uioutput <- renderDataTable({
    datatable(iris)
  })
}

shinyApp(ui, server)
 

Если вы пытаетесь заставить таблицу оставаться на месте и прокручивать таблицу вниз, используйте DTOutput() и renderDataTable() вместо dataTableOutput() и renderDataTable() . Затем избавьтесь от datatable() внутренностей renderDT() и просто используйте «ирис». Наконец, вы можете добавить Scroller расширение и список опций с scrollY помощью и scroller . Другие могут объяснить разницу между DT и DataTable (эта страница также может помочь: https://rstudio.github.io/DT/shiny.html), но я верю DTOutput и renderDT более гибок. Примечание. Вы также можете добавить горизонтальные полосы прокрутки, scrollX если в будущем будете использовать таблицу с большим количеством полей.

Обновленный код приведен ниже.

Надеюсь, что любой из них поможет!

 library(shiny)
library(DT)
ui <- shinyUI(fluidPage(
  titlePanel(fluidRow(
    div(column(12, align="center",
           selectInput("rmd1", "RMDw", choices = c(1,2)),
           selectInput("rmd2", "RMD2", choices = c(1,2))
    ), style = "position:absolute; width:inherit;")
  )),
  br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),br(),
  DTOutput("uioutput", height = "600px")
  
))

server <- function(input, output, session) {
  output$uioutput <- renderDT({
    iris
  },
    extensions = c('Scroller'),
    fillContainer = T,
    options = list(deferRender = T,
                   scrollY = 400,
                   scroller = T)
  )
}

shinyApp(ui, server)