63 lines
1.2 KiB
HTML
63 lines
1.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>JSONEditor | Custom editable fields</title>
|
|
|
|
<script src="../dist/jsoneditor.js"></script>
|
|
|
|
<style type="text/css">
|
|
#jsoneditor {
|
|
width: 500px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>
|
|
In this example:
|
|
</p>
|
|
<ul>
|
|
<li>the field <code>_id</code> and its value are read-only</li>
|
|
<li>the field <code>name</code> is read-only but has an editable value</li>
|
|
<li>the field <code>age</code> and its value are editable</li>
|
|
</ul>
|
|
|
|
<div id="jsoneditor"></div>
|
|
|
|
<script>
|
|
var container = document.getElementById('jsoneditor');
|
|
|
|
var options = {
|
|
onEditable: function (node) {
|
|
// node is an object like:
|
|
// {
|
|
// field: 'FIELD',
|
|
// value: 'VALUE',
|
|
// path: ['PATH', 'TO', 'NODE']
|
|
// }
|
|
switch (node.field) {
|
|
case '_id':
|
|
return false;
|
|
|
|
case 'name':
|
|
return {
|
|
field: false,
|
|
value: true
|
|
};
|
|
|
|
default:
|
|
return true;
|
|
}
|
|
}
|
|
};
|
|
|
|
var json = {
|
|
_id: 123456,
|
|
name: 'John',
|
|
age: 32
|
|
};
|
|
|
|
var editor = jsoneditor(container, options, json);
|
|
</script>
|
|
</body>
|
|
</html>
|