Drag & Drop Enabled jQuery Tree View Plugin – OrgCharts

Looking for a affordable website?

GET STARTED
www.codingexpertz.com
Drag & Drop Enabled jQuery Tree View Plugin – OrgCharts

File Size: 322KB

Total Views: 987

Date Created:

Last Modified Date:

Official Website: Go to website

License:

OrgCharts is a lightweight and easy to use jQuery plugin that allows you to create structures with nested elements tree view chart. Just add the nested elements with simple <ul>, <li> structure and it will automatically convert this to <table> structure and rendered within the page perfectly. Also supported drag and drop features, you will just need to enable it.

Features:

  • Lightweight and very easy to use.
  • Supported tree view within nested elements.
  • Included drag and drop features.
  • Style can be modified easily with CSS.
  • Showing/hiding a particular branch of the tree by clicking on the respective node.

How to use it:

1. Include the Javascript jquery.jOrgChart.js at the bottom of the web page.

<script src="path/to/jquery.jOrgChart.js"></script>

2. Include the CSS jquery.jOrgChart.css in the header of the page.

<link rel="stylesheet" href="path/to/jquery.jOrgChart.css">

Include jQuery UI for Drag and Drop features.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

3. Add the basic HTML to the page.

<ul id="org" style="display:none">
  <li>
    Food
    <ul>
      <li id="beer">Beer</li>
      <li>Vegetables
        <a href="#" target="_blank">Click me</a>
        <ul>
          <li>Pumpkin</li>
          <li>
             <a href="#" target="_blank">Aubergine</a>
             <p>A link and paragraph.</p>
          </li>
        </ul>
      </li>
      <li class="fruit">Fruit
        <ul>
          <li>Apple
            <ul>
              <li>Granny Smith</li>
            </ul>
          </li>
          <li>Berries
            <ul>
              <li>Blueberry</li>
              <li><img src="../assets/images/berry.jpg" alt="Raspberry"/></li>
              <li>Cucumber</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Bread</li>
      <li class="collapsed">Chocolate
        <ul>
          <li>Topdeck</li>
          <li>Reese's Cups</li>
        </ul>
      </li>
    </ul>
  </li>
  </ul>
<div id="chart" class="orgChart"></div>

4. Initialize the plugin and we’re ready to go.

jQuery(document).ready(function() {
  $("#org").jOrgChart({
    chartElement : '#chart'
  });
});

Plugin’s default options:

Name Default Description
chartElement ‘body’ used to specify which HTML element you’d like to append the OrgChart markup to.
depth -1 tells the code what depth to parse to. The default value of “-1” instructs it to parse like it’s 1999.
chartClass ‘jOrgChart’ the name of the style class that is assigned to the generated markup.
dragAndDrop false determines whether the drag-and-drop feature of tree node elements is enabled.

Leave a comment

Your email address will not be published. Required fields are marked *

STAYUPDATED

Receive all our future posts instantly in your inbox. Enter your email to enroll.