135-1821-9792

秀啊，用Python快速开发在线数据库更新修改工具

 1 简介

这是我的系列教程「Python+Dash快速web应用开发」的第十三期，在上一期中，我们一起认识了Dash自带的交互式表格组件dash_table，并学会了如何自定义表格中不同部分的样式。

创新互联是专业的潜江网站建设公司，潜江接单;提供成都网站设计、网站建设、外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行潜江网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

而今天的教程，我们将继续深入认识dash_table的更多交互方面的功能，学习如何为渲染出的表格分页，并添加动态内容修改等交互功能。

图1

2 dash_table的基础交互能力

dash_table的核心功能是赋予用户与图表进行快捷交互的能力，下面我们来学习其基础常用的一些交互功能：

2.1 分页翻页

当我们要展示的数据行数较多时，在网页中渲染可以选择分页，这在dash_table中实现起来比较方便，根据数据传递方式的不同，可以分为「前端分页」与「后端分页」：

2.1.1 前端分页

前端分页顾名思义，就是在我们访问Dash应用时，表格内所有页面的数据一次性加载完成，适合数据量不大的情况，将数据存储压力转移到浏览器端。

通过参数page_size设置每页要显示的记录行数，Dash会自动帮我们分好页，并配上翻页部件：

app1.py

 
 
 
 
      
  
  
  
  1. import dash 
    2.   
  
  
  
  2. import dash_bootstrap_components as dbc 
    3.   
  
  
  
  3. import dash_table 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. import seaborn as sns 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. df = sns.load_dataset('tips') 
    8.   
  
  
  
  8. df.insert(0, '#', df.index) 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. app = dash.Dash(__name__) 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12. app.layout = dbc.Container( 
    13.   
  
  
  
  13.     [ 
    14.   
  
  
  
  14.         dash_table.DataTable( 
    15.   
  
  
  
  15.             id='dash-table', 
    16.   
  
  
  
  16.             data=df.to_dict('records'), 
    17.   
  
  
  
  17.             columns=[ 
    18.   
  
  
  
  18.                 {'name': column, 'id': column} 
    19.   
  
  
  
  19.                 for column in df.columns 
    20.   
  
  
  
  20.             ], 
    21.   
  
  
  
  21.             page_size=15,  # 设置单页显示15行记录行数 
    22.   
  
  
  
  22.             style_header={ 
    23.   
  
  
  
  23.                 'font-family': 'Times New Romer', 
    24.   
  
  
  
  24.                 'font-weight': 'bold', 
    25.   
  
  
  
  25.                 'text-align': 'center' 
    26.   
  
  
  
  26.             }, 
    27.   
  
  
  
  27.             style_data={ 
    28.   
  
  
  
  28.                 'font-family': 'Times New Romer', 
    29.   
  
  
  
  29.                 'text-align': 'center' 
    30.   
  
  
  
  30.             } 
    31.   
  
  
  
  31.         ) 
    32.   
  
  
  
  32.     ], 
    33.   
  
  
  
  33.     style={ 
    34.   
  
  
  
  34.         'margin-top': '50px' 
    35.   
  
  
  
  35.     } 
    36.   
  
  
  
  36. ) 
    37.   
  
  
  
  37.  
    38.   
  
  
  
  38. if __name__ == '__main__': 
    39.   
  
  
  
  39.     app.run_server(debug=True) 
    40.

图2

2.1.2 后端分页

虽然前端分页简单易用，但当我们的数据很大时，强行使用前端分页会给「网络传输」和「浏览器端」带来不小的延迟和内存压力，严重影响用户体验，因此Dash贴心地为我们准备了「后端分页」方式。

这时首先我们得为DataTable设置参数page_action='custom'，这是使用后端分页的先决条件，接下来我们需要认识一些新的参数：

page_current，int型，对应当前翻到的页码;

page_count，int型，对应显示的总页数;

我们在使用「后端分页」时，实际上就是通过用户当前翻到的页码，以及设定的page_size，来动态地在翻页后加载对应批次的数据，并控制显示的总页数，参考下面这个简单的例子：

