从多个选项卡布局中回调彼此交互的表格

Question

我正在尝试构建一个破折号应用程序，它有两个选项卡，每个选项卡都有表格。我希望能够将一个选项卡中的行添加到另一个选项卡表中。例如，如果我从推荐候选人表中单击“添加”，它应该将该候选人添加到候选人选项卡表中，反之亦然。 我已尝试以下操作，但我遇到了回调问题，因为当我选择一行并单击操作列中的“添加”时，它没有触发回调。

import dash
from dash import dcc, html, Input, Output, State
import dash_bootstrap_components as dbc
import dash_table
import pandas as pd

# Sample data for demonstration
candidates_df = pd.DataFrame({
    'Name': ['Candidate 1', 'Candidate 2', 'Candidate 3'],
    'Age': [30, 25, 28]
})

recommended_df = pd.DataFrame({
    'Name': ['Recommended 1', 'Recommended 2'],
    'Age': [32, 27],
    'Action': ['Add', 'Add']
})

# Initialize the Dash app
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.config.suppress_callback_exceptions = True

# Define app layout
app.layout = html.Div([
    dcc.Tabs(id='tabs-example', value='tab-1', children=[
        dcc.Tab(label='Candidates', value='tab-1'),
        dcc.Tab(label='Recommended Candidates', value='tab-2'),
    ]),
    html.Div(id='tabs-content')
])

# Callback to render the content of the tabs
@app.callback(
    Output('tabs-content', 'children'),
    Input('tabs-example', 'value')
)
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Candidates'),
            generate_table(candidates_df, 'candidates-table'),
        ])
    elif tab == 'tab-2':
        return html.Div([
            html.H3('Recommended Candidates'),
            generate_table(recommended_df, 'recommended-table'),
        ])
    else:
        return html.Div("404 Error: Page not found")

# Callback to handle adding a candidate
@app.callback(
    Output('candidates-table', 'data'),
    Input('recommended-table', 'active_cell'),
    State('recommended-table', 'data'),
    State('candidates-table', 'data'),
    prevent_initial_call=True
)
def add_candidate(active_cell, recommended_data, candidates_data):
    if active_cell and active_cell['column_id'] == 'Action':
        row_index = active_cell['row']
        candidate_to_add = {k: recommended_data[row_index][k] for k in ['Name', 'Age']}
        candidates_data.append(candidate_to_add)
        print(f"Added candidate: {candidate_to_add}")  # Debugging statement
        return candidates_data
    print("Callback triggered but no action taken")
    return candidates_data

# Function to generate a Dash DataTable
def generate_table(dataframe, table_id, editable=True):
    columns = [{'name': col, 'id': col} for col in dataframe.columns]
    return dash_table.DataTable(
        id=table_id,
        columns=columns,
        data=dataframe.to_dict('records'),
        editable=editable
    )

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

Answer 1

这两个表必须最初在布局中创建，以便可以正确注册和触发回调，而且还因为如果您“从推荐候选表中单击添加，它应该将该候选添加到候选选项卡表中，反之亦然”。

您还可以将表直接定义为各自

dcc.Tab

的子表，并摆脱

render_content

回调（只是一个建议）。

# Initialize the Dash app
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# Function to generate a Dash DataTable
def generate_table(dataframe, table_id, editable=True):
    columns = [{'name': col, 'id': col} for col in dataframe.columns]
    return dash_table.DataTable(
        id=table_id,
        columns=columns,
        data=dataframe.to_dict('records'),
        editable=editable
    )

# Define app layout
app.layout = html.Div([
    dcc.Tabs(id='tabs-example', value='tab-1', children=[
        dcc.Tab(label='Candidates', value='tab-1', children=[
            html.Div([
                html.H3('Candidates'),
                generate_table(candidates_df, 'candidates-table')
            ])
        ]),
        dcc.Tab(label='Recommended Candidates', value='tab-2', children=[
            html.Div([
                html.H3('Recommended Candidates'),
                generate_table(recommended_df, 'recommended-table'),
            ])
        ])
    ])
])

# Callback to handle adding a candidate
@app.callback(
    Output('candidates-table', 'data'),
    Input('recommended-table', 'active_cell'),
    State('recommended-table', 'data'),
    State('candidates-table', 'data'),
    prevent_initial_call=True
)
def add_candidate(active_cell, recommended_data, candidates_data):
    print('add_candidate', active_cell)
    if active_cell and active_cell['column_id'] == 'Action':
        row_index = active_cell['row']
        candidate_to_add = {k: recommended_data[row_index][k] for k in ['Name', 'Age']}
        candidates_data.append(candidate_to_add)
        print(f"Added candidate: {candidate_to_add}")  # Debugging statement
        return candidates_data
    print("Callback triggered but no action taken")
    return candidates_data

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