Dynamic Tree View With Visual Connections - jsPlumbTree

jsPlumbTree is a jQuery plugin that renders a collapsible and expandable tree structure representing the hierarchical relationship between various nodes.

Additionally, the plugin uses jsPlumb library to draw connection lines using bezier curves between these nodes similar to a flowchart or diagram.

How to use it:

1. Load the necessary jQuery and jsPlumb JavaScript libraries in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/jsPlumb.min.js"></script>

2. Load the jsPlumbTree's script after jQuery.

<script src="./jsplumb-tree.js"></script>

3. Add nodes to the tree view.

• data-id: Unique ID
• data-parent: Parent ID
• data-first-child: First Child ID
• data-next-sibling: Sibling ID

<div id="treemain">

  <div id="node_0" class="window hidden"
       data-id="0"
       data-parent=""
       data-first-child="1"
       data-next-sibling="">
       Root
  </div>

  <div id="node_1" class="window hidden"
       data-id="1"
       data-parent="0"
       data-first-child="4"
       data-next-sibling="2">
       Node 1
  </div>

  <div id="node_2" class="window hidden"
       data-id="2"
       data-parent="0"
       data-first-child="6"
       data-next-sibling="3">
       Node 2
  </div>

  <div id="node_3" class="window hidden"
       data-id="3"
       data-parent="0"
       data-first-child=""
       data-next-sibling="">
       Node 3
  </div>

  <div id="node_4" class="window hidden"
       data-id="4"
       data-parent="1"
       data-first-child=""
       data-next-sibling="5">
       Node 1-1
  </div>

  <div id="node_5" class="window hidden"
       data-id="5"
       data-parent="1"
       data-first-child=""
       data-next-sibling="">
       Node 1-2
  </div>

  <div id="node_6" class="window hidden"
       data-id="6"
       data-parent="2"
       data-first-child=""
       data-next-sibling="7">
       Node 2-1
  </div>

  <div id="node_7" class="window hidden"
       data-id="7"
       data-parent="2"
       data-first-child=""
       data-next-sibling="8">
       Node 2-2
  </div>

  <div id="node_8" class="window hidden"
       data-id="8"
       data-parent="2"
       data-first-child=""
       data-next-sibling="9">
       Node 2-3
  </div>

  <div id="node_9" class="window hidden"
       data-id="9"
       data-parent="2"
       data-first-child=""
       data-next-sibling="">
       Node 2-4
  </div>

</div>

4. Customize the styles of the connection lines.

var connectorPaintStyle = {
    lineWidth:3,
    strokeStyle:"#4F81BE",
    joinstyle:"round"
};

5. Initialize the plugin and render the tree view on the page.

var pdef = {
    // disable dragging
    DragOptions: null,
    // the tree container
    Container : "treemain"
};
var plumb = jsPlumb.getInstance(pdef);

// all sizes are in pixels
var opts = {
    prefix: 'node_',
    // left margin of the root node
    baseLeft: 24,
    // top margin of the root node
    baseTop: 24,
    // node width
    nodeWidth: 100,
    // horizontal margin between nodes
    hSpace: 36,
    // vertical margin between nodes
    vSpace: 10,
    imgPlus: 'tree_expand.png',
    imgMinus: 'tree_collapse.png',
    // queste non sono tutte in pixel
    sourceAnchor: [ 1, 0.5, 1, 0, 10, 0 ],
    targetAnchor: "LeftMiddle",
    sourceEndpoint: {
        endpoint:["Image", {url: "tree_collapse.png"}],
        cssClass:"collapser",
        isSource:true,
        connector:[ "Flowchart", { stub:[40, 60], gap:[10, 0], cornerRadius:5, alwaysRespectStubs:false } ],
        connectorStyle:connectorPaintStyle,
        enabled: false,
        maxConnections:-1,
        dragOptions:null
    },
    targetEndpoint: {
        endpoint:"Blank",
        maxConnections:-1,
        dropOptions:null,
        enabled: false,
        isTarget:true
    },
    connectFunc: function(tree, node) {
        var cid = node.data('id');
        console.log('Connecting node ' + cid);
    }
};
var tree = jQuery.jsPlumbTree(plumb, opts);
tree.init();
window.treemain = tree;

6. All default options.

var opts = {
    // node objects id prefix
    prefix: 'node_',
    // left coordinate of root node (0)
    baseLeft: 0,
    // top coordinate of root node (0)
    baseTop: 0,
    // node width
    nodeWidth: 100,
    // horizontal padding between nodes
    hSpace: 36,
    // vertical padding between nodes
    vSpace: 10,
    // source anchor
    sourceAnchor: "RightMiddle",
    // target anchor
    targetAnchor: "LeftMiddle",
    // source endpoint definition
    sourceEndpoint: null,
    // target endpoint definition
    targetEndpoint: null,
    // image url for plus anchor button
    imgPlus: null,
    // image url for minus anchor button
    imgMinus: null,
    // a function(this, node) to be called before making a connection
    connectFunc: null
};

---

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