基于jit漂亮组织机构图

最新推荐文章于 2024-05-15 10:55:46 发布

slry

最新推荐文章于 2024-05-15 10:55:46 发布

阅读量1.1k

点赞数

文章标签： jit 组织机构图 js

本文链接：https://blog.csdn.net/yvhitxcel/article/details/82760102

版权

本来是html的，为了方便接收GET，改成了php，可能是史上最简单的PHP代码了。文件名example.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Spacetree - Tree Animation</title>

<!--[if IE]><script language="javascript" type="text/javascript" src="js/Extras/excanvas.js"></script><![endif]-->

<!-- JIT Library File -->
<script language="javascript" type="text/javascript" src="js/jit-yc.js"></script>

<!-- Example File -->
<script language="javascript" type="text/javascript" src="js/spacetree.js"></script>
<style>
#container {height: 600px; margin:0 auto; position:relative;}
#container #center-container { position:relative;top:0;color:#ccc;}
#container #inner-details {font-size:0.8em;list-style:none; margin:7px;}
#container #log {position:absolute;top:10px;font-size:1.0em;font-weight:bold;color:#23A4FF;}
#container #infovis {position:relative;width:800px;height:600px;margin:auto;overflow:hidden;top: 0;}
</style>
</head>

<body onload="init('<?php echo isset($_GET['id'])?$_GET['id']:"xphxcc";?>');">
<div id="container">

<div id="center-container">
    <div id="infovis"></div>    
</div>

<div id="log"></div>
</div>
</body>
</html>

spacetree.js 其实就是基于官方的DEMO改的。

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');
  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 = (500 - this.elem.offsetWidth / 2) + 'px';

  }
  
};


