python - 折叠在 python dash 中动态创建的 dbc.card

Question

我对 Python dash 应用程序非常陌生，并试图构建一个需要在 dbc.card 中具有动态控件组的站点。当我尝试将控件添加到动态 dbc.card 时，它没有添加到它。（添加到两个组）我将不胜感激。我已经为此工作了 2 天，但无法正常工作（可能是我是 dash 的新手）。 在此处输入图像描述

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State, MATCH, ALL
import logging as logger
import json
from dash.exceptions import PreventUpdate
import numpy as np
import sqlite3
import random as rangead
import string
import sys
import pandas as pd

logger.basicConfig(
    format='%(levelname)s %(asctime)s %(filename)s [%(name)s] %(funcName)s | %(message)s')
logger.root.level = logger.DEBUG

external_stylesheets = [
    {
        "href": "/assets/style.css"
        "family=Lato:wght@400;700&display=swap",
        "rel": "stylesheet",
    },

]

app = dash.Dash(__name__)

def generateCardtoCollapse(triggered, n_addbank_clicks, n_addgrp_clicks):
    addgroupSubcontrols = html.Div([dbc.Row([
        dbc.Col(
            dbc.Label("Group", id={'type': 'group-label',
                      'index': n_addbank_clicks + n_addgrp_clicks}),
        ),
        dbc.Col(
            dbc.Button(
                "+/-",
                id={'type': 'collapse-button',
                    'index': n_addbank_clicks + n_addgrp_clicks},
                className="mr-1",
                outline=True,
                color="danger",
                n_clicks=0,
            ),
        )]),
        dbc.Row([
            dbc.Col(
                html.Br()
            )],
        align="left",
        no_gutters=True,
    )])


    control1 = html.Div([
    addgroupSubcontrols,
    dbc.Collapse(dbc.Card(dbc.CardBody([
    html.Div(children=[
                html.Div(
                    id={
                        'type': 'innner_dynamic_controls',
                                'index': n_addbank_clicks + n_addgrp_clicks
                    }
                ),
                html.Br(),
                html.Br(),
            ]),

    ])),id={'type': 'collapse','index': n_addbank_clicks + n_addgrp_clicks},is_open=False)     
    ])

    return control1

def generateControls(triggered, n_addbank_clicks, n_addgrp_clicks):    
 
    addparentgroup= dbc.Row([
        dbc.Col(
            dcc.RadioItems(
                id={'type': 'add_rdo_1',
                            'index': n_addbank_clicks + n_addgrp_clicks},
                options=[
                    {"label": "ANY", "value": 'any'},
                    {"label": "ALL", "value": 'all'}
                ],
                className="form-check-label",
                value='all',
                labelStyle={'display': 'inline-block'},
            ))
       ],
        align="left",
        no_gutters=True,
    )

    addbankSubControls = dbc.Row([
        dbc.Col(
            html.Div(children=[
                html.Div(id={'type': 'add_rdo_1', 'index': n_addbank_clicks +
                                     n_addgrp_clicks}, style={"color": "blue", "fontSize": "12px"})
            ])
        )],
        align="left",
        no_gutters=True,
    )

    subcontrols = dbc.Row([
        dbc.Col(
            addparentgroup if triggered == 'rgp_add_group' else addbankSubControls,
        ),
        dbc.Col(
            dcc.Input(
                id={
                    'type': 'txt_BoonName',
                    'index': n_addbank_clicks + n_addgrp_clicks
                },
            )),
        dbc.Col(
            dcc.Dropdown(
                id={
                    'type': 'dynamic-dropdown',
                    'index': n_addbank_clicks + n_addgrp_clicks
                },
                options=[{'label': i, 'value': i}
                         for i in ['NYC', 'MTL', 'LA', 'TOKYO']]
            )),
        dbc.Col(
            dcc.Input(
                id={
                    'type': 'txt_group',
                    'index': n_addbank_clicks + n_addgrp_clicks
                },
                value=n_addgrp_clicks,
                disabled=True
            )),
        dbc.Col(
            html.Div(children=[
                html.Div(
                    id={
                        'type': 'dynamic_output_of_controls',
                                'index': n_addbank_clicks + n_addgrp_clicks
                    }
                ),
                html.Br(),
                html.Br(),
            ]),
        ),
    ])
    control1 = html.Div([subcontrols])

    # control1 = html.Div([
    #     # dbc.Collapse(dbc.Card(dbc.CardBody([subcontrols])),id={'type': 'collapse','index': n_addbank_clicks + n_addgrp_clicks},is_open=False)
    #     # if triggered == 'rgp_add_group' else
    #     dbc.Collapse(
    #         dbc.Card(dbc.CardBody( 
                
    #             html.Div(children=[
    #                 subcontrols                
    #             ],id={
    #                     'type': 'subcontrols_m',
    #                             'index': n_addbank_clicks + n_addgrp_clicks
    #                 }
    #         ), )),            
    #         id={
    #             'type': 'collapse','index': n_addbank_clicks + n_addgrp_clicks
    #             },
    #         is_open=True,
    #     ),
        
    # ])

    return control1


