2014-07-27 21:46:42 +08:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2015-12-25 18:38:41 +08:00
|
|
|
<title>JSONEditor | Custom editable fields</title>
|
2015-02-28 04:54:04 +08:00
|
|
|
|
2015-03-01 03:47:23 +08:00
|
|
|
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
|
|
|
|
|
<script src="../dist/jsoneditor.js"></script>
|
2015-02-28 04:54:04 +08:00
|
|
|
|
2014-07-27 21:46:42 +08:00
|
|
|
<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>
|
|
|
|
|
|
2015-02-28 04:54:04 +08:00
|
|
|
<script>
|
2019-08-29 21:45:32 +08:00
|
|
|
const container = document.getElementById('jsoneditor')
|
2014-07-27 21:46:42 +08:00
|
|
|
|
2019-08-29 21:45:32 +08:00
|
|
|
const options = {
|
2015-12-25 18:38:41 +08:00
|
|
|
onEditable: function (node) {
|
2014-07-28 03:08:59 +08:00
|
|
|
// node is an object like:
|
|
|
|
|
// {
|
|
|
|
|
// field: 'FIELD',
|
|
|
|
|
// value: 'VALUE',
|
|
|
|
|
// path: ['PATH', 'TO', 'NODE']
|
|
|
|
|
// }
|
2014-07-27 21:46:42 +08:00
|
|
|
switch (node.field) {
|
|
|
|
|
case '_id':
|
2019-08-29 21:45:32 +08:00
|
|
|
return false
|
2014-07-27 21:46:42 +08:00
|
|
|
|
|
|
|
|
case 'name':
|
|
|
|
|
return {
|
|
|
|
|
field: false,
|
|
|
|
|
value: true
|
2019-08-29 21:45:32 +08:00
|
|
|
}
|
2014-07-27 21:46:42 +08:00
|
|
|
|
|
|
|
|
default:
|
2019-08-29 21:45:32 +08:00
|
|
|
return true
|
2014-07-27 21:46:42 +08:00
|
|
|
}
|
|
|
|
|
}
|
2019-08-29 21:45:32 +08:00
|
|
|
}
|
2014-07-27 21:46:42 +08:00
|
|
|
|
2019-08-29 21:45:32 +08:00
|
|
|
const json = {
|
2014-07-27 21:46:42 +08:00
|
|
|
_id: 123456,
|
|
|
|
|
name: 'John',
|
|
|
|
|
age: 32
|
2019-08-29 21:45:32 +08:00
|
|
|
}
|
2014-07-27 21:46:42 +08:00
|
|
|
|
2019-08-29 21:45:32 +08:00
|
|
|
const editor = new JSONEditor(container, options, json)
|
2014-07-27 21:46:42 +08:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
