jspeaker edited this page Sep 13, 2012 · 2 revisions
Clone this wiki locally

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


simpleJsonTree provides a single jQuery extension method:

        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);

simpleJsonTree rendered output

#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.