Plotly dash table 添加行并更新输入数据

Question

我正在尝试根据输入数据制作破折号 table，但我坚持添加更多行以添加新输入。实际上我读了这个 docs 并且我知道我可以直接输入破折号 table 但我想从输入更新破折号 table.

下面是我的代码：

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

Plotly dash table 添加行并更新输入数据

Plotly dash table add rows and update input data

python

plotly