跳到主要内容
版本:0.4.3

范例工程

dash版本范例工程

安装dash_json_grid后,可以测试以下范例工程:

usage.py

该应用提供了以下功能:

  1. 用来搜索和高亮关键字的搜索框。
  2. 用来切换主题的选择框。
  3. 点选所显示的数据的任何部分后,被选中的区域将会导出并展示一条路径。
  4. 选中任何数字时,该数字将会自增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_routeupdate_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实现的范例,它并未提供任何捕获、或是修改所选数据的功能。

信息

从某种程度上说,简介展示的范例、和本页面展示的范例,其实是一样的。然而,囿于文档的功能有限,文档中的实时范例、总是和最新版同步。即使当前查看的文档是旧版文档,这一点也不会变。因此,如果需要了解某个版本确切的效果,透过对应版本、运行范例工程无疑是更好的选择。