Implement `update` method (WIP)
This commit is contained in:
jos
parent
d05231977c
commit
69e88537c3
|
|
@ -330,21 +330,14 @@ Node.prototype.getField = function() {
|
|||
*/
|
||||
Node.prototype.setValue = function(value, type) {
|
||||
var childValue, child, visible;
|
||||
var i, j;
|
||||
var notUpdateDom = false;
|
||||
|
||||
// first clear all current childs (if any)
|
||||
var childs = this.childs;
|
||||
if (childs) {
|
||||
while (childs.length) {
|
||||
this.removeChild(childs[0], notUpdateDom);
|
||||
}
|
||||
}
|
||||
|
||||
this.type = this._getType(value);
|
||||
|
||||
// check if type corresponds with the provided type
|
||||
if (type && type != this.type) {
|
||||
if (type == 'string' && this.type == 'auto') {
|
||||
if (type && type !== this.type) {
|
||||
if (type === 'string' && this.type === 'auto') {
|
||||
this.type = type;
|
||||
}
|
||||
else {
|
||||
|
|
@ -354,13 +347,25 @@ Node.prototype.setValue = function(value, type) {
|
|||
}
|
||||
}
|
||||
|
||||
if (this.type == 'array') {
|
||||
if (this.type === 'array') {
|
||||
// array
|
||||
if (!this.childs) {
|
||||
this.childs = [];
|
||||
for (var i = 0, iMax = value.length; i < iMax; i++) {
|
||||
}
|
||||
|
||||
for (i = 0; i < value.length; i++) {
|
||||
childValue = value[i];
|
||||
if (childValue !== undefined && !(childValue instanceof Function)) {
|
||||
// ignore undefined and functions
|
||||
if (i < this.childs.length) {
|
||||
// reuse existing child, keep its state
|
||||
child = this.childs[i];
|
||||
|
||||
child.fieldEditable = false;
|
||||
child.index = i;
|
||||
child.setValue(childValue);
|
||||
}
|
||||
else {
|
||||
// create a new child
|
||||
child = new Node(this.editor, {
|
||||
value: childValue
|
||||
});
|
||||
|
|
@ -368,17 +373,42 @@ Node.prototype.setValue = function(value, type) {
|
|||
this.appendChild(child, visible, notUpdateDom);
|
||||
}
|
||||
}
|
||||
this.value = '';
|
||||
}
|
||||
else if (this.type == 'object') {
|
||||
|
||||
// cleanup redundant childs
|
||||
// we loop backward to prevent issues with shifting index numbers
|
||||
for (j = this.childs.length; j >= value.length; j--) {
|
||||
this.removeChild(this.childs[j], notUpdateDom);
|
||||
}
|
||||
}
|
||||
else if (this.type === 'object') {
|
||||
// object
|
||||
if (!this.childs) {
|
||||
this.childs = [];
|
||||
}
|
||||
|
||||
// cleanup redundant childs
|
||||
// we loop backward to prevent issues with shifting index numbers
|
||||
for (j = this.childs.length - 1; j >= 0; j--) {
|
||||
if (!value.hasOwnProperty(this.childs[j].field)) {
|
||||
this.removeChild(this.childs[j], notUpdateDom);
|
||||
}
|
||||
}
|
||||
|
||||
i = 0;
|
||||
for (var childField in value) {
|
||||
if (value.hasOwnProperty(childField)) {
|
||||
childValue = value[childField];
|
||||
if (childValue !== undefined && !(childValue instanceof Function)) {
|
||||
// ignore undefined and functions
|
||||
child = this.findChildByProperty(childField);
|
||||
|
||||
if (child) {
|
||||
// reuse existing child, keep its state
|
||||
child.setField(childField, true);
|
||||
child.setValue(childValue);
|
||||
}
|
||||
else {
|
||||
// create a new child
|
||||
child = new Node(this.editor, {
|
||||
field: childField,
|
||||
value: childValue
|
||||
|
|
@ -386,8 +416,10 @@ Node.prototype.setValue = function(value, type) {
|
|||
visible = i < this.MAX_VISIBLE_CHILDS;
|
||||
this.appendChild(child, visible, notUpdateDom);
|
||||
}
|
||||
}
|
||||
i++;
|
||||
}
|
||||
|
||||
}
|
||||
this.value = '';
|
||||
|
||||
|
|
@ -398,6 +430,7 @@ Node.prototype.setValue = function(value, type) {
|
|||
}
|
||||
else {
|
||||
// value
|
||||
this.hideChilds();
|
||||
this.childs = undefined;
|
||||
this.value = value;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -199,6 +199,15 @@ treemode.set = function (json, name) {
|
|||
}
|
||||
};
|
||||
|
||||
treemode.update = function (json) {
|
||||
// TODO
|
||||
// this.content.removeChild(this.table); // Take the table offline
|
||||
|
||||
this.node.setValue(json);
|
||||
|
||||
// this.content.appendChild(this.table); // Put the table online again
|
||||
};
|
||||
|
||||
/**
|
||||
* Get JSON object from editor
|
||||
* @return {Object | undefined} json
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>JSONEditor | Update JSON</title>
|
||||
|
||||
<!-- when using the mode "code", it's important to specify charset utf-8 -->
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||
|
||||
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/jsoneditor.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
body, html {
|
||||
font: 10.5pt arial;
|
||||
color: #4d4d4d;
|
||||
line-height: 150%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main > div {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#jsoneditor {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<div>
|
||||
<button id="update">update JSON</button>
|
||||
</div>
|
||||
<div id="jsoneditor"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var container = document.getElementById('jsoneditor');
|
||||
var updateButton = document.getElementById('update');
|
||||
|
||||
var options = {
|
||||
mode: 'tree',
|
||||
modes: ['code', 'form', 'text', 'tree', 'view'] // allowed modes
|
||||
};
|
||||
|
||||
var json = {
|
||||
"arrayToObject": [1, 2, 3],
|
||||
"arrayGrow": [1, 2, 3],
|
||||
"arrayShrink": [1, 2, 3],
|
||||
"autoToArray": 123,
|
||||
"ArrayToAuto": [1, 2, 3],
|
||||
"objectGrow": {"a": "b", "c": "d"},
|
||||
"objectShrink": {"a": "b", "c": "d"},
|
||||
"objectToArray": {"a": "b", "c": "d"},
|
||||
"removeField": "old"
|
||||
};
|
||||
|
||||
var updatedJson = {
|
||||
"arrayToObject": {"a": "b", "c": "d"},
|
||||
"arrayGrow": [1, 2, 3, 4, 5],
|
||||
"arrayShrink": [1, 3],
|
||||
// "autoToArray": [1, 2, 3], // FIXME: doesn't work yet (misses expand button)
|
||||
// "ArrayToAuto": 123, // FIXME: doesn't work yet (throws error)
|
||||
"objectGrow": {"a": "b", "c": "ddd", "e": "f"},
|
||||
"objectShrink": {"c": "d"},
|
||||
"objectToArray": [1, 2, 3],
|
||||
"newField": "new"
|
||||
};
|
||||
|
||||
var editor = new JSONEditor(container, options, json);
|
||||
|
||||
editor.expandAll();
|
||||
|
||||
updateButton.onclick = function () {
|
||||
editor.update(updatedJson);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue