如何在Dash中通过回调函数交互式更新DataTable？

一、修复复选框过滤无效的问题 #

你的代码里回调函数定义在了app.run_server()之后，Dash启动时无法识别这个回调，导致操作复选框后表格无变化。另外global df完全没必要，直接基于原始数据过滤即可。

修复后的代码（仅过滤功能）：

# import dash and standard packages
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd

# creating the base table
df = pd.DataFrame(columns=['car', 'category', 'price'], data=[[1, 'SUV', 27000], [2, 'Sports', 90000],[3, 'SUV', 47000]])

# launch the app
app = dash.Dash()
app.layout = html.Div(children=[
    dcc.Checklist(id='category-list',
                  options=[{'label':s ,'value':s} for s in df['category'].unique()],
                  value=[s for s in df['category'].unique()],
                  labelStyle={"display": "block"}),
    html.Div([dash.dash_table.DataTable(
                id='scorecard-table',
                data=df.to_dict('records'),
                columns=[{"name": i, "id": i} for i in df.columns],
                fixed_rows={'headers': True, 'data': 0},
                fixed_columns={'headers': True, 'data': 1},
                export_columns='visible',
                export_format='xlsx')
    ])], style={'border':'2px grey solid'})

# update the table：回调必须放在run_server之前
@app.callback(
    Output('scorecard-table', 'data'),
    Input('category-list', 'value'),
)
def update_output(selected_categories):
    # 基于选中的类别过滤数据
    filtered_df = df[df['category'].isin(selected_categories)]
    return filtered_df.to_dict('records')

if __name__ == '__main__':
    app.run_server(debug=True)  # 开启debug方便调试

二、实现手动输入修改数据（价格乘以系数） #

如果你需要根据用户输入的系数修改表格中的价格列，可添加一个输入框，同时监听复选框和输入框的变化，同步更新表格：

完整代码示例：

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd

df = pd.DataFrame(columns=['car', 'category', 'price'], data=[[1, 'SUV', 27000], [2, 'Sports', 90000],[3, 'SUV', 47000]])

app = dash.Dash()
app.layout = html.Div(children=[
    # 类别复选框
    dcc.Checklist(id='category-list',
                  options=[{'label':s ,'value':s} for s in df['category'].unique()],
                  value=[s for s in df['category'].unique()],
                  labelStyle={"display": "block"}),
    # 价格系数输入框
    html.Div([
        html.Label("价格调整系数："),
        dcc.Input(id='price-multiplier', type='number', value=1, min=0.1, step=0.1)
    ], style={'margin': '10px 0'}),
    # 数据表格
    html.Div([dash.dash_table.DataTable(
                id='scorecard-table',
                data=df.to_dict('records'),
                columns=[{"name": i, "id": i} for i in df.columns],
                fixed_rows={'headers': True, 'data': 0},
                fixed_columns={'headers': True, 'data': 1},
                export_columns='visible',
                export_format='xlsx')
    ])], style={'border':'2px grey solid', 'padding': '10px'})

@app.callback(
    Output('scorecard-table', 'data'),
    [Input('category-list', 'value'),
     Input('price-multiplier', 'value')]
)
def update_table(selected_categories, multiplier):
    # 先过滤类别
    filtered_df = df[df['category'].isin(selected_categories)].copy()
    # 调整价格：乘以系数并保留整数
    filtered_df['price'] = (filtered_df['price'] * multiplier).astype(int)
    return filtered_df.to_dict('records')

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

关键说明： #

• 回调可以同时监听多个输入组件的变化，这里同时监听复选框的选中值和输入框的系数值
• 处理数据时要使用.copy()避免修改原始DataFrame
• 输入框设置了min和step参数，限制输入范围和步长，提升用户体验

内容的提问来源于stack exchange，提问作者Quastiat