search

rchockxm / js-orgChart-2

Organizational Chart JavaScript Library
http://rchockxm.com
MIT License
7 stars 4 forks source link

readme

js-orgChart-2

Organizational Chart JavaScript Library

Features:

Usage

You need to include the js-orgChart libraries. For example:

<script language="javascript" src="https://github.com/rchockxm/js-orgChart-2/raw/master/js/js-orgchart-2.js"></script>

The core CSS is optional. 

<link rel="stylesheet" type="text/css" href="https://github.com/rchockxm/js-orgChart-2/blob/master/js/js-orgchart-2.css">

The HTML

Target container is necessary include id="" of attribute.

<body>
    <div id="form" style="">
        <div id="orgchart"></div>
    </div>
</body>
<body>
    <div id="orgchart"></div>
</body>

Data Format

Create the root node of the chart.

var nodeParams = {
    options: {
        targetName: "orgchart",
        subTargetName: "orgnode",
        clsName: "org-node",
        width: 64,
        height: 32,
        minWidth: 0,
        minHeight: 0,
        maxWidth: 0,
        maxHeight: 0,
        template: ""
    },
    customParams: {
        caption: "Root",
        description: "Demo Nodes"
    }
};

var pOrgNodes = new OrgNodeV2(nodeParams);

Create the child nodes of root node. Use OrgNodeV2.addNodes method as a child of the current node.

var pOrgChildNode = null;
var nodeChildParams = {
    options: {
        targetName: "orgchart",
        subTargetName: "orgnode",
        clsName: "org-node",
        width: 16,
        height: 16,
        minWidth: 0,
        minHeight: 0,
        maxWidth: 0,
        maxHeight: 0,
        template: ""
    },
    customParams: {
        caption: "Child",
        description: "Demo Child Nodes"
    }
};

pOrgChildNode = new OrgNodeV2(nodeChildParams);
pOrgNodes.addNodes(pOrgChildNodes);

Custom params with Template.

customParams: {
    caption: "Root",
    description: "Demo Nodes"
}

Loading

Set the chart with params and use OrgChartV2.render() method to load.

var chartParams = {
    options: {
        top: 12,
        left: 12,
        lineSize: 2,
        lineColor: "#3388dd",
        node: {
            width: 64,
            height: 64,
            minWidth: 32,
            minHeight: 32,
            maxWidth: 128,
            maxHeight: 128,
            template: "<div id=\"{id}\">{caption} {description}</div>"
        }
    },
    event: {
        node: {
            onProcess: null,
            onClick: null,
            onMouseMove: null,
            onMouseOver: null,
            onMouseOut: null
        },
        onCreate: null,
        onError: null,
        onFinish: null
    },
    nodes: pOrgNodes
};

var pChart = new OrgChartV2(chartParams);
pChart.render();

Template

Use of the id="{id}" attribute in an HTML document. This is necessary.

<div id="{id}"></div>

Use another attribute with custom param.

var nodeChildParams = {
    options: {
        template: "<div id=\"{id}\" class=\"{className}\">{userName}</div>"
    },
    customParams: {
        className: "orgnode-demo",
        userName: "Rchockxm"
    }
};
div.orgnode-demo {
    background-color: #edf7ff;
}

Event

var chartParams = {
        event: {
            node: {
                onProcess: function(node, nodes) {
                    console.log("node.onProcess");
                },
                onClick: function() {
                    console.log("node.onClick");
                },
                onMouseMove: function() {
                    console.log("node.onMouseMove");
                },
                onMouseOver: function() {
                    console.log("node.onMouseOver");
                },
                onMouseOut: function() {
                    console.log("node.onMouseOut");
                }
            },
            onCreate: function() {
                console.log("onCreate");
            },
            onError: null,
            onFinish: function() {
                console.log("onFinish");
            }
        },
    };

You can view a demo of this here.

Author

Credits