Canvas Based Tree View Plugin For jQuery - ctree

File Size: 35.1 KB
Views Total: 3213
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Canvas Based Tree View Plugin For jQuery - ctree

ctree is a dynamic, easy-to-use jQuery tree view plugin used to present your hierarchical data (e.g. folders, files) in collapsible, selectable, HTML5 canvas based tree structures. Dual licensed under the MIT and GPL v2.

How to use it:

1. Create a container element where to place the canvas tree view.

<div id="myTree"></div>

2. Insert jQuery JavaScript library and the jQuery ctree plugin's script at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.ctree.js"></script>

3. Prepare your hierarchical JSON data to be presented in the canvas tree view.

var myData = {
    "children" : [
      {
          "name" : "Internal Hardware",
          "type" : "computer",
          "children" : [
              {
              "name" : "Audio Card",
              "type" : "audioCard"
              },{
              "name" : "CPU",
              "type" : "cpu"
              },{
              "name" : "Battery",
              "type" : "battery"
              }
          ]
      },{
          "name" : "External Hardware",
          "children" : [{"name":"Mouse","type":"mouse"},
          {
          "name" : "Microphone",
          "type" : "microPhone",
          "children" : [
              {"name":"Audio Input Line", "type":"audioInputLine"}
          ]
          },{
          "name" : "Gaming",
          "type" : "gaming"
          },{
          "name":"Camera", "type":"camera"
          },{"name":"Floppy", "type":"floppy"},{"name":"Optical Disk", "type":"opticalDisk"},{"name":"Printer", "type":"printer"}
          ]
      }
  ]
};

4. Initialize the plugin to render a tree view on the canvas element.

$("#myTree").ctree({
  "json_data" : myData
})

5. Customize the tree view by override the default settings as displayed below:

$("#myTree").ctree({
  "json_data" : myData,
  "id": "tree id",
  "name": "tree name",
  "cTreeImgs": "files/img/cTreeNodeIcons.png",
  "forceUseImgs": true,
  "types" : { // node icons
    "hardDisk" : {"icon" : "imgFiles/drive-harddisk-3.png"},
    "cpu" : {"icon" : "imgFiles/cpu.png"},
    "battery" : {"icon" : "imgFiles/battery-2.png"},
    "microPhone" : {"icon" : "imgFiles/audio-input-microphone-2.png"},
    "gaming" : {"icon" : "imgFiles/input-gaming-2.png"},
    "cpuFan" : {"icon" : "imgFiles/cpu-fan.png"},
    "audioInputLine" : {"icon" : "imgFiles/audio-input-line.png"}
  },
  "select_mode" : true
})

6. Event handlers.

$("#myTree").ctree({
  "json_data" : myData,
}).bind('CTREE_EVENT_DESELECT', function(e, obj){
  // on deselect
}).bind('CTREE_EVENT_SELECT', function(e, obj){
  // on select
});

This awesome jQuery plugin is developed by shaochuancs. For more Advanced Usages, please check the demo page or visit the official website.