You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

PyWebIO的input_group如何实现不刷新页面动态新增输入字段?

PyWebIO 动态新增输入项实现方案

你可以通过pywebio.pin模块实现固定输入项保留、动态新增拟合算法选择框的需求,实现逻辑如下:

  • 首先使用pin组件渲染原有固定配置项,所有输入值会自动持久化存储,不会因为页面组件更新丢失已填内容
  • 预留专门的动态输入区域容器,点击添加按钮时直接向容器内追加新的下拉选择组件
  • 所有输入项填写完成后,通过pin.pin对象一次性读取所有固定+动态输入的取值

你可以参考如下改造后的代码实现:

from pywebio import start_server
from pywebio.pin import *
from pywebio.output import *
from pywebio.session import *

def main():
    # 存储动态输入项的计数器,用于生成唯一name
    dynamic_count = 0
    # 渲染固定输入项
    put_input_group("输入配置", [
        put_select("请选择DeviceEUI:", options=deviceeuis, name='DeviceEUI',
                   onchange=lambda c: euichange(c)),
        put_select("请选择设备名称:", options=devicenames, name='device_name',
                   onchange=lambda c: namechange(c)),
        put_select('base_gasID', options=['Select Base gas'], name='base_gasID'),
        put_input('文件名称', name='file_name'),
        put_input('开始日期', name='date_start', type=DATE),
        put_input('开始时间', name='time_start', type=TIME),
        put_input('结束日期', name='date_end', type=DATE),
        put_input('结束时间', name='time_end', type=TIME),
    ])
    
    # 渲染动态区域占位
    put_scope("dynamic_area")
    put_buttons(['新增拟合算法'], lambda _: add_dynamic_item())
    
    # 提交按钮
    put_button("提交配置", onclick=lambda: submit_config())
    
    def add_dynamic_item():
        nonlocal dynamic_count
        dynamic_count += 1
        # 向动态区域追加新的下拉选择框
        with use_scope("dynamic_area", clear=False):
            put_select(f"拟合算法{dynamic_count}", options=["线性拟合", "多项式拟合", "指数拟合"], name=f"fit_algo_{dynamic_count}")
    
    def submit_config():
        # 读取所有固定输入值
        config = {
            "DeviceEUI": pin.DeviceEUI,
            "device_name": pin.device_name,
            "base_gasID": pin.base_gasID,
            "file_name": pin.file_name,
            "date_start": pin.date_start,
            "time_start": pin.time_start,
            "date_end": pin.date_end,
            "time_end": pin.time_end,
            "fit_algos": []
        }
        # 读取所有动态输入的拟合算法值
        for i in range(1, dynamic_count+1):
            config["fit_algos"].append(pin[f"fit_algo_{i}"])
        # 后续处理config逻辑
        put_success("配置提交成功")
        put_code(str(config))

if __name__ == "__main__":
    start_server(main, port=8080)

如果需要继续使用原生input_group实现,也可以通过每次点击添加按钮后重构input_group的输入项列表,将原有输入值回填后重新渲染input_group,该方案不需要引入pin模块,但需要手动维护已填输入值的回填逻辑。

内容的提问来源于stack exchange,提问作者user14306956

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.25 07:36:03