python - Plotly dash 表添加行并更新输入数据

Question

我正在尝试根据输入数据制作破折号表，但我坚持添加更多行以添加新输入。其实我读过这个docs我知道我可以直接在破折号表中输入，但我想从输入更新破折号表。

下面是我的代码:

import pandas as pd
import numpy as np
from datetime import datetime as dt
import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State
import dash_table
import dash_bootstrap_components as dbc
from dash_extensions import Download
from dash_extensions.snippets import send_data_frame
import glob
import os
from pandas.tseries.offsets import BDay
import plotly.graph_objects as go

app = dash.Dash(__name__)

MD23 = pd.DataFrame({'Number':[],
                         'PW':[],
                         'Name 1':[],
                         'Name 2':[],
                         'Email':[],
                         'Web':[],
                         'Abc':[]}) 
# ------------------------------------------------------------------------

input_types = ['number', 'password', 'text', 'tel', 'email', 'url', 'search']

app.layout = html.Div([
    html.Div([
        dcc.Input(
            id='my_{}'.format(x),
            type=x,
            placeholder="insert {}".format(x),  # A hint to the user of what can be entered in the control
            minLength=0, maxLength=50,          # Ranges for character length inside input box
            autoComplete='on',
            disabled=False,                     # Disable input box
            readOnly=False,                     # Make input box read only
            required=False,                     # Require user to insert something into input box
            size="20",                          # Number of characters that will be visible inside box
        ) for x in input_types
    ]),

    html.Br(),
    
    html.Button('Add Row',id='add_row',n_clicks=0),
    
    dbc.Row([    
        dbc.Col([html.H5('List',className='text-center'),
        dash_table.DataTable(
                id='table-container_3',
                data=[],
                columns=[{"name":i_3,"id":i_3,'type':'numeric'} for i_3 in MD23.columns],
                style_table={'overflow':'scroll','height':600},
                style_cell={'textAlign':'center'},
                row_deletable=True,
                editable=True)
                ],width={'size':12,"offset":0,'order':1})
            ]),
])


@app.callback(Output('table-container_3', 'data'),
             [Input('my_{}'.format(x),'value')for x in input_types])

def update_data(selected_number, selected_pw, 
                selected_text, selected_tel, 
                selected_email,selected_url,
                selected_search):
    
    data = pd.DataFrame({'Number':[selected_number],
                         'PW':[selected_pw],
                         'Name 1':[selected_text],
                         'Name 2':[selected_tel],
                         'Email':[selected_email],
                         'Web':[selected_url],
                         'Abc':[selected_search]})        
    
    return data.to_dict(orient='records')


# ------------------------------------------------------------------------
if __name__ == '__main__':
    app.run_server(debug=False)

我尝试如下添加行，但没有成功:

@app.callback(
    Output('table-container_3', 'data'),
    Input('add_row', 'n_clicks'),
    State('table-container_3', 'data'),
    State('table-container_3', 'columns'))

def add_row(n_clicks, rows, columns):
    if n_clicks > 0:
        rows.append()
    return rows

我真的需要建议来解决这个问题。非常感谢。

Answer 1

反式尝试用这个回调替换你的回调:

@app.callback(
Output('table-container_3', 'data'),
Input('add_row', 'n_clicks'),
[State('table-container_3', 'data'),
State('table-container_3', 'columns')]+
[State('my_{}'.format(x), 'value') for x in input_types])
def add_row(n_clicks, rows, columns, selected_number, selected_pw,
            selected_text, selected_tel,
            selected_email, selected_url,
            selected_search):

if n_clicks > 0:
    rows.append({c['id']: r for c,r in zip(columns, [selected_number, selected_pw, selected_text, selected_tel, selected_email, selected_url, selected_search])})

return rows