1简介学习Dash渲染静态网页表格的常用方法，最后的例子教你如何配合Dash简单写一个数据库查询申请～文末还特意藏了个惊喜！2在Dash中渲染静态表格在Dash中渲染“静态”表格的方式有很多种，而我们今天要学习的方法是配合上一篇介绍的dash_bootstrap_components中Table()组件的第三方扩展，借助bootstrap的特性快速创建一个漂亮的“静态”表格：2.1静态表格的构成要学习如何在前端基于Dash渲染静态表格，首先我们需要学习的构成它的元素。Dash延续了html中表格标签的概念。Table()、Thead()、Tbody()、Tr()、Th()和Td()组成一个完整的表格。让我们从一个简单的例子开始：?app1.py?importdashimportdash_html_componentsashtmlimportdash_bootstrap_componentsasdbcapp=dash。Dash(__name__)app.layout=html.Div(dbc.Container(dbc.Table([html.Thead(html.Tr([html.Th('第一列']),html.Th('第二列'),])),html.Tbody([html.Tr([html.Td('一行一列'),html.Td('一行两列'),]),html.Tr([html.td('两行一列'),html.Td('两行两列'),])])]),style={'margin-top':'50px'#设置顶部高度空白区域}))if__name__=='__main__':app.run_server(debug=True)注意我们这里使用的Table()组件来自于dash_bootstrap_components，其余表格组件来自于Dash原生的dash_html_components库。这些组件的作用如下：“Table()”Table()是一个静态表的最外层组件，我们之所以选择dash_bootstrap_components中的Table()，因为它自带很多有用的参数，常用如下："bordered"：bool类型，用于设置是否“保留”表格的外边框"borderless"：bool类型，用于设置是否"delete"表格内部的单元格边框"striped":bool类型，用于设置是否对值行应用“斑马纹着色”方案，即相邻行的背景颜色不同"dark":bool类型,用于设置是否应用“深色”主题“hover”：bool类型，当设置为True时，鼠标悬停在某一行上会有相应的效果通过上面的参数，我们可以改变静态表格的整体效果例如app1.py设置dark=True后的效果如下：“Thead()和Tbody()”需要组件Table()下一层的子元素Thead()和Tbody()，这分别用来存放表头信息和表值内容信息。“Tr()、Th()和Td()”经过前面Table()嵌套Thead()和Tbody()的过程后，我们就可以开始正式组织“表头区”和“值”中的数据内容了区”分别。既然是表格，还是要按照首行二列的网格方式来组织内容。Tr()组件的作用是作为一个行容器，其内部嵌套的子元素是表格中每个单元格所在位置的元素。在Thead()嵌套的Tr()内部，需要使用Th()设置每一列的字段名，而在Tbody()嵌套的Tr()内部，Td()和Th()都可以使用设置每个单元格的值内容，但是Th()在显示单元格值的时候有加粗效果：([html.Thead(html.Tr([html.Th('字段1'),html.Th('字段2')])),html.Tbody([html.Tr([html.Th('1'),html.Td('test')]),html.Tr([html.Th('2'),html.Td('test')]),html.Tr([html.Td('3'),html.Td('test')])])],striped=True),style={'margin-top':'50px'#设置顶部空白区域的高度}))if__name__=='__main__':app.run_server(debug=True)和Th()和Td()有额外的参数colSpan和rowSpan，可以用整数传递，以达到水平或垂直“合并单元格”的效果，例如下面的例子:?app3.py?importdashimportdash_html_componentsashtmlimportdash_bootstrap_componentsasdbcapp=dash.Dash(__name__)app.layout=html.Div(dbc.Container(dbc.Table([html.Thead(html.Tr([html.Th('field1'),html.Th('Field2'),html.Th('Field3'),html.Th('Field4'),])),html.Tbody([html.Tr([html.Th('1'),#stylesethorizo??ntal中心html.Td('colSpan=2',colSpan=2,style={'text-align':'center'}),html.Td('test'),]),html.Tr([html.Th('2'),html.Td('test'),#stylesetverticalcenterhtml.Td('rowSpan=2',rowSpan=2,style={'vertical-align':'middle'}),html.Td('test')]),html.Tr([html.Th('3'),html.Td('test'),html.Td('test')])])],striped=True,bordered=True),style={'margin-top':'50px'#设置顶部空白区域的高度}))if__name__=='__main__':app.run_server(debug=True)2.2表格快速渲染2.2.1使用列表理解快速渲染静态表格通过前面的内容，我们知道，如果在Dash中渲染一个带样式的静态表格，面对日常需要的批量数据，我们当然无法手动编写整张表格对应的代码。对于大量的表，我们可以配合Python中常用的Listcomprehension来实现例如下面的例子：True)#批量格式化列名app=dash.Dash(__name__)app.layout=html.Div(dbc.Container(dbc.Table([html.Thead(html.Tr([html.Th('行下标',style={'text-align':'center'})]+[html.Th(column,style={'text-align':'center'})forcolumninfake_df.columns])),html.Tbody([html.Tr([html.Th(f'#{idx}',style={'text-align':'center'})]+[html.Td(row[column],style={'text-align':'center'})forcolumninfake_df.columns])foridx,rowinfake_df.iterrows()])],striped=True,bordered=True),style={'margin-top':'50px'#设置top的高度空白区域}))if__name__=='__main__':app.run_server(debug=True)在生成表头和每行内容时应用了列表推导式，使我们的代码更加简洁。2.2.2使用from_dataframe()快速渲染表格虽然上面的列表推导方式简单很多，dash_bootstrap_components也提供了Table.from_dataframe()方法，可以直接导入到pandas数据框中，快速创建一个简单的静态表。其样式相关参数与dbc.Table()一致。缺点是自定义表格内部元素样式的自由度不如前面的列表推导：?app5.py?importdashimportdash_html_componentsashtmlimportdash_bootstrap_componentsasdbcimportpandasaspdimportnumpyasnpfake_df=pd.DataFrame(np.random.rand(1000).reshape(200),5))fake_df.rename(lambdas:f'field{s}',axis=1,inplace=True)#批量格式化列名app=dash.Dash(__name__)app.layout=html.Div(dbc.Container(#一行代码渲染静态表格dbc.Table.from_dataframe(fake_df,striped=True),style={'margin-top':'50px'#设置顶部空白区域的高度}))if__name__=='__main__':app.run_server(debug=True)3自制简单数据库查询系统学习了今天的内容，我们可以创建很多以表为主要内容的web应用，比如数据库查询系统，我们以Postgresql为例子，配合pandas和sqlalchemy的相关功能，我们可以快速搭建一个简单的数据库查询系统。首先，使用如下代码将本期附件中的所有数据表导入到目标数据库中：那么你只需要配合Dash，只需几十行代码就可以实现。对应代码如下：?app6.py?importdashimportdash_html_componentsashtmlimportdash_bootstrap_componentsasdbcimportdash_core_componentsasdccfromdash.dependenciesimportInput,Output,Stateimportpandasaspdfromsqlalchemyimportcreate_enginepostgres_url='postgresql://postgres:填入你的密码@localhost:5432/Dash'engine=create_engine(postgres_url)app=dash.Dash(__name__)app.layout=html.Div(dbc.Container([dbc.Row([dbc.Col(dbc.Button('更新数据库信息',id='refresh-db',style={'width':'100%'}),width=2),dbc.Col(dcc.Dropdown(id='db-table-names',placeholder='选择数据库中的数据表',style={'width':'100%'}),width=4),dbc.Col(dbc.Button('query',id='query',style={'width':'100%'}),width=1)]),html.Hr(),dbc.Row([dbc.Col(id='query-result')])],style={'margin-top':'50px'#设置顶部空白区域的高度}))@app.callback(Output('db-table-names','options'),Input('refresh-db','n_clicks'),prevent_initial_call=True)defquery_data_records(n_clicks):#提取目标表并查询其top500记录表e_names=pd.read_sql_query("selecttablenamefrompg_tableswhereschemaname='public'",con=engine)return[{'label':name,'value':name}fornameintable_names['tablename']]@app.callback(Output('query-result','children')，输入（'查询'，'n_clicks'），状态（'db-table-names'，'value'），prevent_initial_call=True）defrefresh_table_names（n_clicks，value）：ifvalue：query_result=pd.read_sql_query（f'select*来自{value}limit500',con=engine)returnhtml.Div(dbc.Table.from_dataframe(query_result,striped=True),style={'height':'600px','overflow':'auto'})else:returndash.no_updateif__name__=='__main__':app.run_server(debug=True)以上就是本文的全部内容，欢迎评论区与我讨论