function init(nodeid){
    //init data
    var json = {id: "xphxcc",name: "霞浦项目部",data: {width:100,height:32},children: [
		{id: "xuanchuan",name: "宣传工作组织",data: {},children: [
			{id: "xcz",name: "宣传工作组",data: {},children: [
				{id: "node3.70",name: "王五",data: {},children: []},
				{id: "node3.71",name: "王五",data: {},children: []}
			]}
		]},
		{id: "jinlibu",name: "经理部",data: {},children: [
			{id: "zhb",name: "综合管理部",data: {},children: [
				{id: "node3.80",name: "新闻组",data: {},children: [
					{id: "node4.1",name: "钱七",data: {},children: []},
					{id: "node4.2",name: "王五",data: {},children: []},
					{id: "node4.3",name: "王五",data: {},children: []}
				]}
			]}
		]},
		{id: "dang",name: "党组织",data: {},children: [
			{id: "dzb1",name: "第一党支部",data: {},children: [
				{id: "node3.10",name: "王五",data: {},children: []},
				{id: "node3.11",name: "王五",data: {},children: []},
				{id: "node3.12",name: "王五",data: {},children: []},
				{id: "node3.13",name: "王老五",data: {},children: []},
				{id: "node3.14",name: "王五",data: {},children: []},
				{id: "node3.15",name: "王五",data: {},children: []},
				{id: "node3.16",name: "王五",data: {},children: []},
				{id: "node3.17",name: "王五",data: {},children: []},
				{id: "node3.18",name: "王五",data: {},children: []},
				{id: "node3.19",name: "王五",data: {},children: []}
			]}
			,{id: "dzb2",name: "第二党支部",data: {},children: [
				{id: "node3.100",name: "李四",data: {},children: []},
				{id: "node3.101",name: "王五",data: {},children: []},
				{id: "node3.102",name: "王五",data: {},children: []},
				{id: "node3.103",name: "王五",data: {},children: []},
				{id: "node3.104",name: "王五",data: {},children: []},
				{id: "node3.105",name: "王五",data: {},children: []},
				{id: "node3.106",name: "王五",data: {},children: []},
				{id: "node3.107",name: "王五",data: {},children: []},
				{id: "node3.108",name: "王五",data: {},children: []},
				{id: "node3.109",name: "王五",data: {},children: []},
				{id: "node3.1010",name: "王五",data: {},children: []}
			]}
		]},
		{id: "tuan",name: "团组织",data: {},children: [
			{id: "tzb1",name: "第一团支部",data: {},children: [
				{id: "node3.21",name: "王五",data: {},children: []},
				{id: "node3.22",name: "王五",data: {},children: []},
				{id: "node3.23",name: "王五",data: {},children: []},
				{id: "node3.24",name: "王五",data: {},children: []},
				{id: "node3.25",name: "王五",data: {},children: []},
				{id: "node3.26",name: "王五",data: {},children: []},
				{id: "node3.27",name: "王五",data: {},children: []},
				{id: "node3.28",name: "王五",data: {},children: []}
			]}
			,{id: "tzb2",name: "第二团支部",data: {},children: [
				{id: "node3.30",name: "赵六",data: {},children: []},
				{id: "node3.31",name: "王五",data: {},children: []},
				{id: "node3.32",name: "王五",data: {},children: []},
				{id: "node3.33",name: "王五",data: {},children: []},
				{id: "node3.34",name: "王五",data: {},children: []},
				{id: "node3.35",name: "王五",data: {},children: []},
				{id: "node3.36",name: "王五",data: {},children: []},
				{id: "node3.37",name: "王五",data: {},children: []},
				{id: "node3.38",name: "王五",data: {},children: []},
				{id: "node3.39",name: "王五",data: {},children: []}
			]}
		]},
		{id: "gonghui",name: "工会组织",data: {},children: [
			{id: "gh1",name: "第一支会",data: {},children: [
				{id: "node3.50",name: "王五",data: {},children: []},
				{id: "node3.51",name: "王五",data: {},children: []}
			]},
			{id: "gh2",name: "第二支会",data: {},children: [
				{id: "node3.500",name: "王五",data: {},children: []},
				{id: "node3.510",name: "王五",data: {},children: []}
			]}
		]},
		{id: "jijian",name: "纪检组织",data: {},children: [
			{id: "jj1",name: "纪检工作组",data: {},children: [
				{id: "node3.40",name: "王五",data: {},children: []},
				{id: "node3.41",name: "王五",data: {},children: []}
			]}
		]},
		{id: "wenhua",name: "企业文化组织",data: {},children: [
			{id: "wh1",name: "文化工作组",data: {},children: [
				{id: "node3.60",name: "王五",data: {},children: []},
				{id: "node3.61",name: "王五",data: {},children: []}
			]}
		]}
	]};
    //end
    //init Spacetree
    //Create a new ST instance
    var st = new $jit.ST({
        injectInto: 'infovis',
        duration: 400,
        transition: $jit.Trans.Quart.easeInOut,
        levelDistance: 50,
        //enable panning
        Navigation: {
          enable:true,
          panning:true
        },
		orientation:"top",
        Node: {
            height: 65,
            width: 20,
            type: 'rectangle',
            color: '#ccb',
            overridable: true
        },
        
        Edge: {
            type: 'bezier',
            overridable: true
        },
        
        onBeforeCompute: function(node){
            Log.write("加载 " + node.name);
        },
        
        onAfterCompute: function(){
            //Log.write("完成");	
        },

		//创建节点
        onCreateLabel: function(label, node){
            label.id = node.id;            
            label.innerHTML = node.name;
			label.onclick = function(){
            	  st.onClick(node.id);
            };
            //set label styles
            var style = label.style;
            style.width = 20 + 'px';
            //style.height = 17 + 'px';            
            style.cursor = 'pointer';
            style.color = '#fff';
            style.fontSize = '1em';
            style.textAlign= 'right';
			//style.paddingLeft = '10px';
            style.paddingTop = '3px';
        },

        onBeforePlotNode: function(node){
            if (node.selected) {
                node.data.$color = "#776";
            }
            else {
                delete node.data.$color;
                if(!node.anySubnode("exist")) {
                    var count = 0;
                    node.eachSubnode(function(n) { count++; });
                    node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];                    
                }
            }
        },
		
		//同步节点背景块样式
        onPlaceLabel: function(label, node) {
          var style = label.style;
          style.width = node.getData('width') + 'px';
          style.height = node.getData('height') + 'px';            
          style.color = node.getLabelData('color');
          //style.fontSize = node.getLabelData('size') + 'px';
          style.textAlign= 'center';
          style.paddingTop = '3px';
        },

		//轨迹线效果
        onBeforePlotLine: function(adj){
            if (adj.nodeFrom.selected && adj.nodeTo.selected) {
                adj.data.$color = "#666";
                adj.data.$lineWidth = 3;
            }
            else {
                delete adj.data.$color;
                delete adj.data.$lineWidth;
            }
        }
    });

    st.loadJSON(json);
    st.compute();

	//判断GET传入nodeid值是否包含在json内，默认是st.root根节点，http://ip/example.php?id=nodeid
	var var1tmp = false;
	for (var v1 in json.children){var1tmp = (json.children[v1].id === nodeid || var1tmp)?true:false;}
	if (var1tmp){ st.onClick(nodeid);}else{st.onClick(st.root);}//eval(st.root)  node11

	//根据节点深度，节点内容长度，子节点数量设置个性化节点样式。根据需要我只保留了高度和宽度。
	st.graph.eachNode(function(n) {
		var childCount = 0;
		for (var attr in n.adjacencies){childCount++;}

		if (n._depth == 1 && n.name.length >4){  
			n.setData('width',n.name.length * 8+20, 'end');
			n.setData('height', 48 , 'end');
		}else if(n._depth < 3 || childCount > 1){
			n.setData('width',n.name.length * 16+20, 'end');
			n.setData('height', 30 , 'end');
		}else{
			n.setData('height', n.name.length * 16 +20 , 'end');
		}
		
	});

	//个人理解，把样式参数改了半天，总得刷新一下嘛:-)
	st.fx.animate({
		modes: ['node-property:width:height'],
		duration: 400
	});
    //end

}

引用的jit-yc.js,下载地址jit官网

效果图

完整压缩包已经上传到CSDN https://download.csdn.net/download/yvhitxcel/10673950 （使用jit制作漂亮的组织机构图）

slry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于jit漂亮组织机构图

本来是html的，为了方便接收GET，改成了php，可能是史上最简单的PHP代码了。文件名example.php&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xml...
复制链接

扫一扫