jorgchart,帮助你生成组织结构图的

下载地址：

http://yunpan.cn/c6pfenkmmFV2q  访问密码 8e29

演示链接：

http://www.gbtags.com/gb/share/546.htm

jstree.js 也是一种层级机构的js控件例子：

      var contextualMenuSample = function() {
            $("#tree_3").jstree({
                "core" : {
                    "themes" : {
                        "responsive": false
                    },
                    // so that create works
                    "check_callback" : true,
                    ‘data‘ : {
                        ‘url‘ : function (node) {
                            return "/departmentlist/companyid/"+companyid;
                        },
                        ‘data‘ : function (node) {
                            return { ‘parent‘:node.id};
                        }
                    }
                },
                "types" : {
                    "default" : {
                        "icon" : "fa fa-folder icon-state-warning icon-lg"
                    },
                    "file" : {
                        "icon" : "fa fa-file icon-state-warning icon-lg"
                    }
                },
                "state" : { "key" : "demo2" },
                "plugins" : [ "contextmenu", "dnd", "state", "types" ],
                "contextmenu": {
                    "items": {
                        "remove": null,
                        "ccp": null,
                        "add": {
                            "label": "新增",
                            "action": function (obj) {
                                var inst = jQuery.jstree.reference(obj.reference);
                                var clickedNode = inst.get_node(obj.reference);
                                addgory(clickedNode.id);
                                /*alert("add operation--clickedNode‘s id is:" + clickedNode.id);*/
                            }
                        },
                        "rename": {
                            "label": "编辑",
                            "action": function (obj) {
                                var inst = jQuery.jstree.reference(obj.reference);
                                var clickedNode = inst.get_node(obj.reference);
                                editgory(clickedNode.id);
                                /*alert("add operation--clickedNode‘s id is:" + clickedNode.id);*/
                            }
                         },
                        "create": {
                            "label": "查看员工",
                            "action": function (obj) {
                                var inst = jQuery.jstree.reference(obj.reference);
                                var clickedNode = inst.get_node(obj.reference);
                                look_yg(clickedNode.id)
                                //editgory(clickedNode.id);
                                /*alert("add operation--clickedNode‘s id is:" + clickedNode.id);*/
                            }
                        },
                        "delete": {
                            "label": "删除",
                            "action": function (obj) {
                                var inst = jQuery.jstree.reference(obj.reference);
                                var clickedNode = inst.get_node(obj.reference);
                                delgory(clickedNode.id);
                               // alert("delete operation--clickedNode‘s id is:" + clickedNode.id);
                            }
                        }
                    }
                }
            });

        };

        jQuery(document).ready(function() {
            Metronic.init(); // init metronic core components
            Demo.init(); // init demo features
            contextualMenuSample();
//            UITree.init();
        });