app2.py

 
 
 
 
      
  
  
  
  1. import dash 
    2.   
  
  
  
  2. import dash_bootstrap_components as dbc 
    3.   
  
  
  
  3. import dash_table 
    4.   
  
  
  
  4. from dash.dependencies import Input, Output 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. import seaborn as sns 
    7.   
  
  
  
  7. import pandas as pd 
    8.   
  
  
  
  8. from tqdm import tqdm 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. # 压力测试 
    11.   
  
  
  
  11. df = pd.concat([sns.load_dataset('tips') for _ in tqdm(range(1000))], ignore_index=True) 
    12.   
  
  
  
  12. df.insert(0, '#', df.index) 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14. app = dash.Dash(__name__) 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16. app.layout = dbc.Container( 
    17.   
  
  
  
  17.     [ 
    18.   
  
  
  
  18.         dbc.Spinner( 
    19.   
  
  
  
  19.             dash_table.DataTable( 
    20.   
  
  
  
  20.                 id='dash-table', 
    21.   
  
  
  
  21.                 columns=[ 
    22.   
  
  
  
  22.                     {'name': column, 'id': column} 
    23.   
  
  
  
  23.                     for column in df.columns 
    24.   
  
  
  
  24.                 ], 
    25.   
  
  
  
  25.                 page_size=15,  # 设置单页显示15行记录行数 
    26.   
  
  
  
  26.                 page_action='custom', 
    27.   
  
  
  
  27.                 page_current=0, 
    28.   
  
  
  
  28.                 style_header={ 
    29.   
  
  
  
  29.                     'font-family': 'Times New Romer', 
    30.   
  
  
  
  30.                     'font-weight': 'bold', 
    31.   
  
  
  
  31.                     'text-align': 'center' 
    32.   
  
  
  
  32.                 }, 
    33.   
  
  
  
  33.                 style_data={ 
    34.   
  
  
  
  34.                     'font-family': 'Times New Romer', 
    35.   
  
  
  
  35.                     'text-align': 'center' 
    36.   
  
  
  
  36.                 } 
    37.   
  
  
  
  37.             ) 
    38.   
  
  
  
  38.         ) 
    39.   
  
  
  
  39.     ], 
    40.   
  
  
  
  40.     style={ 
    41.   
  
  
  
  41.         'margin-top': '50px' 
    42.   
  
  
  
  42.     } 
    43.   
  
  
  
  43. ) 
    44.   
  
  
  
  44.  
    45.   
  
  
  
  45.  
    46.   
  
  
  
  46. @app.callback( 
    47.   
  
  
  
  47.     [Output('dash-table', 'data'), 
    48.   
  
  
  
  48.      Output('dash-table', 'page_count')], 
    49.   
  
  
  
  49.     [Input('dash-table', 'page_current'), 
    50.   
  
  
  
  50.      Input('dash-table', 'page_size')] 
    51.   
  
  
  
  51. ) 
    52.   
  
  
  
  52. def refresh_page_data(page_current, page_size): 
    53.   
  
  
  
  53.     return df.iloc[page_current * page_size:(page_current + 1) * page_size].to_dict('records'), 1 + df.shape[ 
    54.   
  
  
  
  54.         0] // page_size 
    55.   
  
  
  
  55.  
    56.   
  
  
  
  56.  
    57.   
  
  
  
  57. if __name__ == '__main__': 
    58.   
  
  
  
  58.     app.run_server(debug=True) 
    59.

可以看到，即使我们完整的数据集被我concat到24万行，加载应用以及网页内翻页时依然轻松自如毫无压力，在实际应用中你还可以将翻页部分改成受到LIMIT与OFFSET控制的数据库查询过程，使得应用运行的更加快速高效：

图3

2.2 对单元格内容进行编辑

讲完了分页翻页，接下来我们来学习dash_table中更加强大的功能——单元格内容编辑。

一个现代化的web应用当然不能局限于仅仅查看数据这么简单，Dash同样赋予了我们双击数据表单元格进行数据编辑的能力，首先得设置参数editable=True，即开启表格编辑模式，接下来就可以对数据区域单元格进行任意的双击选中编辑。

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

 
 
 
 
      
  
  
  
  1. style_data_conditional=[ 
    2.   
  
  
  
  2.                 { 
    3.   
  
  
  
  3.                     # 对选中状态下的单元格进行自定义样式 
    4.   
  
  
  
  4.                     "if": {"state": "selected"}, 
    5.   
  
  
  
  5.                     "background-color": "#b3e5fc", 
    6.   
  
  
  
  6.                     "border": "none" 
    7.   
  
  
  
  7.                 }, 
    8.   
  
  
  
  8.             ] 
    9.

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

