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

Question

我对PythonDash应用程序非常陌生，正在尝试构建一个需要在dbc.card中包含一组动态控件的站点。当我尝试将控件添加到dynamic dbc.card时，它并没有添加到其中。（添加到两个组中）我将非常感谢您的帮助。我已经为此工作了2天，我无法让它工作（可能是我对dash还不熟悉）。 enter image description here

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)