自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

秀啊，用Python快速開發(fā)在線數(shù)據(jù)庫更新修改工具

作者：費(fèi)弗里
開發(fā) 后端
今天的教程，我們將繼續(xù)深入認(rèn)識dash_table的更多交互方面的功能，學(xué)習(xí)如何為渲染出的表格分頁，并添加動態(tài)內(nèi)容修改等交互功能。

 1 簡介

這是我的系列教程「Python+Dash快速web應(yīng)用開發(fā)」的第十三期，在上一期中，我們一起認(rèn)識了Dash自帶的交互式表格組件dash_table，并學(xué)會了如何自定義表格中不同部分的樣式。

而今天的教程，我們將繼續(xù)深入認(rèn)識dash_table的更多交互方面的功能，學(xué)習(xí)如何為渲染出的表格分頁，并添加動態(tài)內(nèi)容修改等交互功能。

 

 

 

[[392325]]

 

圖1

2 dash_table的基礎(chǔ)交互能力

dash_table的核心功能是賦予用戶與圖表進(jìn)行快捷交互的能力，下面我們來學(xué)習(xí)其基礎(chǔ)常用的一些交互功能：

2.1 分頁翻頁

當(dāng)我們要展示的數(shù)據(jù)行數(shù)較多時，在網(wǎng)頁中渲染可以選擇分頁，這在dash_table中實(shí)現(xiàn)起來比較方便，根據(jù)數(shù)據(jù)傳遞方式的不同，可以分為「前端分頁」與「后端分頁」：

2.1.1 前端分頁

前端分頁顧名思義，就是在我們訪問Dash應(yīng)用時，表格內(nèi)所有頁面的數(shù)據(jù)一次性加載完成，適合數(shù)據(jù)量不大的情況，將數(shù)據(jù)存儲壓力轉(zhuǎn)移到瀏覽器端。

通過參數(shù)page_size設(shè)置每頁要顯示的記錄行數(shù)，Dash會自動幫我們分好頁，并配上翻頁部件：

app1.py

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

 

 

圖2

2.1.2 后端分頁

雖然前端分頁簡單易用，但當(dāng)我們的數(shù)據(jù)很大時，強(qiáng)行使用前端分頁會給「網(wǎng)絡(luò)傳輸」和「瀏覽器端」帶來不小的延遲和內(nèi)存壓力，嚴(yán)重影響用戶體驗(yàn)，因此Dash貼心地為我們準(zhǔn)備了「后端分頁」方式。

這時首先我們得為DataTable設(shè)置參數(shù)page_action='custom'，這是使用后端分頁的先決條件，接下來我們需要認(rèn)識一些新的參數(shù)：

page_current，int型，對應(yīng)當(dāng)前翻到的頁碼;

page_count，int型，對應(yīng)顯示的總頁數(shù);

我們在使用「后端分頁」時，實(shí)際上就是通過用戶當(dāng)前翻到的頁碼，以及設(shè)定的page_size，來動態(tài)地在翻頁后加載對應(yīng)批次的數(shù)據(jù)，并控制顯示的總頁數(shù)，參考下面這個簡單的例子：

app2.py

 

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

可以看到，即使我們完整的數(shù)據(jù)集被我concat到24萬行，加載應(yīng)用以及網(wǎng)頁內(nèi)翻頁時依然輕松自如毫無壓力，在實(shí)際應(yīng)用中你還可以將翻頁部分改成受到LIMIT與OFFSET控制的數(shù)據(jù)庫查詢過程，使得應(yīng)用運(yùn)行的更加快速高效：

 

 

圖3

2.2 對單元格內(nèi)容進(jìn)行編輯

講完了分頁翻頁，接下來我們來學(xué)習(xí)dash_table中更加強(qiáng)大的功能——單元格內(nèi)容編輯。

