JavaScript Tree

Set the source property of the jqxTree. Author: http://jqwidgets.com

by redoak2000

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxTree' style='float: left; margin-left: 60px;'></div>

JavaScript

var source = [{
       label: "Mail",
       expanded: true,
       items: [{
           label: "Calendar"
       }, {
           label: "Contacts",
           selected: true
       }]
   }, {
       label: "Inbox",
       expanded: true,
       items: [{
           label: "Admin"
       }, {
           label: "Corporate"
       }, {
           label: "Finance"
       }, {
           label: "Other"
       }, ]
   }, {
       label: "Deleted Items"
   }, {
       label: "Notes"
   }, {
       iconsize: 14,
       label: "Settings"
   }, {
       label: "Favorites"
   }, ];
   // create jqxTree

   $('#jqxTree').jqxTree({
       source: source,
       width: '250px',
       theme:'energyblue'

   });