UI Dinamik dengan renderUI dan insertUI
Jana elemen UI secara dinamik berdasarkan masukan pengguna dan keadaan pelayan.
UI Dinamik dengan renderUI dan insertUI ialah pelajaran R Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran R Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus R Academy merangkumi sejumlah 4 pelajaran.
UI Dinamik — Mengapa dan Bila
Kadang-kadang UI yang diperlukan tidak dapat ditentukan sepenuhnya ketika aplikasi dimulakan — sebaliknya, ia bergantung pada pilihan pengguna, data yang dimuatkan atau keadaan semasa pelaksanaan. Shiny menyediakan dua mekanisme: renderUI() untuk menggantikan keseluruhan kandungan ruang letak, dan insertUI()/removeUI() untuk menambah atau mengalih keluar elemen tanpa menggantikan semuanya.
library(shiny)
# Static UI: columns always shown
# ui <- fluidPage(selectInput('x', ...), selectInput('y', ...))
# Dynamic UI: columns depend on which dataset was loaded
# ui <- fluidPage(fileInput('upload', ...), uiOutput('var_selectors'))renderUI() dan uiOutput()
renderUI({...}) dalam pelayan membina dan mengembalikan elemen UI secara reaktif. uiOutput('id') dalam UI mencipta ruang letak yang memaparkan apa sahaja yang dihasilkan oleh renderUI. Keseluruhan kandungan ruang letak digantikan setiap kali proses reaktif berjalan semula.
ui <- fluidPage(
selectInput('dataset', 'Dataset:', choices = c('iris', 'mtcars')),
uiOutput('column_selector') # placeholder
)
server <- function(input, output, session) {
output$column_selector <- renderUI({
df <- get(input$dataset) # reactive dependency on dataset
selectInput('col', 'Choose Column:',
choices = names(df))
})
}
shinyApp(ui, server)renderUI() dengan Berbilang Kawalan
Kembalikan tagList() daripada renderUI() untuk memaparkan beberapa elemen UI serentak. Ini ialah corak standard apabila bilangan kawalan bergantung pada data — contohnya, menjana satu penapis bagi setiap lajur dalam set data.
server <- function(input, output, session) {
output$filters <- renderUI({
df <- get(input$dataset)
nums <- names(df)[sapply(df, is.numeric)]
# One slider per numeric column
sliders <- lapply(nums, function(col) {
rng <- range(df[[col]], na.rm = TRUE)
sliderInput(
inputId = paste0('filter_', col),
label = col,
min = rng[1], max = rng[2],
value = rng
)
})
tagList(sliders) # render all sliders
})
}insertUI() — Tambah Elemen Secara Dinamik
insertUI(selector, where, ui) memasukkan elemen UI ke dalam DOM tanpa membina semula keseluruhan halaman. Gunakan pemilih CSS untuk menentukan titik sisipan. where boleh berupa 'afterEnd', 'beforeEnd', 'afterBegin' atau 'beforeBegin'.
server <- function(input, output, session) {
item_count <- reactiveVal(0)
observeEvent(input$add_item, {
item_count(item_count() + 1)
id <- paste0('item_', item_count())
insertUI(
selector = '#item_container', # CSS selector
where = 'beforeEnd',
ui = div(
id = id,
style = 'padding: 5px; border: 1px solid #ccc; margin: 3px;',
textInput(id, paste('Item', item_count()), value = '')
)
)
})
}removeUI() — Padam Elemen
removeUI(selector) mengalih keluar elemen DOM pertama yang sepadan dengan pemilih CSS. Gunakan multiple = TRUE untuk mengalih keluar semua elemen yang sepadan. Ini melengkapi insertUI() bagi UI berasaskan senarai yang membolehkan pengguna menambah dan mengalih keluar item.
server <- function(input, output, session) {
observeEvent(input$remove_last, {
# Remove the last item div
n <- isolate(item_count())
if (n > 0) {
removeUI(selector = paste0('#item_', n))
item_count(n - 1)
}
})
observeEvent(input$clear_all, {
# Remove all items matching a class
removeUI(selector = '.dynamic-item', multiple = TRUE)
item_count(0)
})
}conditionalPanel() — Keterlihatan di Sisi Klien
conditionalPanel(condition, ...) memaparkan atau menyembunyikan elemen UI berdasarkan syarat JavaScript yang dinilai dalam pelayar. Berbeza daripada renderUI(), elemen sentiasa berada dalam DOM — cuma dipaparkan atau disembunyikan. Ini lebih pantas untuk logik paparan atau penyembunyian yang mudah kerana tiada perjalanan pergi balik ke pelayan diperlukan.
ui <- fluidPage(
selectInput('plot_type', 'Plot Type:',
choices = c('scatter', 'histogram', 'boxplot')),
# Only shown when scatter is selected
conditionalPanel(
condition = "input.plot_type == 'scatter'",
selectInput('x_var', 'X Variable:', choices = names(mtcars)),
selectInput('y_var', 'Y Variable:', choices = names(mtcars))
),
# Only shown when histogram is selected
conditionalPanel(
condition = "input.plot_type == 'histogram'",
sliderInput('bins', 'Number of bins:', 5, 50, 20)
),
plotOutput('main_plot')
)updateSelectInput() — Ubah Suai Masukan Sedia Ada
Daripada menggantikan keseluruhan kawalan masukan, gunakan updateSelectInput(session, id, choices, selected) untuk mengemas kini pilihan atau nilai yang dipilih bagi selectInput sedia ada sahaja. Fungsi kemas kini yang serupa tersedia untuk semua jenis masukan: updateSliderInput(), updateTextInput() dan sebagainya.
server <- function(input, output, session) {
# When dataset changes, update the column selector
observeEvent(input$dataset, {
df <- get(input$dataset)
updateSelectInput(
session = session,
inputId = 'column',
choices = names(df),
selected = names(df)[1]
)
})
# Reset slider when reset button pressed
observeEvent(input$reset_btn, {
updateSliderInput(session, 'n_items',
value = 20, min = 1, max = 100)
})
}updateSliderInput() dan updateNumericInput()
Fungsi kemas kini menghantar mesej kepada pelayar untuk mengubah nilai semasa, minimum, maksimum atau label masukan sedia ada. Cara ini lebih cekap daripada memusnahkan dan mencipta semula kawalan dengan renderUI(), selain mengekalkan kedudukan kawalan dalam susun atur halaman.
server <- function(input, output, session) {
# When data loads, set slider max to actual data length
observeEvent(input$load_data, {
data <- readRDS(input$upload$datapath)
updateSliderInput(session, 'row_slider',
min = 1,
max = nrow(data),
value = c(1, min(50, nrow(data)))
)
updateNumericInput(session, 'page_size',
max = nrow(data),
value = min(10, nrow(data))
)
})
}Mengakses Masukan renderUI dengan req()
Masukan yang dicipta secara dinamik dengan renderUI() ialah NULL sehingga dipaparkan. Gunakan req(input$dynamic_input) dalam mana-mana kod pelayan yang bergantung pada masukan dinamik untuk mengelakkan ralat semasa pemulaan.
server <- function(input, output, session) {
# dynamic input: 'col' is created by renderUI
output$column_selector <- renderUI({
selectInput('col', 'Column:', choices = names(get(input$dataset)))
})
output$summary_stats <- renderPrint({
req(input$col) # wait until 'col' exists
req(input$dataset) # and dataset is chosen
df <- get(input$dataset)
summary(df[[input$col]])
})
}Tab Dinamik dengan appendTab()
appendTab(inputId, tab, select) menambah tab baharu ke dalam tabsetPanel() semasa pelaksanaan. removeTab(inputId, target) mengalih keluar satu tab. Corak ini membolehkan aliran kerja yang membolehkan pengguna membuka, menutup dan beralih antara paparan analisis yang dijana secara dinamik.
ui <- fluidPage(
actionButton('add_tab', 'Open New Analysis Tab'),
tabsetPanel(id = 'analysis_tabs', type = 'tabs')
)
server <- function(input, output, session) {
tab_count <- reactiveVal(0)
observeEvent(input$add_tab, {
tab_count(tab_count() + 1)
n <- tab_count()
appendTab(
inputId = 'analysis_tabs',
select = TRUE,
tab = tabPanel(
title = paste('Analysis', n),
value = paste0('tab_', n),
plotOutput(paste0('plot_', n)),
actionButton(paste0('close_', n), 'Close')
)
)
})
}renderUI berbanding insertUI — Bila Hendak Menggunakan Setiapnya
Pilih alat yang sesuai berdasarkan kes penggunaan anda:
- renderUI(): Gantikan keseluruhan kandungan ruang letak secara reaktif. Paling sesuai apabila seluruh blok berubah serentak.
- insertUI(): Tambahkan elemen baharu kepada kandungan sedia ada. Paling sesuai untuk senarai yang semakin panjang apabila anda tidak mahu memaparkan semula semuanya.
- updateXxxInput(): Ubah suai masukan sedia ada di tempatnya. Paling sesuai untuk menukar pilihan atau nilai tanpa memaparkan semula.
- conditionalPanel(): Paparkan atau sembunyikan tanpa perjalanan pergi balik ke pelayan. Paling sesuai untuk logik keterlihatan yang mudah.
# Decision guide:
# - 'Show filter only when advanced mode' -> conditionalPanel
# - 'Populate column choices from loaded CSV' -> updateSelectInput
# - 'Show different controls per selected tab' -> renderUI
# - 'Add a row editor for each row user adds' -> insertUI
# - 'Remove a row editor' -> removeUI
# Combining strategies:
server <- function(input, output, session) {
# Use renderUI for column selectors (replaces whole block)
output$col_selectors <- renderUI({ ... })
# Use insertUI for dynamically added rows
observeEvent(input$add_row, { insertUI(...) })
# Use conditionalPanel for show/hide (in UI, no server code)
}Semakan Pantas
Apakah perbezaan utama antara renderUI() dengan insertUI() untuk membina UI dinamik dalam Shiny?
Ulang Kaji UI Dinamik
Perkara utama daripada UI Dinamik dengan renderUI dan insertUI:
renderUI({}) + uiOutput('id'): menggantikan keseluruhan kandungan ruang letak secara reaktif.- Kembalikan
tagList()daripadarenderUI()untuk memaparkan beberapa elemen serentak. insertUI(selector, where, ui): memasukkan elemen ke mana-mana lokasi DOM.removeUI(selector): mengalih keluar elemen berdasarkan pemilih CSS.conditionalPanel(condition, ...): memaparkan atau menyembunyikan elemen di sisi klien tanpa pelayan.updateSelectInput(),updateSliderInput(): mengubah suai masukan sedia ada di tempatnya.- Sentiasa gunakan
req(input$dynamic_id)untuk mengawal nilai NULL sebelum masukan dinamik dipaparkan.
# Typical pattern: dynamic column selector
ui <- fluidPage(
fileInput('upload', 'Upload CSV'),
uiOutput('col_ui'), # placeholder
plotOutput('col_plot')
)
server <- function(input, output, session) {
df <- reactive({
req(input$upload)
read.csv(input$upload$datapath)
})
output$col_ui <- renderUI({
req(df())
selectInput('col', 'Column:', choices = names(df()))
})
output$col_plot <- renderPlot({
req(input$col)
hist(df()[[input$col]])
})
}Pelajari R dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 43
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “UI Dinamik dengan renderUI dan insertUI” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran R Academy, termasuk “UI Dinamik dengan renderUI dan insertUI”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus R Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “UI Dinamik dengan renderUI dan insertUI”?
Jana elemen UI secara dinamik berdasarkan masukan pengguna dan keadaan pelayan. Anda berlatih R Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan R Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran R Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “UI Dinamik dengan renderUI dan insertUI” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran R Academy ini?
Ya. Setiap pelajaran R Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Penerokaan Mendalam Pengaturcaraan Reaktif
- Modul Shiny untuk Guna Semula Kod
- UI Dinamik dengan renderUI dan insertUI
- Menggunakan Aplikasi Shiny dalam Pengeluaran