首页 > 解决方案 > 更新后如何渲染破折号数据表

问题描述

我正在创建一个任务管理器,我的目标是打开它,显示表中已有的内容,然后创建新任务并在单击提交时将它们显示在数据表中。

我有它,这样在没有回调的情况下,页面就会像填充表格一样显示出来。通过回调,它以空表的形式返回,并且我的提交按钮似乎并没有真正插入到我的表中。

我尝试创建一个只输出表格的新回调,但我不能使用Output('data-table', 'data')两次。

谁能帮我看看我错过了什么/做错了什么?

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_table
import dash_table.FormatTemplate as ft
import pandas as pd
import sqlite3
from datetime import datetime as dt

conn = sqlite3.connect('BI_Requests.db')
cur = conn.cursor()
#cur.execute("DELETE FROM bi_requests")
cur.execute("CREATE TABLE IF NOT EXISTS bi_requests (id_num integer, "
                "email text, request_title text, request_details text, due_date date, date_requested date)")
conn.commit()


df = pd.read_sql("SELECT email, request_title, request_details, due_date, date_requested FROM bi_requests;", conn, parse_dates=['due_date','date_requested'])
df['due_date'] = pd.to_datetime(df['due_date']).dt.date
df['date_requested'] = pd.to_datetime(df['date_requested']).dt.date
df['diff'] = (df['date_requested']-df['due_date']).dt.days

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.H4('BI Requests'),
    html.Label('Email'),
    dcc.Input(value='', type='email', autoFocus=True, inputMode='email', id='enter_email'),
    html.Label('Request Title'),
    dcc.Input(value='', type='text', id='enter_title'),
    html.Label('Request Details'),
    dcc.Input(value='', type='text', id='enter_details'),
    html.Label('Due Date'),
    dcc.DatePickerSingle(id='enter_due_date'),
    html.Br(),
    html.Br(),
    html.Button('Submit', id='submit_entry'),
    html.Br(),
    html.Br(),
    #generate_table(df),
html.Div([
    dash_table.DataTable(id='data-table',
        columns=[
            {'name':'Email', 'id': 'email' , 'type':'text', 'selectable':True, 'editable':False},
            {'name':'Request Title', 'id': 'request_title' , 'type':'text', 'selectable':True, 'editable':True},
            {'name':'Request Details', 'id': 'request_details' , 'type':'text', 'selectable':True, 'editable':True},
            {'name':'Due', 'id': 'due_date' , 'type':'datetime', 'selectable':True, 'editable':True},
            {'name':'Requested', 'id': 'date_requested' , 'type':'datetime', 'selectable':True, 'editable':False},
            {'name':'Diff', 'id': 'diff' , 'type':'numeric', 'selectable':True, 'editable':False}],
        style_as_list_view=True,
        style_cell={'padding': '5px', 'whiteSpace':'normal', 'height':'auto', 'textAlign':'left'},
        style_header={
                    'backgroundColor': 'navy',
                    'color': 'white',
                    'fontWeight': 'bold'},
        style_data_conditional=[
        {
            'if': {'row_index': 'odd'},
            'backgroundColor': 'rgb(248, 248, 248)'
        }, 
        {
            'if':{
                'filter_query':'{diff} < 4',
            },
            'backgroundColor':'#E6B0AA'
        },
        {
            'if':{
                'filter_query':'{diff} >=4 && {diff} < 14',
            },
            'backgroundColor':'#F9E79F'
        },
        {
            'if':{
                'filter_query':'{diff} > 14',
            },
            'backgroundColor':'#A9DFBF'
        },
    ],  
        style_data={'whiteSpace':'normal', 'height':'auto'},
        style_table={'height': '300px', 'overflowY': 'auto'},
        fixed_rows={'headers': True},
        data=df.to_dict('records'),
        editable=True,
        filter_action="native",
        sort_action="native",
        sort_mode="multi",
        row_selectable="multi",
        row_deletable=True,
        selected_columns=[],
        selected_rows=[],
        page_action="native",
        page_current= 0,
        page_size= 100,
        hidden_columns=['diff']
        )
]),
])

@app.callback(
    Output('data-table', 'data'),
    [Input('submit_entry', 'n_clicks')],
    [Input('data-table', 'derived_virtual_data')],
    [
        State('enter_email', 'value'),
        State('enter_title', 'value'),
        State('enter_details', 'value'),
        State('enter_due_date', 'date')
    ],
) 

def entry_to_db(self, submit_entry, enter_email, enter_title, enter_details, enter_due_date):   
    conn = sqlite3.connect('BI_Requests.db')
    cur = conn.cursor()

    if submit_entry:

        sample_entry = [
            {
                'email':enter_email,
                'request_title':enter_title , 
                'request_details':enter_details,
                'due_date': enter_due_date, 
                'date_requested' : dt.now()
            }
        ]
        insert_entry = cur.execute("INSERT INTO bi_requests (email, request_title, request_details, due_date, date_requested) "
                                                "VALUES (?, ?, ?, ?, ?)", (enter_email, enter_title, enter_details, enter_due_date, dt.now()), sample_entry)

        conn.commit()

        df = pd.read_sql("SELECT email, request_title, request_details, due_date, date_requested FROM bi_requests;", conn, parse_dates=['due_date','date_requested'])
        df['due_date'] = pd.to_datetime(df['due_date']).dt.date
        df['date_requested'] = pd.to_datetime(df['date_requested']).dt.date
        df['diff'] = (df['date_requested']-df['due_date']).dt.days 
        data=df.to_dict('records')

        return data

        raise dash.exceptions.PreventUpdate

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

标签: pythonpandasplotly-dash

解决方案


我认为问题出在你的函数的失败状态。如果submit_entry按钮没有被点击,你的函数将None默认返回。如果您将raise dash.exceptions.PreventUpdate缩进级别移出一个,那么当该按钮未被单击时,它将成为该函数的默认行为。

我认为这应该可行,但每隔一段时间我就会遇到PreventUpdate的一些问题。如果遇到这种情况,您始终可以使用State表数据的 并将其作为默认值返回。


推荐阅读