使用 python dash 为字典创建动态删除按钮?

Creating dynamic delete button for a dictionary using python dash?

提问人:George Hudson 提问时间:11/8/2023 最后编辑:George Hudson 更新时间:11/8/2023 访问量:79

问:

我有一个破折号应用程序,用户在其中输入带有名称的日期,并将其附加到字典中。 首先,字典被渲染:

# Create dictionary that will be updated using 'update_dictionary' functions 
def render_dictionary(dictionary, dictionary_id):
    entries = []
    for key, value in dictionary.items():
        delete_button_id = {'type': 'delete-button', 'index': key}
        entries.append(html.Div([f"{key}: {value}", dbc.Button('Delete', id = delete_button_id, className = 'delete-button')]))
    return entries

创建每个条目时,旁边都有一个删除按钮。然后,当用户输入数据并按下按钮时,字典会使用日期和名称进行更新。

dcc.Dropdown(
    id="year-dropdown-GMT",
    options=[
    {"label": str(year), "value": year}
    for year in range(2018, 2024)
    ],
    value = 2023,
    className="dropDown",
),

dcc.Dropdown(
    id="month-dropdown-GMT",
    options=[
    {"label": "January", "value": 1},
    {"label": "February", "value": 2},
    {"label": "March", "value": 3},
    {"label": "April", "value": 4},
    {"label": "May", "value": 5},
    {"label": "June", "value": 6},
    {"label": "July", "value": 7},
    {"label": "August", "value": 8},
    {"label": "September", "value": 9},
    {"label": "October", "value": 10},
    {"label": "November", "value": 11},
    {"label": "December", "value": 12},
    ],
    value=1,
    className="dropDown",
),

dcc.Dropdown(
    id="day-number-dropdown-GMT",
    value=1,
    className="dropDown",
    ),  # Default to the first day


dcc.Input(
    id="name-input-GMT",
    type="text",
    placeholder="Enter name...",
    spellCheck = True,
    className="mb-3",
),
dbc.Button(
    "Add to Typical Day List",
    id="add-similar-event-button-GMT",
    className="button",
    ),
html.Div(
id="similar-event-dictionary-GMT", 
className="dictionaries"
),

similar_event_dictionary_GMT = {}

@callback(
    Output("similar-event-dictionary-GMT", "children"),
    Input("add-similar-event-button-GMT", "n_clicks"),
    Input({'type': 'delete-button', 'index': ALL}, "n_clicks"), 
    State("year-dropdown-GMT", "value"),
    State("month-dropdown-GMT", "value"),
    State("day-number-dropdown-GMT", "value"),
    State("name-input-GMT", "value"),
    prevent_intial_call = True,   
)

def update_similar_event_dictionary_GMT(add_clicks, delete_clicks, year, month, day, name):
        
        if add_clicks and name and year and month and day:
            date = f"{year}-{month:02d}-{day:02d}"
            similar_event_dictionary_GMT[date] = name 
        
        if delete_clicks:
            keys_to_delete = [str(index) for index, click in enumerate(delete_clicks) if click]
            for key in keys_to_delete:
                similar_event_dictionary_GMT.pop(key, None)

                
        print(similar_event_dictionary_GMT)
        return render_dictionary(similar_event_dictionary_GMT, "similar-event-dictionary-GMT")

按下删除按钮时,没有任何反应。我的意思是字典不会附加或删除任何条目。按钮回调被触发,因为按下按钮回调时,会触发字典的 print 语句。

取而代之的是,我也尝试过。两者的结果相同。similar_event_dictionary_GMT.pop(key, None)del similar_event_dictionary_GMT[key]

我希望能够以任何顺序删除项目,因此无论按下哪个删除条目按钮,相应的条目都将被删除。

有什么建议吗?我无法在互联网上找到类似的查询。

可以给出更多的片段或解释 - 我是 Stack Overflow 的新手,请放轻松。

蟒蛇 情节破折号

评论

0赞 EricLavault 11/8/2023
您能否提供一个 mwe(即布局的相关部分)?
0赞 George Hudson 11/8/2023
@EricLavault 我已经在原帖中添加了布局的相关部分,谢谢!
0赞 EricLavault 11/8/2023
布局中的某些 ID 与回调中的 ID 不匹配。假设这些 ID 匹配(即。“year-typical-dropdown-GMT” == “year-dropdown-GMT” 和 “add-typical-day-button-GMT” == “add-similar-event-button-GMT”),问题来自您使用的字典,您应该使用字典列表(或键是数字索引的字典,这相当于使用列表):字典是按日期键入的,您需要一个索引才能稍后与删除按钮的索引匹配才能工作。similar_event_dictionary_GMT[date] = namesimilar_event_dictionary_GMT.pop(key)
0赞 George Hudson 11/8/2023
ids不匹配是我的错误,我在布局中有几个下拉列表(我已经更新了帖子)。感谢您的建议,我会尽力实施。

答: 暂无答案