版本：0.3.x

范例工程

`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的用户需要自行实现上述用来定位、修改部分数据值的逻辑。

纯React实现的范例

注意

该范例只能在开发源码的过程中使用。换言之，React版的范例、同时也是完全面向开发者的。

要运行该范例，需要确保已经安装以下软件：

确认无虞后，运行以下命令以clone项目和运行范例：

git clone -b v0.3.4 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实现的范例，它并未提供任何捕获、或是修改所选数据的功能。

信息

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

dash版本范例工程​

更多范例​

纯React实现的范例​

`dash`版本范例工程

更多范例

纯React实现的范例