app3.py

 
 
 
 
      
  
  
  
  1. import dash 
    2.   
  
  
  
  2. import dash_html_components as html 
    3.   
  
  
  
  3. import dash_core_components as dcc 
    4.   
  
  
  
  4. import dash_bootstrap_components as dbc 
    5.   
  
  
  
  5. import dash_table 
    6.   
  
  
  
  6. from dash.dependencies import Input, Output 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. import seaborn as sns 
    9.   
  
  
  
  9. import pandas as pd 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. df = sns.load_dataset('tips') 
    12.   
  
  
  
  12. df.insert(0, '#', df.index) 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14. app = dash.Dash(__name__) 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16. app.layout = dbc.Container( 
    17.   
  
  
  
  17.     [ 
    18.   
  
  
  
  18.         dash_table.DataTable( 
    19.   
  
  
  
  19.             id='dash-table', 
    20.   
  
  
  
  20.             data=df.to_dict('records'), 
    21.   
  
  
  
  21.             columns=[ 
    22.   
  
  
  
  22.                 {'name': column, 'id': column} 
    23.   
  
  
  
  23.                 for column in df.columns 
    24.   
  
  
  
  24.             ], 
    25.   
  
  
  
  25.             fixed_rows={'headers': True}, 
    26.   
  
  
  
  26.             page_size=15, 
    27.   
  
  
  
  27.             editable=True, 
    28.   
  
  
  
  28.             style_header={ 
    29.   
  
  
  
  29.                 'font-family': 'Times New Romer', 
    30.   
  
  
  
  30.                 'font-weight': 'bold', 
    31.   
  
  
  
  31.                 'text-align': 'center' 
    32.   
  
  
  
  32.             }, 
    33.   
  
  
  
  33.             style_data={ 
    34.   
  
  
  
  34.                 'font-family': 'Times New Romer', 
    35.   
  
  
  
  35.                 'text-align': 'center' 
    36.   
  
  
  
  36.             }, 
    37.   
  
  
  
  37.             style_data_conditional=[ 
    38.   
  
  
  
  38.                 { 
    39.   
  
  
  
  39.                     # 对选中状态下的单元格进行自定义样式 
    40.   
  
  
  
  40.                     "if": {"state": "selected"}, 
    41.   
  
  
  
  41.                     "background-color": "#b3e5fc", 
    42.   
  
  
  
  42.                     "border": "none" 
    43.   
  
  
  
  43.                 }, 
    44.   
  
  
  
  44.             ] 
    45.   
  
  
  
  45.         ), 
    46.   
  
  
  
  46.         html.H4('与原表格内容比较：', style={'margin-top': '50px'}), 
    47.   
  
  
  
  47.         dcc.Markdown( 
    48.   
  
  
  
  48.             '无差别', 
    49.   
  
  
  
  49.             id='markdown', 
    50.   
  
  
  
  50.             dangerously_allow_html=True 
    51.   
  
  
  
  51.         ) 
    52.   
  
  
  
  52.     ], 
    53.   
  
  
  
  53.     style={ 
    54.   
  
  
  
  54.         'margin-top': '50px' 
    55.   
  
  
  
  55.     } 
    56.   
  
  
  
  56. ) 
    57.   
  
  
  
  57.  
    58.   
  
  
  
  58.  
    59.   
  
  
  
  59. @app.callback( 
    60.   
  
  
  
  60.     Output('markdown', 'children'), 
    61.   
  
  
  
  61.     Input('dash-table', 'data'), 
    62.   
  
  
  
  62.     prevent_initial_call=True 
    63.   
  
  
  
  63. ) 
    64.   
  
  
  
  64. def compare_difference(dash_table_data): 
    65.   
  
  
  
  65.     print(pd.DataFrame(dash_table_data)) 
    66.   
  
  
  
  66.  
    67.   
  
  
  
  67.     return df.compare(pd.DataFrame(dash_table_data)).to_html() 
    68.   
  
  
  
  68.  
    69.   
  
  
  
  69.  
    70.   
  
  
  
  70. if __name__ == '__main__': 
    71.   
  
  
  
  71.     app.run_server(debug=True) 
    72.

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

