我正在尝试构建一个破折号应用程序,它有两个选项卡,每个选项卡都有表格。我希望能够将一个选项卡中的行添加到另一个选项卡表中。例如,如果我从推荐候选人表中单击“添加”,它应该将该候选人添加到候选人选项卡表中,反之亦然。 我已尝试以下操作,但我遇到了回调问题,因为当我选择一行并单击操作列中的“添加”时,它没有触发回调。
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)
这两个表必须最初在布局中创建,以便可以正确注册和触发回调,而且还因为如果您“从推荐候选表中单击添加,它应该将该候选添加到候选选项卡表中,反之亦然”。
您还可以将表直接定义为各自
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)