62 lines
1.3 KiB
HTML
62 lines
1.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Read-only properties and values | JSONEditor</title>
|
|
|
|
<script src="../dist/jsoneditor.js"></script>
|
|
|
|
<style type="text/css">
|
|
#jsoneditor {
|
|
width: 300px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Read-only properties and values</h1>
|
|
<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 = {
|
|
// all properties are editable except '_id' and 'name'
|
|
isPropertyEditable: function (path) {
|
|
if (path.length === 1 && path[0] === '_id' || path[0] === 'name') {
|
|
return false
|
|
}
|
|
|
|
return true
|
|
},
|
|
|
|
// all values are editable except '_id'
|
|
isValueEditable: function (path) {
|
|
if (path.length === 1 && path[0] === '_id') {
|
|
return false
|
|
}
|
|
|
|
return true
|
|
}
|
|
}
|
|
|
|
var json = {
|
|
_id: 123456,
|
|
name: 'John',
|
|
age: 32
|
|
}
|
|
|
|
var editor = jsoneditor(container, options)
|
|
editor.set(json)
|
|
</script>
|
|
</body>
|
|
</html>
|