一個現(xiàn)代化的web應(yīng)用當(dāng)然不能局限于僅僅查看數(shù)據(jù)這么簡單，Dash同樣賦予了我們雙擊數(shù)據(jù)表單元格進(jìn)行數(shù)據(jù)編輯的能力，首先得設(shè)置參數(shù)editable=True，即開啟表格編輯模式，接下來就可以對數(shù)據(jù)區(qū)域單元格進(jìn)行任意的雙擊選中編輯。

不過Dash默認(rèn)的單元格被選中的樣式忒丑了(是粉色的你敢信)，因此我們可以利用下面的參數(shù)設(shè)置方式來自定義美化：

 

  1. style_data_conditional=[ 
  2.                 { 
  3.                     # 對選中狀態(tài)下的單元格進(jìn)行自定義樣式 
  4.                     "if": {"state": "selected"}, 
  5.                     "background-color": "#b3e5fc", 
  6.                     "border": "none" 
  7.                 }, 
  8.             ] 

來看一個形象的例子，我們對「前端分頁」方式渲染出的表格進(jìn)行隨意的修改，并在下方對利用pandas的compare比較出的數(shù)據(jù)框之間的差異結(jié)果進(jìn)行打印：

app3.py

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

可以看到，我們成功地對指定單元格元素進(jìn)行了修改。

 

 

圖4

3 開發(fā)數(shù)據(jù)庫內(nèi)容在線更新工具

在學(xué)習(xí)完今天的內(nèi)容之后，我們就可以開發(fā)一個簡單的，可在線自由修改并同步變動到數(shù)據(jù)庫的小工具，這里我們以MySQL數(shù)據(jù)庫為例，對示例表進(jìn)行修改和更新：

首先我們利用下列代碼向示例數(shù)據(jù)庫中新建表格tips：

 

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

 

圖5

接下來我們就以創(chuàng)建好的tips表為例，開發(fā)一個Dash應(yīng)用，進(jìn)行數(shù)據(jù)的修改和更新到數(shù)據(jù)庫：

 

 

圖6

效果非常的不錯，你可以在我這個簡單示例的基礎(chǔ)上，拓展更多新功能，也可以采取后端分頁+條件修改的方式來應(yīng)對大型數(shù)據(jù)表的修改，全部代碼如下：

app4.py

 

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

 

責(zé)任編輯：華軒 來源： Python大數(shù)據(jù)分析
Python工具數(shù)據(jù)庫
相關(guān)推薦

2020-04-22 14:27:44

前端工具開發(fā)

2021-04-18 21:54:36

Python工具開發(fā)

2020-06-05 15:25:05

工具代碼瀏覽器

2011-03-09 13:17:27

Web

2017-08-08 15:05:55

工具定位數(shù)據(jù)庫

2017-12-22 09:30:45

PythonSQLite數(shù)據(jù)庫

2021-04-16 16:21:02

鴻蒙HarmonyOS應(yīng)用開發(fā)

2015-08-10 11:21:47

在線資源游戲開發(fā)

2009-07-01 11:14:59

思科辦公軟件

2021-08-30 17:35:17

開發(fā)在線文檔多人協(xié)作

2011-05-19 09:21:17

DreamCoder

2009-03-19 10:08:09

C#數(shù)據(jù)庫查詢

2018-12-27 15:43:05

Python分析數(shù)據(jù)

2015-08-10 14:45:50

游戲開發(fā)在線資源

2022-01-19 08:33:17

Oracle數(shù)據(jù)庫AutoUpgrad

2011-03-04 14:13:02

MySQL數(shù)據(jù)庫

2011-05-26 15:53:59

數(shù)據(jù)庫更新維護(hù)

2011-03-28 15:44:45

惠普數(shù)據(jù)庫Oracle數(shù)據(jù)庫

2009-09-14 13:57:37

SQLite數(shù)據(jù)庫開發(fā)

2011-05-26 12:54:31

數(shù)據(jù)庫數(shù)據(jù)庫名
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號