Skip to content

Commit 40ae3ed

Browse files
xianhuxianhu
committed
update dash
1 parent 5cbad1c commit 40ae3ed

File tree

3 files changed

+167
-116
lines changed

3 files changed

+167
-116
lines changed

‎Dash/apps/app4.py

Lines changed: 165 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -5,75 +5,178 @@
55
"""
66

77
import dash_table
8-
import dash_core_components as dcc
98
import dash_html_components as html
109
import dash_bootstrap_components as dbc
11-
from Dash.apps.app4data import *
10+
from dash.dependencies import Output, Input
11+
from Dash.app import app
1212

1313

1414
# 创建layout
15-
layout = dbc.Container(children=[
16-
html.H3("DataTable Sizing", className="mt-2"),
17-
html.Div(children=dash_table.DataTable(
18-
data=df_election.to_dict('rows'),
19-
columns=[{'id': c, 'name': c} for c in df_election.columns]
20-
), className="mt-2"),
15+
def layout(df_data):
16+
return dbc.Container(children=[
17+
html.Label(id="label", className="mt-2"),
18+
html.Div(children=dash_table.DataTable(
19+
id="datatable",
20+
data=df_data.to_dict("rows"),
21+
columns=[{"id": c, "name": c, "deletable": False, "editable_name": False} for c in df_data.columns[:10]],
22+
23+
# # 数据可编辑
24+
# editable=True,
25+
# # 行可删除
26+
# row_deletable=True,
27+
# # 虚拟化，加载大数据
28+
# virtualization=True,
29+
#
30+
# # 过滤: "fe", "be", True, False
31+
# filtering=True,
32+
# filtering_settings="",
33+
34+
# 排序: "fe", "be", True, False
35+
sorting=True,
36+
sorting_type="multi",
37+
sorting_settings=[],
38+
39+
# 选择: multi|single
40+
row_selectable="multi",
41+
selected_rows=[],
42+
selected_cells=[],
43+
44+
# # 分页功能
45+
# pagination_settings={
46+
# "current_page": 0,
47+
# "page_size": 10
48+
# },
49+
# # 分页方式: "fe", "be", True, False
50+
# pagination_mode="be",
51+
#
52+
# # 数据利用dropdown编辑
53+
# column_static_dropdown=[{
54+
# "id": "climate",
55+
# "dropdown": [
56+
# {"label": i, "value": i} for i in ["a", "b"]
57+
# ]
58+
# }, {
59+
# "id": "city",
60+
# "dropdown": [
61+
# {"label": i, "value": i} for i in ["c", "d"]
62+
# ]
63+
# }],
64+
# column_conditional_dropdowns=[],
65+
#
66+
# # 固定行、列
67+
# n_fixed_rows=1,
68+
# n_fixed_columns=1,
69+
# # 像list一样：只有行边框
70+
# style_as_list_view=True,
71+
# # 多个表头：需columns配合
72+
# merge_duplicate_headers=True,
73+
# # 内容样式：fit|grow
74+
# content_style="grow",
75+
#
76+
# # 其他样式
77+
# style_table={
78+
# # 设置宽度
79+
# "height": "300px",
80+
# # 设置X轴平移
81+
# "overflowX": "scroll",
82+
# # 设置Y轴最大高度及平移
83+
# "maxHeight": "300px",
84+
# "overflowY": "scroll",
85+
# # 边框样式
86+
# "border": "thin lightgrey solid",
87+
# },
88+
#
89+
# style_data={
90+
# # 忽略空白
91+
# "whiteSpace": "normal",
92+
# },
93+
# style_data_conditional=[
94+
# # 第4行高亮显示：也可以在style_cell中
95+
# {"if": {"row_index": 4}, "backgroundColor": "#3D9970", "color": "white"},
96+
# # 第3行的字体加粗
97+
# {"if": {"row_index": 3}, "fontWeight": "bold"},
98+
# # Temperature列高亮显示
99+
# {"if": {"column_id": "Temperature"}, "backgroundColor": "#3D9970", "color": "white"},
100+
# # 高亮部分Cell，if中添加一个filter
101+
# {
102+
# "if": {
103+
# "column_id": "Region",
104+
# "filter": "Region eq 'Montreal'"
105+
# }, "backgroundColor": "#3D9970", "color": "white",
106+
# }, {
107+
# "if": {
108+
# "column_id": "Humidity",
109+
# "filter": "Humidity eq num(20)"
110+
# }, "backgroundColor": "#3D9970", "color": "white",
111+
# }, {
112+
# "if": {
113+
# "column_id": "Temperature",
114+
# "filter": "Temperature > num(3.9)"
115+
# }, "backgroundColor": "#3D9970", "color": "white",
116+
# },
117+
# ],
118+
#
119+
# style_header={
120+
# # 设置表头
121+
# "textAlign": "center",
122+
# "fontWeight": "bold",
123+
# "backgroundColor": "white",
124+
# },
125+
# style_header_conditional=[],
126+
127+
style_cell={
128+
# 基本设置
129+
# "color": "white",
130+
# "fontSize": "medium",
131+
"padding": "5px",
132+
# "width": "180px",
133+
"minWidth": "0px",
134+
"maxWidth": "180px",
135+
# 多行显示
136+
"whiteSpace": "no-wrap",
137+
"overflow": "hidden",
138+
# 显示省略号
139+
"textOverflow": "ellipsis",
140+
# 文本对齐方式
141+
"textAlign": "center",
142+
},
143+
# style_cell_conditional=[
144+
# # 自定义列宽
145+
# {"if": {"column_id": "Date"}, "width": "30%"},
146+
# {"if": {"column_id": "Region"}, "width": "30%"},
147+
# {"if": {"column_id": "Temperature"}, "width": "130px"},
148+
# {"if": {"column_id": "Humidity"}, "width": "130px"},
149+
# {"if": {"column_id": "Pressure"}, "width": "130px"},
150+
# # 自定义文本对齐方式
151+
# {"if": {"column_id": "Region"}, "textAlign": "left"},
152+
# ] + [
153+
# # 自定义文本对齐方式：for循环
154+
# {"if": {"column_id": c}, "textAlign": "left"} for c in ["Date", "Region"]
155+
# ] + [
156+
# # Striped行
157+
# {"if": {"row_index": "odd"}, "backgroundColor": "rgb(248, 248, 248)"}
158+
# ],
159+
#
160+
# style_filter={},
161+
# style_filter_conditional=[],
21162

22-
dash_table.DataTable(
23-
style_table={'width': '100%'},
24-
style_data={'whiteSpace': 'normal'},
25-
content_style='grow',
26163
css=[{
27-
'selector': '.dash-cell div.dash-cell-value',
28-
'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'
164+
"selector": ".dash-cell div.dash-cell-value",
165+
"rule": "display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;"
29166
}],
30-
data=df_election.to_dict('rows'),
31-
columns=[{'id': c, 'name': c} for c in df_election.columns]
32-
),
33-
34-
html.Div(children=dash_table.DataTable(
35-
data=df_election.to_dict('rows'),
36-
columns=[{'id': c, 'name': c} for c in df_election.columns],
37-
style_cell={
38-
'whiteSpace': 'no-wrap',
39-
'overflow': 'hidden',
40-
'textOverflow': 'ellipsis',
41-
'maxWidth': 0,
42-
},
43-
), className="mt-2"),
167+
), className="mt-2"),
168+
])
44169

45-
dash_table.DataTable(
46-
style_data={'whiteSpace': 'normal'},
47-
style_cell={
48-
'whiteSpace': 'no-wrap',
49-
'overflow': 'hidden',
50-
'textOverflow': 'ellipsis',
51-
'maxWidth': 0,
52-
},
53-
css=[{
54-
'selector': '.dash-cell div.dash-cell-value',
55-
'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'
56-
}],
57-
data=df_long.to_dict('rows'),
58-
columns=[{'id': c, 'name': c} for c in df_long.columns]
59-
)
60-
],
61-
)
62170

63-
#
64-
# import dash
65-
#
66-
# app = dash.Dash(
67-
# __name__, external_stylesheets=["https://codepen.io/chriddyp/pen/dZVMbK.css"]
68-
# )
69-
# app.config["suppress_callback_exceptions"] = True
70-
#
71-
# server = app.server
72-
#
73-
# app.layout = layout
74-
#
75-
# app.css.config.serve_locally = True
76-
# app.scripts.config.serve_locally = True
77-
#
78-
# if __name__ == "__main__":
79-
# app.run_server(debug=True)
171+
@app.callback(Output("label", "children"), [
172+
Input("datatable", "data"),
173+
Input("datatable", "selected_rows")
174+
])
175+
def update_date(rows, selected_rows):
176+
if rows is None:
177+
rows = []
178+
if selected_rows is None:
179+
selected_rows = []
180+
string = "总行数：%d" % len(rows)
181+
string += "，被选中的行：%s" % ",".join(map(str, selected_rows))
182+
return string

‎Dash/apps/app4data.py

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎Dash/index.py

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
Dash实例
55
"""
66

7+
import pandas as pd
78
import dash_core_components as dcc
89
import dash_html_components as html
910
import dash_bootstrap_components as dbc
@@ -61,7 +62,7 @@ def display_page(pathname):
6162
elif pathname == "/app3":
6263
return app3.layout
6364
elif pathname == "/app4":
64-
return app4.layout
65+
return app4.layout(pd.read_csv("apps/data.csv"))
6566
else:
6667
return dbc.Container(html.H4("404, page not found", className="text-center pt-5"))
6768

0 commit comments

Comments
 (0)