范例工程
dash
版本范例工程
安装dash_json_grid
后,可以测试以下范例工程:
该应用提供了以下功能:
- 用来搜索和高亮关键字的搜索框。
- 用来切换主题的选择框。
- 点选所显示的数据的任何部分后,被选中的区域将会导出并展示一条路径。
- 选中任何数字时,该数字将会自增
1
。
其余的特性已经在用法指南中介绍了。本范例工程还展示了,如何使用callback提供的selected_path
来修改数据的值。参见以下部分:
usage.py
...
@callback(
Output("selected-path", "children"),
Output("selected-val", "children"),
Output("viewer", "data"),
Input("viewer", "selected_path"),
State("viewer", "data"),
)
def display_output(route, data):
if not route:
return None, None, dash.no_update
sel_data = dash_json_grid.DashJsonGrid.get_data_by_route(data, route)
if isinstance(sel_data, (int, float)):
sel_data_new = sel_data + 1
dash_json_grid.DashJsonGrid.update_data_by_route(data, route, sel_data_new)
return str(route), str(sel_data_new), data
return str(route), str(sel_data), dash.no_update
...
其中,get_data_by_route
和update_data_by_route
皆是类方法。前者通过route
参数定位了data
的某个特定部分。后者将route
所定位的数据进行了更新。
信息
形如get_data_by_route
的类方法是本Dash版本的组件所独有的。换言之,react-json-grid
的用户需要自行实现上述用来定位、修改部分数据值的逻辑。
更多范例
在API文档中,还有更多范例。这些范例主要是一些有用的代码片段,可作参考。
纯React实现的范例
注意
该范例只能在开发源码的过程中使用。换言之,React版的范例、同时也是完全面向开发者的。
要运行该范例,需要确保已经安装以下软件:
确认无虞后,运行以下命令以clone项目和运行范例:
git clone https://github.com/cainmagi/dash-json-grid
cd dash-json-grid
python -m pip install -r requirements.txt -r tests/requirements.txt
yarn install
yarn start
总之,该范例包含了大部分usage.py
范例所实现的功能。然而,作为一个完全由React实现的范例,它并未提供任何捕获、或是修改所选数据的功能。
信息
从某种程度上说,简介展示的范例、和本页面展示的范例,其实是 一样的。然而,囿于文档的功能有限,文档中的实时范例、总是和最新版同步。即使当前查看的文档是旧版文档,这一点也不会变。因此,如果需要了解某个版本确切的效果,透过对应版本、运行范例工程无疑是更好的选择。