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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="../../dist/jsoneditor.js"></script>
</head>
<body>
<textarea class="value" cols="30" rows="10"></textarea>
<button class='get-value'>get value</button>
<button class='set-value'>set value</button>
<button class='get-individual-value'>get individual value</button>
<button class='set-individual-value'>set individual value</button>
<button class='disable-form'>disable form</button>
<button class='enable-form'>enable form</button>
<button class='disable-part'>disable part</button>
<button class='enable-part'>enable part</button>
<button class='destroy'>destroy</button>
<button class='form-changed' style="background: yellow; color: blue; display: none;">form changed</button>
<button class='name-changed' style="background: green; color: white; display: none;">name changed</button>
<div class='container'></div>
<script>
var container = document.querySelector('.container');
var value = document.querySelector('.value');
var getValue = document.querySelector('.get-value');
var setValue = document.querySelector('.set-value');
var getIndividualValue = document.querySelector('.get-individual-value');
var setIndividualValue = document.querySelector('.set-individual-value');
var disableForm = document.querySelector('.disable-form');
var enableForm = document.querySelector('.enable-form');
var disablePart = document.querySelector('.disable-part');
var enablePart = document.querySelector('.enable-part');
var destroy = document.querySelector('.destroy');
var formChanged = document.querySelector('.form-changed');
var nameChanged = document.querySelector('.name-changed');
var schema = {
"title": "Person",
"type": "object",
"properties": {
"age": {
"title": "Age",
"type": "number",
"format": "number",
"default": 18,
"minimum": 0,
"maximum": 80
},
"name": {
"title": "Name",
"type": "string",
"default": "Francesco Avizzano"
}
}
};
var editor = new JSONEditor(container, {
schema: schema
});
var changeCallback = function () {
formChanged.style.display = 'block'
};
editor.on('change', changeCallback);
var watchCallback = function () {
nameChanged.style.display = 'block'
};
editor.watch('root.name', watchCallback);
getValue.addEventListener('click', function () {
value.value = JSON.stringify(editor.getValue());
console.log(editor.getValue());
});
setValue.addEventListener('click', function () {
editor.setValue({name: "John Smith", age: 40});
});
getIndividualValue.addEventListener('click', function () {
var name = editor.getEditor('root.name');
value.value = JSON.stringify(name.getValue());
});
setIndividualValue.addEventListener('click', function () {
var name = editor.getEditor('root.name');
name.setValue("john kaminski");
value.value = JSON.stringify(name.getValue());
});
disableForm.addEventListener('click', function () {
editor.disable();
});
enableForm.addEventListener('click', function () {
editor.enable();
});
disablePart.addEventListener('click', function () {
editor.getEditor('root.name').disable();
});
enablePart.addEventListener('click', function () {
editor.getEditor('root.name').enable();
});
destroy.addEventListener('click', function () {
editor.destroy();
});
</script>
</body>
</html>
|
