介绍

这是一个生成组织结构图的前端工具。依赖于jquery。

示例

使用

###　安装依赖包

npm位置:https://www.npmjs.com/package/jq-orgchart

# install packages(npm)
$ npm install jq-orgchart --save

# install packages(bower)
$ bower install jq-orgchart --save

###　引用

    引入基础css
    <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
    引入自定义css，可以修改成自己想要的样式
    <link rel="stylesheet" href="css/custom.css"/>
    
    本工具依赖于jQuery，首先引入jQuery
    <script type="text/javascript" src="js/jquery-min.js"></script>
    引入主体js
    <script src="js/jquery.jOrgChart.js"></script>

###　用法示例

<script>
        // data数据
        var data = [
            {id: "0", name: "根节点", collapsed: false, url: ""},
            {id: "1", parentId: "0", name: "页面", collapsed: false, url: "", orderNum: 1,nodeClass:"male"},
            {id: "2", parentId: "0", name: "表单", collapsed: false, url: "", orderNum: 2,nodeClass:"male"},
            {id: "5", parentId: "0", name: "其它", collapsed: true, url: "", orderNum: 3,nodeClass:"male"},
            {id: "3", parentId: "1", name: "查询1", collapsed: true, url: "", orderNum: 1,nodeClass:"male"},
            {id: "4", parentId: "2", name: "表单1", collapsed: false, url: "http://www.baidu.com", orderNum: 1,nodeClass:"male"},
            {id: "6", parentId: "5", name: "其他1", collapsed: false, url: "http://www.baidu.com", orderNum: 1,nodeClass:"male"},
            {id: "7", parentId: "1", name: "查询2", collapsed: false, url: "", orderNum: 2,nodeClass:"male"},
            {id: "10", parentId: "7", name: "查询2-1", collapsed: false, url: "http://www.baidu.com", orderNum: 1,nodeClass:"male"},
            {id: "8", parentId: "3", name: "查询1-1", collapsed: true, url: "", orderNum: 1,nodeClass:"male"},
            {id: "9", parentId: "8", name: "查询1-1-1", collapsed: false, url: "http://www.baidu.com", orderNum: 1,nodeClass:"male"}
        ];
        // options选项
        var options={
            data : data,
            showOrderNum: true,
            rootId : 0
        };
        $(function(){
            $("#chart").orgChat(options);
        });
    </script>
    
    <div id="chart" class="orgChart"></div>

data数据选项

选项	类型	描述
id	string	数据节点id
parentId	string	数据节点父id
name	json array	节点名称
collapsed	boolean	是否折叠
url	number	节点超地址链接
orderNum	boolean	同级节点顺序编号
nodeClass	boolean	自定义node节点class

options选项

选项	类型	默认	描述
depth	number	-1	显示级数限制，-1为不限制
chartClass	string	"org-chart"	结构图容器class名称
data	json array	[]	结构图数据
rootId	number	0	根节点
showOrderNum	boolean	true	是否显示orderNum

说明

参考 wesnolte 的 jOrgChart