jquery组织结构图插件 （基于jit-yc 做可拖动、自适应伸缩的orgchart)

一个基于jquery jit-yc插件实现的orgchart结构图demo

首先 后台处理转入JSON数据是必须的，

var json = {    "id": 1,    "name": "集团总部","data":{'desc':'简介','link':'http://www.baidu.com'},    "children": [        {            "id": 10,            "name": "物业公司",            "data": {'desc':'简介','link':'http://www.baidu.com'},            "children": [                {                    "id": 20,                    "name": "财务1部",                    "data": {'desc':'简介','link':'http://www.baidu.com'},"children":[{"id":30,"name":"1部1处","data":{'desc':'简介','link':'http://www.baidu.com'}},{"id":31,"name":"1部2处","data":{'desc':'简介','link':'http://www.baidu.com'}}]                },{                    "id": 21,                    "name": "财务2部",                    "data": {'desc':'简介','link':'http://www.baidu.com'},"children":[{"id":32,"name":"2部1处","data":{'desc':'简介','link':'http://www.baidu.com'}}]                },            ]        },        {            "id": 11,            "name": "建筑公司",            "data": {'desc':'简介','link':'http://www.baidu.com'},            "children": [{"id":25,"name":"行政部","data":{'desc':'简介','link':'http://www.baidu.com'}}]        },        {            "id": 12,            "name": "装饰公司",            "data": {'desc':'简介','link':'http://www.baidu.com'},            "children": []        }    ]};

然后，主要是JS功能（也是newChart.js的全部内容），

