Sha256: cf26dac31e6b7d7a615e7624a9ceee21a1ef1d1e6a8059a71112409859b3a301

Contents?: true

Size: 1.29 KB

Versions: 3

Compression:

Stored size: 1.29 KB

Contents

<!DOCTYPE HTML>
<html>
<head>
  <title>JSONEditor | Custom editable fields</title>

  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
  <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 = new JSONEditor(container, options, json);
  </script>
</body>
</html>

Version data entries

3 entries across 3 versions & 1 rubygems

Version Path
statixite-1.0.2 vendor/assets/bower_components/jsoneditor/examples/05_custom_fields_editable.html
statixite-1.0.1 vendor/assets/bower_components/jsoneditor/examples/05_custom_fields_editable.html
statixite-1.0.0 vendor/assets/bower_components/jsoneditor/examples/05_custom_fields_editable.html