使用子下拉菜单更新数据表（破折号 Python）

Question

我正在拼命寻找制作子下拉菜单的方法。我会解释。

我有一个数据表，我想要不同的显示参数（如完整、简化和自定义）：它们都是 3 selected 在下拉列表中。但是当自定义 selected 时，我希望第二个下拉列表出现在第一个下拉列表的正下方，我可以在其中 select 我想要的特定行。

除了通往 hide/show 第二个下拉菜单的方式外，一切正常。因为如果我使用一个额外的回调在选择 'custom' 时显示它，我会收到一条错误消息，告诉我这个动态下拉列表不存在。有人知道该怎么做吗？提前致谢！用于向您展示此场景的伪代码：

from dash import Dash, html, dcc, Input, Output, dash_table
from dash_bootstrap_components import themes
from tools.visual import colors
import pandas as pd


data = [['A', 10, 19, 21], ['B', 15, 54, 12], ['C', 14, 5, 9], ['D', 14, 5, 9], ['E', 14, 5, 9]]
dashboard = pd.DataFrame(data, columns=['Mat', '1', '2', '3'])


app = Dash(external_stylesheets=[themes.BOOTSTRAP])


app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.Div(children=[
        dcc.Dropdown(id='chosen-mat', multi=False, value='All',
                     options=['All', 'Custom'])
    ]),

    html.Div(id='custom-mat', children=[
        dcc.Dropdown(id='chosen-custom-mat', multi=True, value=[],
                     options=dashboard.iloc[0:, 0].to_list())
    ]),

    html.Div([
        dash_table.DataTable(
            data=dashboard.to_dict('records'),
            columns=[{"name": i, "id": i} for i in dashboard.columns],
            id='tbl')
    ], style={'margin-left': '20px', 'margin-right': '20px'}),

    html.Div(id='datatable-interactivity-container', style={'text-align': 'center'})
])


@app.callback(Output('tbl', 'data'),
              Output('tbl', 'columns'),
              Input('chosen-mat', 'value'),
              Input('chosen-custom-mat', 'value'))
def actualize_db(type_layout, mat_list):
    if type_layout == 'All':
        db = dashboard
    else:
        if mat_list is None:
            listt = []
        else:
            listt = mat_list
        db = dashboard[dashboard['Mat'].isin(listt)]
    return db.to_dict('records'), [{"name": i, "id": i} for i in db.columns]


if __name__ == '__main__':
    app.run_server(debug=True)

我需要做的是：

如果自定义 selected ：

如果 selected 另一个选项（此处为 ALL）：

Answer 1

您可以按照下面的代码执行操作，以便在您选择 All 时隐藏第二个下拉菜单，并在您选择 Custom 时显示。如您所见，我们将 return 基于下拉列表的子项。

from dash import Dash, html, dcc, Input, Output, dash_table
from dash_bootstrap_components import themes
import pandas as pd


data = [['A', 10, 19, 21], ['B', 15, 54, 12], ['C', 14, 5, 9], ['D', 14, 5, 9], ['E', 14, 5, 9]]
dashboard = pd.DataFrame(data, columns=['Mat', '1', '2', '3'])


app = Dash(external_stylesheets=[themes.BOOTSTRAP])


app.layout = html.Div(children=[
    html.Div(children=[
        dcc.Dropdown(id='chosen-mat', multi=False, value='All',
                     options=['All', 'Custom'])
    ]),

    html.Div(id='custom-mat'),

    html.Div([
        dash_table.DataTable(
            data=dashboard.to_dict('records'),
            columns=[{"name": i, "id": i} for i in dashboard.columns],
            id='tbl')
    ], style={'margin-left': '20px', 'margin-right': '20px'}),

    html.Div(id='datatable-interactivity-container', style={'text-align': 'center'})
])

@app.callback(Output('custom-mat', 'children'),
              [Input('chosen-mat', 'value')])
def hide_unhide(type_layout):
    if type_layout == 'Custom':    
        return dcc.Dropdown(id='chosen-custom-mat', multi=True, value=[],
                     options=dashboard.iloc[0:, 0].to_list())
    if type_layout == 'All': 
        return []

@app.callback(Output('tbl', 'data'),
              Output('tbl', 'columns'),
              Input('chosen-mat', 'value'),
              Input('chosen-custom-mat', 'value'))
def actualize_db(type_layout, mat_list):
    if type_layout == 'All':
        db = dashboard
    else:
        if mat_list is None:
            listt = []
        else:
            listt = mat_list
        db = dashboard[dashboard['Mat'].isin(listt)]
    return db.to_dict('records'), [{"name": i, "id": i} for i in db.columns]


if __name__ == '__main__':
    app.run_server(debug=False,port='8051')

使用子下拉菜单更新数据表（破折号 Python）

Update datatable with sub dropdowns (Dash Python)

python

callback

dropdown

plotly-dash