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
相关产品推荐
相关产品推荐

