首页 > 解决方案 > 动态更新破折号表返回空行

问题描述

我制作了这个小仪表板,我想在页面末尾测试一个动态更新的“结果表”。我创建了这些测试行来查看如何更新它,但它似乎没有正确更新。它在输出表中显示了另外两行,但没有显示任何值。打印出 df 时,会显示正确的值。

如果你能帮助我,那就太好了。

干杯, Mjst


button_berechnen = html.Div([
    dbc.Row([
        dcc.Input(
            id="input_marge",
            placeholder= 'marge in 1XX% i.e. 1.4'),
        html.Button('Berechnen', id ='submit-marge', n_clicks = 0),
    ]),
])
#output tabelle
output_table = html.Div([
    dash_table.DataTable(
    id = 'output_table',
    columns = [ {'name' : 'Index', 'id': "index"},
                {'name' : 'Produkt', 'id':"produkt"},
                {'name' : 'Ebay', 'id':"ebay"},
                {'name' : 'Amazon', 'id':"amazon"},
                {'name' : 'Real', 'id':"real"},
                {'name' : 'Webshop', 'id':"webshop"}],
    style_cell = {
        'backgroundColor': 'rgb(50,50,50)',
        'color': 'white'

    },
    editable = True
    )
])

app.layout = dbc.Container([
    button_berechnen,
    output_table,

])


@app.callback(Output('output_table', 'data'),
            Input('submit-marge', 'n_clicks'),
            #Input('produkt_daten', 'data'),
            State('input_marge', 'value'))
#berechnen des output tables
def rows_berechnen(n_clicks, marge):
    if n_clicks >0 :
        df_preise = pd.DataFrame(columns = {'Produkt', 'Ebay', 'Amazon', 'Real', 'Webshop'})
        test = {'Produkt' : 'marge', 'Ebay': marge, 'Amazon': marge, 'Real': marge, 'Webshop': marge}
        test2 = {'Produkt' : 'marge', 'Ebay': marge, 'Amazon': marge, 'Real': marge, 'Webshop': marge}
        df_preise = df_preise.append(test, ignore_index=True)
        df_preise = df_preise.append(test2, ignore_index=True)

        print(df_preise)
        df = df_preise.to_dict(orient ='records')
        return df
    raise PreventUpdate



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

标签: pythonplotly-dash

解决方案


定义数据表时尝试data=[]在布局中设置。有时 Dash 会出现未明确设置的属性的问题。

编辑:问题来自columns于定义的方式。我把它改成了这个,它起作用了:

columns=[{'name': 'Index', 'id': "Index"},
                 {'name': 'Produkt', 'id': "Produkt"},
                 {'name': 'Ebay', 'id': "Ebay"},
                 {'name': 'Amazon', 'id': "Amazon"},
                 {'name': 'Real', 'id': "Real"},
                 {'name': 'Webshop', 'id': "Webshop"}],

推荐阅读