generated from xinetzone/xbook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
json-editor.md
61 lines (48 loc) · 1.92 KB
/
json-editor.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
# {func}`nicegui.ui.json_editor` JSON 编辑器
`JSONEditor` 是一个使用 [JSONEditor](https://github.com/josdejong/svelte-jsoneditor) 创建JSON编辑器的元素。通过更改`properties`属性,可以将更新推送到编辑器。数据发生变化后,调用`update`方法刷新编辑器。
- `properties`: JSONEditor 属性的字典
- `on_select`: 当某些内容被选中时调用的回调函数
- `on_change`: 当内容发生变化时调用的回调函数
```python
from nicegui import ui
json = {
'array': [1, 2, 3],
'boolean': True,
'color': '#82b92c',
None: None,
'number': 123,
'object': {
'a': 'b',
'c': 'd',
},
'time': 1575599819000,
'string': 'Hello World',
}
ui.json_editor({'content': {'json': json}},
on_select=lambda e: ui.notify(f'Select: {e}'),
on_change=lambda e: ui.notify(f'Change: {e}'))
# ui.run()
```
## {func}`nicegui.ui.json_editor` `run_editor_method`
你可以使用`run_editor_method`方法来运行JSONEditor实例的方法。这个示例展示了如何展开和折叠所有节点,以及如何获取当前数据。
在方法名 `"expand"` 前面的冒号 `":"` 表示值 `"path => true"` 是一个JavaScript表达式,它在传递给方法之前会在客户端进行求值。
```python
from nicegui import ui
json = {
'Name': 'Alice',
'Age': 42,
'Address': {
'Street': 'Main Street',
'City': 'Wonderland',
},
}
editor = ui.json_editor({'content': {'json': json}})
ui.button('Expand', on_click=lambda: editor.run_editor_method(':expand', 'path => true'))
ui.button('Collapse', on_click=lambda: editor.run_editor_method(':expand', 'path => false'))
ui.button('Readonly', on_click=lambda: editor.run_editor_method('updateProps', {'readOnly': True}))
async def get_data() -> None:
data = await editor.run_editor_method('get')
ui.notify(data)
ui.button('Get Data', on_click=get_data)
# ui.run()
```