图4

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

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

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

 
 
 
 
      
  
  
  
  1. from sqlalchemy import create_engine 
    2.   
  
  
  
  2. import seaborn as sns 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. df = sns.load_dataset('tips') 
    5.   
  
  
  
  5. df.insert(0, '#', df.index) 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. engine = create_engine('mysql+pymysql://root:mysql@localhost/DASH') 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. df.to_sql('tips', con=engine, if_exists='replace', index=False) 
    10.

图5

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

图6

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

app4.py

 
 
 
 
      
  
  
  
  1. import dash 
    2.   
  
  
  
  2. import dash_bootstrap_components as dbc 
    3.   
  
  
  
  3. import dash_core_components as dcc 
    4.   
  
  
  
  4. import dash_html_components as html 
    5.   
  
  
  
  5. import dash_table 
    6.   
  
  
  
  6. from dash.dependencies import Input, Output, State 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. from sqlalchemy import create_engine 
    9.   
  
  
  
  9. import pandas as pd 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. engine = create_engine('mysql+pymysql://root:mysql@localhost/DASH') 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. app = dash.Dash(__name__) 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. app.layout = dbc.Container( 
    16.   
  
  
  
  16.     [ 
    17.   
  
  
  
  17.         dbc.Row( 
    18.   
  
  
  
  18.             [ 
    19.   
  
  
  
  19.                 dbc.Col(dbc.Button('更新数据表', id='refresh-tables', style={'width': '100%'}), width=2), 
    20.   
  
  
  
  20.                 dbc.Col(dcc.Dropdown(id='table-select', style={'width': '100%'}), width=2) 
    21.   
  
  
  
  21.             ] 
    22.   
  
  
  
  22.         ), 
    23.   
  
  
  
  23.         html.Hr(), 
    24.   
  
  
  
  24.         dash_table.DataTable( 
    25.   
  
  
  
  25.             id='dash-table', 
    26.   
  
  
  
  26.             editable=True, 
    27.   
  
  
  
  27.             page_size=15, 
    28.   
  
  
  
  28.             style_header={ 
    29.   
  
  
  
  29.                 'font-family': 'Times New Romer', 
    30.   
  
  
  
  30.                 'font-weight': 'bold', 
    31.   
  
  
  
  31.                 'text-align': 'center' 
    32.   
  
  
  
  32.             }, 
    33.   
  
  
  
  33.             style_data={ 
    34.   
  
  
  
  34.                 'font-family': 'Times New Romer', 
    35.   
  
  
  
  35.                 'text-align': 'center' 
    36.   
  
  
  
  36.             }, 
    37.   
  
  
  
  37.             style_data_conditional=[ 
    38.   
  
  
  
  38.                 { 
    39.   
  
  
  
  39.                     # 对选中状态下的单元格进行自定义样式 
    40.   
  
  
  
  40.                     "if": {"state": "selected"}, 
    41.   
  
  
  
  41.                     "background-color": "#b3e5fc", 
    42.   
  
  
  
  42.                     "border": "none" 
    43.   
  
  
  
  43.                 }, 
    44.   
  
  
  
  44.             ] 
    45.   
  
  
  
  45.         ), 
    46.   
  
  
  
  46.         dbc.Button('同步变动到数据库', id='update-tables', style={'display': 'none'}), 
    47.   
  
  
  
  47.         html.P(id='message') 
    48.   
  
  
  
  48.     ], 
    49.   
  
  
  
  49.     style={ 
    50.   
  
  
  
  50.         'margin-top': '50px' 
    51.   
  
  
  
  51.     } 
    52.   
  
  
  
  52. ) 
    53.   
  
  
  
  53.  
    54.   
  
  
  
  54.  
    55.   
  
  
  
  55. @app.callback( 
    56.   
  
  
  
  56.     Output('table-select', 'options'), 
    57.   
  
  
  
  57.     Input('refresh-tables', 'n_clicks') 
    58.   
  
  
  
  58. ) 
    59.   
  
  
  
  59. def refresh_tables(n_clicks): 
    60.   
  
  
  
  60.     if n_clicks: 
    61.   
  
  
  
  61.         return [ 
    62.   
  
  
  
  62.             { 
    63.   
  
  
  
  63.                 'label': table, 
    64.   
  
  
  
  64.                 'value': table 
    65.   
  
  
  
  65.             } 
    66.   
  
  
  
  66.             for table in pd.read_sql_query('SHOW TABLES', con=engine)['Tables_in_dash'] 
    67.   
  
  
  
  67.         ] 
    68.   
  
  
  
  68.  
    69.   
  
  
  
  69.     return dash.no_update 
    70.   
  
  
  
  70.  
    71.   
  
  
  
  71.  
    72.   
  
  
  
  72. @app.callback( 
    73.   
  
  
  
  73.     [Output('dash-table', 'data'), 
    74.   
  
  
  
  74.      Output('dash-table', 'columns'), 
    75.   
  
  
  
  75.      Output('update-tables', 'style')], 
    76.   
  
  
  
  76.     Input('table-select', 'value') 
    77.   
  
  
  
  77. ) 
    78.   
  
  
  
  78. def render_dash_table(value): 
    79.   
  
  
  
  79.     if value: 
    80.   
  
  
  
  80.         df = pd.read_sql_table(value, con=engine) 
    81.   
  
  
  
  81.  
    82.   
  
  
  
  82.         return df.to_dict('records'), [ 
    83.   
  
  
  
  83.             {'name': column, 'id': column} 
    84.   
  
  
  
  84.             for column in df.columns 
    85.   
  
  
  
  85.         ], {'margin-top': '25px'} 
    86.   
  
  
  
  86.  
    87.   
  
  
  
  87.     else: 
    88.   
  
  
  
  88.         return [], [], {'display': 'none'} 
    89.   
  
  
  
  89.  
    90.   
  
  
  
  90.  
    91.   
  
  
  
  91. @app.callback( 
    92.   
  
  
  
  92.     [Output('message', 'children'), 
    93.   
  
  
  
  93.      Output('message', 'style')], 
    94.   
  
  
  
  94.     Input('update-tables', 'n_clicks'), 
    95.   
  
  
  
  95.     [State('dash-table', 'data'), 
    96.   
  
  
  
  96.      State('table-select', 'value')] 
    97.   
  
  
  
  97. ) 
    98.   
  
  
  
  98. def update_to_database(n_clicks, data, value): 
    99.   
  
  
  
  99.  
    100.   
  
  
  
  100.     if n_clicks: 
    101.   
  
  
  
  101.  
    102.   
  
  
  
  102.         try: 
    103.   
  
  
  
  103.             pd.DataFrame(data).to_sql(value, con=engine, if_exists='replace', index=False) 
    104.   
  
  
  
  104.  
    105.   
  
  
  
  105.             return '更新成功！', {'color': 'green'} 
    106.   
  
  
  
  106.         except Exception as e: 
    107.   
  
  
  
  107.             return f'更新失败！{e}', {'color': 'red'} 
    108.   
  
  
  
  108.  
    109.   
  
  
  
  109.     return dash.no_update 
    110.   
  
  
  
  110.  
    111.   
  
  
  
  111. if __name__ == '__main__': 
    112.   
  
  
  
  112.     app.run_server(debug=True) 
    113.

本文名称：秀啊，用Python快速开发在线数据库更新修改工具
本文路径：http://wtcwzsj.com/article/djsijei.html

其他资讯


关于我们
我们的服务
网站建设案例
新闻动态
联系我们

135-1821-9792

公司服务热线
友情链接： 导视牌制作   服务器托管   企业网站建设   柴油发电机机组   仪陇网站建设   南充网站代运维   成都云服务器   德昌县建网站   成都茶叶销售   四川佑馨产后护理   

Copyright © 2009-2022 www.wtcwzsj.com 青羊区广皓图文设计工作室（个体工商户） 版权所有　蜀ICP备19037934号