跳到主要内容
版本:0.4.3

搜索和选择数据

接下来的指南展示了DashJsonGrid的交互功能。这些交互允许透过搜索关键字高亮数据,以及获取当前被用户选中的数据。

为了节约篇幅,本章所用的范例中,都将数据预设为了以下值:

data.py
test_data = {
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 1111.55,
"batters": {
"batter": [
{"id": "1001", "type": "Regular"},
{"id": "1002", "type": "Chocolate"},
{"id": "1003", "type": "Blueberry"},
{"id": "1004", "type": "Devil's Food"},
]
},
"topping": [
{"id": "5001", "type": "None"},
{"id": "5002", "type": "Glazed"},
{"id": "5005", "type": "Sugar"},
{"id": "5007", "type": "Powdered Sugar"},
{"id": "5006", "type": "Chocolate with Sprinkles"},
{"id": "5003", "type": "Chocolate"},
{"id": "5004", "type": "Maple"},
],
}

搜索并高亮数据

下例透过dcc.Input组件、设置了查询关键字、以搜索数据。所有搜索到的结果,都会高亮为特殊的样式。

该实现基于普通的callback。

search_and_highlight.py
import dash
from dash import dcc, html
from dash import Output, Input
import dash_json_grid as djg
from data import test_data


app = dash.Dash("demo")
app.layout = html.Div(
children=(
dcc.Input(id="search", type="text", value=None),
djg.DashJsonGrid(
id="grid", data=test_data, search_text=None, default_expand_depth=2
),
)
)


@app.callback(Output("grid", "search_text"), Input("search", "value"))
def update_search(value):
if not value:
return None
return value


if __name__ == "__main__":
app.run()
提示

本章的范例中,都添加了参数default_expand_depth=2。该参数令嵌套数据、在没有用户交互的默认情况下,渲染为展开到第二级。详情请参详DashJsonGrid

信息

search_text是“仅可设置(set-only)”属性。这指的是,该属性只能被callback重新设置。组件本身无论如何都不会发起以该值为输入的callback。换言之,search_text仅能通过代码修改,不可被用户交互改变。

控制组件的单击选择数据功能

可以通过属性控制组件、决定用户是否可以选中渲染出的数据。如果“可选择(selectable)”功能关闭,即使用户单击数据,数据也不会被选中。自然,这种情况下也不会发出任何callback。

该实现基于普通的callback。

selectable.py
import dash
from dash import dcc, html
from dash import Output, Input
import dash_json_grid as djg
from data import test_data


app = dash.Dash("demo")
app.layout = html.Div(
children=(
dcc.Checklist(id="check", options=["Selectable"], value=["Selectable"]),
djg.DashJsonGrid(
id="grid", data=test_data, highlight_selected=True, default_expand_depth=2
),
)
)


@app.callback(
Output("grid", "highlight_selected"), Input("check", "value")
)
def is_highlighted(val):
return isinstance(val, (list, tuple)) and "Selectable" in val


if __name__ == "__main__":
app.run()
信息

highlight_selected是“仅可设置(set-only)”属性。这指的是,该属性只能被callback重新设置。组件本身无论如何都不会发起以该值为输入的callback。换言之,highlight_selected仅能通过代码修改,不可被用户交互改变。

捕获选中的数据

可以透过callback捕获选中的值。每当有数据被选中时,组件属性selected_path都会发起一次callback。该属性用来标识当前被选中的值、在整个数据中的访问路径。用户可以定义callback来处理该值。

该实现基于普通的callback。

catch_selected.py
import json
import dash
from dash import dcc, html
from dash import Output, Input
import dash_json_grid as djg
from data import test_data


app = dash.Dash("demo")
app.layout = html.Div(
children=(
djg.DashJsonGrid(id="grid", data=test_data, default_expand_depth=2),
html.P(id="selected-path", children=None),
)
)


@app.callback(Output("selected-path", "children"), Input("grid", "selected_path"))
def forward_selected_path(val):
return json.dumps(val)


if __name__ == "__main__":
app.run()
信息

selected_path是“仅可交互(interact-only)”属性。这指的是,该属性只能透过用户交互触发callback。相比之下,用形如Output("grid", "selected_path")的方法,透过callback更新该数据,将不会产生任何效果,亦即、不会改变被选中的数据。为了规避这种预期外的情况,用户不应透过dash.Output来修改selected_path