app = dash.Dash(__name__, external_stylesheets=[
                dbc.themes.SIMPLEX], suppress_callback_exceptions=True)

app.layout = html.Div([
    dbc.Row([
        dbc.Col(
            html.Div([
                dbc.ButtonGroup(
                     [
                         dbc.Button(id="rgp_add_group", children="add bank group", outline=True,
                                    color="info", className="mr-1", n_clicks=0),
                         dbc.Button(id="rgp_add_bank", children="add bank", outline=True,
                                    color="primary", className="mr-1", n_clicks=0, style={"marginleft": "15px"}),
                         dbc.Button(id="rgp_view_bank", children="view banks", outline=True,
                                    color="danger", className="mr-1", n_clicks=0, style={"marginleft": "15px"}),
                         dbc.Button(id="rgp_del_bank", children="delete", outline=True,
                                    color="danger", className="mr-1", n_clicks=0, style={"marginleft": "15px"}),
                         dbc.Button(id="rgp_submit_button", type='submit',
                                    children="Submit", className="mr-1",  outline=True, color="success", style={"marginleft": "15px"})
                     ],
                     size="sm",
                     ),

            ]),
        ),
    ]),
    dbc.Row([
        dbc.Col(
            html.Div([
                html.Br(),
                html.Br(),
                dbc.Card(
                    dbc.CardBody(
                        [                           
                            html.Div(id='dynamic_control_create_container', children=[]),
                        ]
                    )
                )
            ]),
        ),
    ]),
])


@app.callback(
    Output('dynamic_control_create_container', 'children'),
    Input('rgp_add_group', 'n_clicks'),
    State('rgp_add_bank', 'n_clicks'),    
    State('dynamic_control_create_container', 'children'))
def display_dropdowns_1(n_addgrp_clicks, n_addbank_clicks, children):
    ctx = dash.callback_context
    triggered = ctx.triggered[0].get("prop_id").split(".")[0]
    print("Triggered dynamic_control_create_container ", triggered, "n_addgrp_clicks", n_addgrp_clicks, "n_addbank_clicks",
          n_addbank_clicks, "n_delbank_clicks")
    
    if triggered == 'rgp_add_group':
        new_element = generateCardtoCollapse(triggered,n_addbank_clicks, n_addgrp_clicks)
        children.append(new_element)
    
    return children

@app.callback(
    Output({'type': 'innner_dynamic_controls', 'index': MATCH}, 'children'),            
    Input('rgp_add_bank', 'n_clicks'),
    Input('rgp_view_bank', 'n_clicks'),
    Input('rgp_del_bank', 'n_clicks'),
    Input('rgp_submit_button', 'n_clicks'),
    State('rgp_add_group', 'n_clicks'),
    State({'type': 'innner_dynamic_controls', 'index': MATCH}, 'children'))    
def display_dropdowns( n_addbank_clicks, n_viewbank_clicks, n_delbank_clicks, n_submitbank_clicks,n_addgrp_clicks, children):
    ctx = dash.callback_context
    triggered = ctx.triggered[0].get("prop_id").split(".")[0]
    print("Triggered COLLAPSE ", triggered, "n_addgrp_clicks", n_addgrp_clicks, "n_addbank_clicks",
          n_addbank_clicks, "n_delbank_clicks", n_delbank_clicks, "n_submitbank_clicks", n_submitbank_clicks ,"children",  children )

    if children is None:
        children=[]

    if triggered == 'rgp_add_bank':
        new_element = generateControls(triggered, n_addbank_clicks, n_addgrp_clicks)

        children.append(new_element)
 

    if triggered == 'rgp_del_bank':
        children = children[:-1]

    return children
    

@app.callback(
    Output({'type': 'dynamic_output_of_controls', 'index': MATCH}, 'children'),
    Input({'type': 'dynamic-dropdown', 'index': MATCH}, 'value'),
    State({'type': 'dynamic-dropdown', 'index': MATCH}, 'id'),
    Input({'type': 'add_rdo_1', 'index': MATCH}, 'value'),
    State({'type': 'add_rdo_1', 'index': MATCH}, 'id'),
    Input({'type': 'txt_BoonName', 'index': MATCH}, 'value'),
    State({'type': 'txt_BoonName', 'index': MATCH}, 'id'),
)
def display_output(value, id, rdovalue, rdoid, txtvalue, txtid):
    # return html.Div('Dropdown {} = {}'.format(id['index'], value) + '|Radio {} = {}'.format(rdoid['index'], rdovalue) \
    #      + '|TextBox {} = {}'.format(txtid['index'], txtvalue))
    return ('Dropdown {}'.format(value) + '|Radio {}'.format(rdovalue)
            + '|TextBox {}'.format(txtvalue)).split('|')

 

@app.callback(
    Output({'type': 'collapse', 'index': MATCH}, 'is_open'),
    [Input({'type': 'collapse-button', 'index': MATCH}, 'n_clicks')],
    [State({'type': 'collapse', 'index': MATCH}, 'is_open')],
)
def toggle_collapse(n, is_open):
    print("I am trying to collapse")
    if n:
        return not is_open
    return is_open


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

标签： pythonplotly-dash