data table 组件中的修改数据不会在页面重新加载时显示

Question

数据solar.csv：https://raw.githubusercontent.com/plotly/datasets/master/solar.csv

这是一个代码：

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

df = pd.read_csv('D:/solar.csv')

app = dash.Dash(__name__)

app.layout = html.Div([
            dash_table.DataTable(
                id='table',
                columns=[{"name": i, "id": i} for i in df.columns],
                data=df.to_dict("rows"),
                editable=True
            ),
            html.Button(id="save-button",n_clicks=0,children="Save"),
            html.Div(id="output-1",children="Press button to save changes")
])

@app.callback(
        Output("output-1","children"),
        [Input("save-button","n_clicks")],
        [State("table","data")]
        )

def selected_data_to_csv(nclicks,table1): 
    if nclicks == 0:
        raise PreventUpdate
    else:
        pd.DataFrame(table1).to_csv('D:/solar.csv',index=False)
        return "Data Submitted"

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

当我从浏览器编辑 table 中的数据并按下保存按钮后，修改后的数据正确保存在 solar.csv 中。问题是，如果我刷新页面，则会显示旧数据（未修改）数据。

我尝试了几种方法，比如在 selected_data_to_csv() 中使用全局变量，但没有成功。

问题：如何修改上面的代码，以便在重新加载网页时显示修改后的数据？

原始代码来自：Is it possible to export dash datatable to a specific location on disk or directly to SQL Server?

Answer 1

啊，问得好。

为此，将 app.layout 设置为一个函数。然后它应该在您刷新时评估该函数，并在这样做时提取更新的、保存的数据。

即下面的layout_function：

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

#df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
df = pd.read_csv('H://R//filename.csv')

app = dash.Dash(__name__)

def layout_function():
    
    df = pd.read_csv('H://R//filename.csv')
    
    return html.Div([
                dash_table.DataTable(
                    id='table',
                    columns=[{"name": i, "id": i} for i in df.columns],
                    data=df.to_dict("rows"),
                    editable=True
                ),
                html.Button(id="save-button",children="Save",n_clicks=0),
                html.Div(id="output-1",children="Press button to save changes")
                ])

app.layout = layout_function
 
@app.callback(
        Output("output-1","children"),
        [Input("save-button","n_clicks")],
        [State("table","data")]
        )
      
def selected_data_to_csv(nclicks,table1): 
    if nclicks == 0:
        raise PreventUpdate
    else:
        pd.DataFrame(table1).to_csv('H://R//filename.csv',index=False)
        return "Data Submitted"

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

data table 组件中的修改数据不会在页面重新加载时显示

Modified data in data table component is not displayed on page reload

dashboard

plotly

plotly-dash