如何在收到新数据后替换破折号/绘图表/或更新当前表

Question

我想建立一个不时更新的DataTable。每次发生这种情况时，表都应该从 csv 文件中获取数据。为了做到这一点，我构建了一个生成并返回表的函数。这在第二次更新后有效 - 但我生成的第一个表仍然存在，因此我最终得到一个做我想做的事但另一个只是保留的表......

上面的一个是第二个，它更新了。底部的那个是我首先生成的，

这是我的代码：

import random
import dash
from dash.dependencies import Input, Output, State
import dash_table
import dash_html_components as html
import pandas as pd

df = pd.read_csv('.../dummy2_csv.csv')

def maketable(dataf):
tab = html.Div([dash_table.DataTable(
id='adding-rows-table',
editable=True,
data=dataf.to_dict('rows'),
columns=[{'name': i, 'id': i} for i in dataf.columns])])
return tab

app = dash.Dash(__name__)

app.layout = html.Div([
html.Div(id='my-div'),
maketable(df),
html.Button('+', id='editing-rows-button', n_clicks=0),
html.Button('update', id='btn-save', n_clicks=0)
])

@app.callback(
Output(component_id='my-div', component_property='children'),
[Input('btn-save', 'n_clicks'), Input('adding-rows-table', 'data')]
)
def update_output_div(n_clicks, data):
changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
if 'btn-save' in changed_id:
df2 = pd.DataFrame(data)
for col in df2.columns:
# new values
df2[col].values[:] = random.randint(0,9)
df2.to_csv('.../dummy2_csv.csv', encoding='utf-8', index=False)
return maketable(df2)

@app.callback(
Output('adding-rows-table', 'data'),
[Input('editing-rows-button', 'n_clicks')],
[State('adding-rows-table', 'data'),
State('adding-rows-table', 'columns')])
def add_row(n_clicks, rows, columns):
if n_clicks > 0:
rows.append({c['id']: '' for c in columns})
return rows

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

提前感谢您的帮助！

贝斯特，T.

Answer 1

我让它工作了

• 问题出在回调函数中。

检查：

import dash
from dash.dependencies import Input, Output, State
import dash_table
import dash_daq as daq
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

df = pd.read_csv('.../dummy2_csv.csv')
body = dbc.Container(
[
dbc.Row(
[
dash_table.DataTable(id="dash_neu", editable=True, row_deletable=True, columns=[{'name': i, 'id': i} for i in df.columns], data=df.to_dict('records')),
dbc.Col(html.Button('+', id='editing-rows-button', n_clicks=0)),
dbc.Col(html.Button('update', id='btn-save', n_clicks=0))
]
)])
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([body])

@app.callback(
[dash.dependencies.Output("dash_neu", "data"), dash.dependencies.Output("dash_neu", "columns")],
[Input("btn-save", "n_clicks"), Input('editing-rows-button', 'n_clicks')],
[State('dash_neu', 'data'), State('dash_neu', 'columns')]
)
def update(button, clicked, data, columns):
changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
if 'btn-save' in changed_id:
df = pd.DataFrame(data)
df.to_csv('.../dummy2_csv.csv', encoding='utf-8', index=False)
columns = [{'name': i, 'id': i} for i in df.columns]
data = df.to_dict('records')
return data, columns
if 'editing-rows-button' in changed_id:
if clicked > 0:
data.append({c['id']: '' for c in columns})
return data, columns
return data, columns

Answer 2

看起来问题是因为您调用了函数来构建表，该函数在从回调接收表的div之外构建表。尝试将布局更改为以下内容：

app.layout = html.Div([
html.Div(id='my-div', children=[maketable(df)]),
html.Button('+', id='editing-rows-button', n_clicks=0),
html.Button('update', id='btn-save', n_clicks=0)
])