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 = "
"+node.name+""+txt+"
"+node.data.desc+"
";
			} else {
					label.innerHTML = "
"+node.name+"
"+node.data.desc+"
";
			}
			
			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