Tree-style Expanding JS Object Viewer/Editor In jQuery - Expando
File Size: | 29.1 KB |
---|---|
Views Total: | 1750 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Expando is a tiny jQuery-powered JS Object Viewer/Editor that helps developers creates a very nice expandable tree hierarchy of your data.
With this plugin you can create an editable tree with collapsible branches to easily browse/edit JavaScript objects and their properties.
See Also:
How to use it:
1. Load the necessary jQuery and underscore.js libraries in the document.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/cdn/underscore-min.js"></script>
2. Download and load the Expando plugin's files.
<link href="/path/to/css/expando.css" rel="stylesheet" /> <script src="/path/to/js/expando.js"></script>
3. Create an empty DIV to hold the JS Object Viewer.
<div id="expando"></div>
4. Define your data to be present in the tree.
var obj = { "?": "xml version=\"1.0\" encoding=\"UTF-8\"", "eddo:root": { "@xmlns:eddo": "ns:eddo", "child1": "text", "!": "-- you cant see me --", "child": { "grandchild": [ "one", "two", "gggbffg" ] }, "child3": { "@a2": "v2", "#": "complex text" } } };
5. Call the function on the DIV container and the plugin will do the rest.
$(function(){ $('#expando').expando(obj); });
6. Return an object from the JS Object Viewer.
$('#expando').collapso();
7. Override the default collapse/expand/checkbox icons.
const image_base = 'image/'; const image_closed = image_base + 'expandoClosed.png'; const image_open = image_base + 'expandoOpen.png'; const image_property = image_base + 'property.png'; const image_blank = image_base + 'blank.png'; const image_todo = image_base + 'taskTodoIncomplete.png'; const image_done = image_base + 'taskTodoComplete.png';
This awesome jQuery plugin is developed by eddo888. For more Advanced Usages, please check the demo page or visit the official website.