Documentation

The simpleJsonTree is a jQuery extension that provides simple client-side rendering of JSON data as a hierarchical tree control.

#API:

simpleJsonTree provides a single jQuery extension method:

      jsonTree(data)
        data: the JSON data to render in the target element.

#Getting Started:

1. Place simple-json-tree.js and js-extensions.js in your scripts directory, whatever it may be called, and reference the files in script tag(s) within your page, e.g. <script type='text/javascript' src='/scripts/simple-json-tree.js'></script> and <script type='text/javascript' src='/scripts/js-extensions.js'></script>.
2. Place the simple-json-tree-objects.png and simple-json-tree-plus-minus.png sprite images in the root of your images directory.
3. Place simple-json-tree.css in your styles directory, whatever it may be called, and reference the file in a link tag, e.g. <link rel='stylesheet' type='text/css' href='/styles/simple-json-tree.css' />.
4. Add the call to render your JSON data tree control where appropriate in your code.

#One Call to Rule Them All: $("#myTargetElement).jsonTree(myJsonData);

#Example in the Solution: The Visual Studio 2010 solution provided includes sample data in sampleData.js and a sample index.html page with appropriate references and call to render a simple JSON tree.