var labelType, useGradients, nativeTextSupport, animate;(function() {  var ua = navigator.userAgent,      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),      typeOfCanvas = typeof HTMLCanvasElement,      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),      textSupport = nativeCanvasSupport         && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');  //I'm setting this based on the fact that ExCanvas provides text support for IE  //and that as of today iPhone/iPad current text support is lame  labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';  nativeTextSupport = labelType == 'Native';  useGradients = nativeCanvasSupport;  animate = !(iStuff || !nativeCanvasSupport);})();var Log = {  elem: false,  write: function(text){    if (!this.elem)     this.elem = document.getElementById('log');    this.elem.innerHTML = text;    this.elem.style.left = (document.body.clientWidth - this.elem.offsetWidth) / 2 + 'px';  }};function init(){    //init data    var json = {    "id": 1,    "name": "集团总部","data":{'desc':'简介','link':'http://www.baidu.com'},    "children": [        {            "id": 10,            "name": "物业公司",            "data": {'desc':'简介','link':'http://www.baidu.com'},            "children": [                {                    "id": 20,                    "name": "财务1部",                    "data": {'desc':'简介','link':'http://www.baidu.com'},"children":[{"id":30,"name":"1部1处","data":{'desc':'简介','link':'http://www.baidu.com'}},{"id":31,"name":"1部2处","data":{'desc':'简介','link':'http://www.baidu.com'}}]                },{                    "id": 21,                    "name": "财务2部",                    "data": {'desc':'简介','link':'http://www.baidu.com'},"children":[{"id":32,"name":"2部1处","data":{'desc':'简介','link':'http://www.baidu.com'}}]                },            ]        },        {            "id": 11,            "name": "建筑公司",            "data": {'desc':'简介','link':'http://www.baidu.com'},            "children": [{"id":25,"name":"行政部","data":{'desc':'简介','link':'http://www.baidu.com'}}]        },        {            "id": 12,            "name": "装饰公司",            "data": {'desc':'简介','link':'http://www.baidu.com'},            "children": []        }    ]};    //end    //init Spacetree    //Create a new ST instance    var st = new $jit.ST({        //id of viz container element        injectInto: 'infovis',        //set duration for the animation        duration: 800,        //set animation transition type        transition: $jit.Trans.Quart.easeInOut,        //set distance between node and its children        levelDistance: 50,width:1000,height:400,background:true,        //enable panning        Navigation: {          enable:true,          panning:true        },        //set node and edge styles        //set overridable=true for styling individual        //nodes or edges        Node: {            height: 45,            width: 122,            type: 'rectangle',            color: '#fff',            overridable: true        },                Edge: {            type: 'bezier',            overridable: true        },                onBeforeCompute: function(node){            Log.write("loading...  " + node.name);        },                onAfterCompute: function(){            Log.write("done");        },                //This method is called on DOM label creation.        //Use this method to add event handlers and styles to        //your node.        onCreateLabel: function(label, node){    var hasSub=$jit.Graph.Util.getSubnodes(node,1);if (hasSub.length){var txt='>>';label.innerHTML = "<h3 style='margin:0 0 3px; text-align:center'>"+node.name+"<span>"+txt+"</span></h3><p style='margin:3px 0 0'><a href='"+node.data.link+"' target='_blank'>"+node.data.desc+"</a></p>";} else {label.innerHTML = "<h3 style='margin:0 0 3px; text-align:center'>"+node.name+"</h3><p style='margin:3px 0 0'><a href='"+node.data.link+"' target='_blank'>"+node.data.desc+"</a></p>";}label.id = node.id;                        label.onclick = function(){            if(normal.checked) {              st.onClick(node.id);            } else {                st.setRoot(node.id, 'animate');            }            };            //set label styles            var style = label.style;            style.width = 122 + 'px';            style.height = 45 + 'px';                        style.cursor = 'pointer';            style.color = '#333';            style.fontSize = '0.8em';            style.textAlign= 'left';            style.paddingTop = '3px';            style.paddingLeft = '5px';        },                //This method is called right before plotting        //a node. It's useful for changing an individual node        //style properties before plotting it.        //The data properties prefixed with a dollar        //sign will override the global node style properties.        onBeforePlotNode: function(node){            //add some color to the nodes in the path between the            //root node and the selected node.            if (node.selected) {                node.data.$color = "orange";jQuery(function(){$('#'+node.id+' h3 span').html('');});            }            else {                delete node.data.$color;jQuery(function(){$('#'+node.id+' h3 span').html('>>');});                //if the node belongs to the last plotted level                if(!node.anySubnode("exist")) {                    //count children number                    var count = 0;                    node.eachSubnode(function(n) { count++; });                    //assign a node color based on                    //how many children it has                    //node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];                                    }            }        },                //This method is called right before plotting        //an edge. It's useful for changing an individual edge        //style properties before plotting it.        //Edge data proprties prefixed with a dollar sign will        //override the Edge global style properties.        onBeforePlotLine: function(adj){            if (adj.nodeFrom.selected && adj.nodeTo.selected) {                adj.data.$color = "black";                adj.data.$lineWidth = 1;            }            else {                delete adj.data.$color;                delete adj.data.$lineWidth;            }        }    });    //load json data    st.loadJSON(json);    //compute node positions and layout    st.compute();    //optional: make a translation of the tree    st.geom.translate(new $jit.Complex(-200, 0), "current");    //emulate a click on the root node.    st.onClick(st.root);    //end    //Add event handlers to switch spacetree orientation.    var top = $jit.id('r-top'),         left = $jit.id('r-left'),         bottom = $jit.id('r-bottom'),         right = $jit.id('r-right'),        normal = $jit.id('s-normal');        function changeHandler() {        if(this.checked) {            top.disabled = bottom.disabled = right.disabled = left.disabled = true;            st.switchPosition(this.value, "animate", {                onComplete: function(){                    top.disabled = bottom.disabled = right.disabled = left.disabled = false;                }            });        }    };        top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;    //end}

官网上有比较简单的案例code，也有比较完善一点，参看：http://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example1.html

之前其实是先发现这个demo，http://www.gbtags.com/technology/javascript/jsorgchart/orgchart.html，这里是JSON处理了一下，默认显示两级。

Demo: http://pan.baidu.com/s/1o69uO7C