(数据科学学习手札116)Python+Dash快速web应用开发——交互表格篇(中) (2)

  不过Dash默认的单元格被选中的样式忒丑了(是粉色的你敢信),因此我们可以利用下面的参数设置方式来自定义美化:

style_data_conditional=[ { # 对选中状态下的单元格进行自定义样式 "if": {"state": "selected"}, "background-color": "#b3e5fc", "border": "none" }, ]

  来看一个形象的例子,我们对前端分页方式渲染出的表格进行随意的修改,并在下方对利用pandas的compare比较出的数据框之间的差异结果进行打印:

app3.py

import dash import dash_html_components as html import dash_core_components as dcc import dash_bootstrap_components as dbc import dash_table from dash.dependencies import Input, Output import seaborn as sns import pandas as pd df = sns.load_dataset('tips') df.insert(0, '#', df.index) app = dash.Dash(__name__) app.layout = dbc.Container( [ dash_table.DataTable(, data=df.to_dict('records'), columns=[ {'name': column, 'id': column} for column in df.columns ], fixed_rows={'headers': True}, page_size=15, editable=True, style_header={ 'font-family': 'Times New Romer', 'font-weight': 'bold', 'text-align': 'center' }, style_data={ 'font-family': 'Times New Romer', 'text-align': 'center' }, style_data_conditional=[ { # 对选中状态下的单元格进行自定义样式 "if": {"state": "selected"}, "background-color": "#b3e5fc", "border": "none" }, ] ), html.H4('与原表格内容比较:', style={'margin-top': '50px'}), dcc.Markdown( '无差别',, dangerously_allow_html=True ) ], style={ 'margin-top': '50px' } ) @app.callback( Output('markdown', 'children'), Input('dash-table', 'data'), prevent_initial_call=True ) def compare_difference(dash_table_data): print(pd.DataFrame(dash_table_data)) return df.compare(pd.DataFrame(dash_table_data)).to_html() if __name__ == '__main__': app.run_server(debug=True)

  可以看到,我们成功地对指定单元格元素进行了修改。

(数据科学学习手札116)Python+Dash快速web应用开发——交互表格篇(中)

图4 3 开发数据库内容在线更新工具

  在学习完今天的内容之后,我们就可以开发一个简单的,可在线自由修改并同步变动到数据库的小工具,这里我们以MySQL数据库为例,对示例表进行修改和更新:

  首先我们利用下列代码向示例数据库中新建表格tips:

from sqlalchemy import create_engine import seaborn as sns df = sns.load_dataset('tips') df.insert(0, '#', df.index) engine = create_engine('mysql+pymysql://root:mysql@localhost/DASH') df.to_sql('tips', con=engine, if_exists='replace', index=False)

(数据科学学习手札116)Python+Dash快速web应用开发——交互表格篇(中)

图5  

  接下来我们就以创建好的tips表为例,开发一个Dash应用,进行数据的修改和更新到数据库:

(数据科学学习手札116)Python+Dash快速web应用开发——交互表格篇(中)

图6

  效果非常的不错,你可以在我这个简单示例的基础上,拓展更多新功能,也可以采取后端分页+条件修改的方式来应对大型数据表的修改,全部代码如下:

app4.py

import dash import dash_bootstrap_components as dbc import dash_core_components as dcc import dash_html_components as html import dash_table from dash.dependencies import Input, Output, State from sqlalchemy import create_engine import pandas as pd engine = create_engine('mysql+pymysql://root:mysql@localhost/DASH') app = dash.Dash(__name__) app.layout = dbc.Container( [ dbc.Row( [ dbc.Col(dbc.Button('更新数据表',, style={'width': '100%'}), width=2), dbc.Col(dcc.Dropdown(id='table-select', style={'width': '100%'}), width=2) ] ), html.Hr(), dash_table.DataTable(, editable=True, page_size=15, style_header={ 'font-family': 'Times New Romer', 'font-weight': 'bold', 'text-align': 'center' }, style_data={ 'font-family': 'Times New Romer', 'text-align': 'center' }, style_data_conditional=[ { # 对选中状态下的单元格进行自定义样式 "if": {"state": "selected"}, "background-color": "#b3e5fc", "border": "none" }, ] ), dbc.Button('同步变动到数据库',, style={'display': 'none'}), html.P(id='message') ], style={ 'margin-top': '50px' } ) @app.callback( Output('table-select', 'options'), Input('refresh-tables', 'n_clicks') ) def refresh_tables(n_clicks): if n_clicks: return [ { 'label': table, 'value': table } for table in pd.read_sql_query('SHOW TABLES', con=engine)['Tables_in_dash'] ] return dash.no_update @app.callback( [Output('dash-table', 'data'), Output('dash-table', 'columns'), Output('update-tables', 'style')], Input('table-select', 'value') ) def render_dash_table(value): if value: df = pd.read_sql_table(value, con=engine) return df.to_dict('records'), [ {'name': column, 'id': column} for column in df.columns ], {'margin-top': '25px'} else: return [], [], {'display': 'none'} @app.callback( [Output('message', 'children'), Output('message', 'style')], Input('update-tables', 'n_clicks'), [State('dash-table', 'data'), State('table-select', 'value')] ) def update_to_database(n_clicks, data, value): if n_clicks: try: pd.DataFrame(data).to_sql(value, con=engine, if_exists='replace', index=False) return '更新成功!', {'color': 'green'} except Exception as e: return f'更新失败!{e}', {'color': 'red'} return dash.no_update if __name__ == '__main__': app.run_server(debug=True)

  以上就是本文的全部内容,欢迎在评论区发表你的意见与观点。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsszpj.html