organizationchart v0.0.6

Perhaps you'd prefer the jQuery version

Perhaps you'd prefer the Web Components version

Perhaps you'd prefer the native javascript(ES6) version

Foreword

• First of all, this is a porting to typescript of dabeng's great work -- OrgChart.js. So I've to thank him for that.
• Secondarily: I've extended the compatibility of this component to IE11/Edge and improved some issues related to zoom and pan.
• The rest of this readme it's a copy of the original one.
• Font Awesome provides us with administration icon, second level menu icon and loading spinner.

Features

• Supports both local data and remote data (JSON).
• Smooth expand/collapse effects based on CSS3 transitions.
• Align the chart in 4 orientations.
• Allows user to change orgchart structure by drag/drop nodes.
• Allows user to edit orgchart dynamically and save the final hierarchy as a JSON object.
• Supports exporting chart as a picture.
• Supports pan and zoom
• Users can adopt multiple solutions to build up a huge organization chart(please refer to multiple-layers or hybrid layout sections)
• touch-enabled plugin for mobile divice

Browser compatibility

• Chrome
• Firefox
• IE11
• Edge
• Safari

Getting started

Build

npm install
gulp build

Serve

gulp serve

Now, you can try out all the demos on http://localhost:3000.

Note: your nodejs version should be 4+.

Usage

Instantiation Statement

let orgchart = new OrgChart(options);

Structure of Datasource

{
  'id': 'rootNode', // It's a optional property which will be used as id attribute of node
  // and data-parent attribute, which contains the id of the parent node
  'className': 'top-level', // It's a optional property which will be used as className attribute of node.
  'nodeTitlePro': 'Lao Lao',
  'nodeContentPro': 'general manager',
  'relationship': relationshipValue, // Note: when you activate ondemand loading nodes feature,
  // you should use json datsource (local or remote) and set this property.
  // This property implies that whether this node has parent node, siblings nodes or children nodes.
  // relationshipValue is a string composed of three "0/1" identifier.
  // First character stands for wether current node has parent node;
  // Scond character stands for wether current node has siblings nodes;
  // Third character stands for wether current node has children node.
  'children': [ // The property stands for nested nodes. "children" is just default name you can override.
    { 'nodeTitlePro': 'Bo Miao', 'nodeContentPro': 'department manager', 'relationship': '110' },
    { 'nodeTitlePro': 'Su Miao', 'nodeContentPro': 'department manager', 'relationship': '111',
      'children': [
        { 'nodeTitlePro': 'Tie Hua', 'nodeContentPro': 'senior engineer', 'relationship': '110' },
        { 'nodeTitlePro': 'Hei Hei', 'nodeContentPro': 'senior engineer', 'relationship': '110' }
      ]
    },
    { 'nodeTitlePro': 'Yu Jie', 'nodeContentPro': 'department manager', 'relationship': '110' }
  ],
  'otherPro': anyValue
};

Options

Methods

I'm sure that you can grasp the key points of the methods below after you try out demo -- edit orgchart.

let orgchart = new OrgChart(options);

Embeds an organization chart in designated container. Accepts an options object and you can go through the "options" section to find which options are required.

.addParent(root, data)

Adds parent node(actullay it's always root node) for current orgchart.

Events