jquery.orgchart.js

最新推荐文章于 2025-06-14 16:47:15 发布

原创最新推荐文章于 2025-06-14 16:47:15 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascipt #orgchart

Javascript 专栏收录该内容

35 篇文章

订阅专栏

本文探讨了Geovindu公司的组织结构，使用JSON数据展示了层级关系，重点在于展示如何用 OrgChart 描绘汽车、船只等业务部门。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>geovindu,Geovin Du,涂聚文</title>
 <link rel="stylesheet" href="css/jquery.orgchart.css">	
	 <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	var lines = 
   ('1, cars, geovindu0, 0\n' +
    '2, boats, geovindu0, 1\n' +
    '3, oldtimer, geovindu11, 1\n' +
    '4, trucks, geovindu11, 3\n' +
    '5, heavytrucks, geovindu444, 4').split('\n');   //.split('\n')//根只有一个记录 涂聚文注释

var treeDu = [];
var lookup = {}; // temporary variable

for (var i in lines) {
    var items = lines[i].split(', ');

    var obj = { id: items[0], parent_id: items[3], name: items[1], title:items[2], children: [] };
    lookup[obj.id] = obj;

    if (lookup[obj.parent_id]) {
        lookup[obj.parent_id].children.push(obj);
    } else {
        treeDu.push(obj);
    }
}

console.log(treeDu); // will display your tree
	var dd=JSON.stringify(treeDu);
	console.log(dd);
 $('#du').text(dd);	
	
	var x = { name: "Sivaraman", age: 31, city: "Chennai" };
var y = JSON.stringify(x);
document.getElementById("demo").value=y;
	</script>
</head>

<body>
	<div id="demo"></div>
	<div id="du"></div>
<div id="chart-container"></div>

  <script type="text/javascript" src="js/jquery.orgchart.js"></script>	
	<script type="text/javascript">
	(function($) {
  $(function() {
	  var lines = 
   ('1, cars, geovindu, 0\n' +
    '2, boats, geovindu, 1\n' +
    '3, oldtimer, geovindu, 1\n' +
    '4, trucks, geovindu, 3\n' +
    '5, heavytrucks, geovindu, 4').split('\n');   //.split('\n')

var tree = [];
var lookup = {}; // temporary variable

for (var i in lines) {
    var items = lines[i].split(', ');

    var obj = { id: items[0], parent_id: items[3], name: items[1], title:items[2], children: [] };
    lookup[obj.id] = obj;

    if (lookup[obj.parent_id]) {
        lookup[obj.parent_id].children.push(obj);
    } else {
        tree.push(obj);
    }
}

//console.log(tree); // will display your tree
var dds=JSON.stringify(tree);	 
var str1 = dds.substr(1); //删除首字符
var str2 = str1.substring(0,str1.length-1); //删除最后末字符	  
console.log(str2);	
var contact = JSON.parse(str2);	  
	  /*
	  data【json or String】：数据
pan 【boolean 默:flase】：通过鼠标拖放来控制OrgChart
zoom【boolean 默:false】：通过鼠标滚轮放大或缩放OrgChart
zoominLimit【number 默:7】：设置放大限制
zoomoutLimit【number 默:0.5】：设置缩放限制
direction【String 默:t2b】：T2B："从上到下"，B2T："从底到上"，L2R："左到右"，R2L："向左到右"
verticalLevel【integer(>=2)】：
toggleSiblingsResp【boolean 默:false】：通过单击左/右箭头分别显示/隐藏左/右兄弟节点
ajaxURL【json】：不同的优先级提供了发送不同节点的Ajax请求的URL
visibleLevel【number】：默认展开几级
nodeId【String 默:id】：将数据源的一个属性设置为每个OrgChart节点的唯一标识符。
nodeTitle【String 默:name】：将数据源的一个属性设置为OrgChart节点标题段的文本内容
nodeContent【String】：将数据源的一个属性设置为OrgChart节点的内容部分的文本内容。
nodeTemplate【function】：它是一个模板生成函数，用于定制任何复杂的节点内部结构
createNode【function】：它是用于自定义每个OrgCad节点的回调函数
parentNodeSymbol【String 默:fa-users】：使用图标暗示该节点有子节点
exportButton【boolean 默:false】：是否启用OrgChar的导出按钮
exportFilename【String 默:OrgChart】：当输出当前的OrgChart作为图片时，它是文件名。
exportFileextension【String 默:png】：可用的值是PNG和PDF。
chartClass【String】：当你想在一个页面上实例化多个orgcharts 时，你应该添加不同的类名来区分它们。
draggable【boolean 默:false】：用户可以拖动和删除OrgChart节点
dropCriteria【function】：用户可以构造自己的标准来限制拖动节点和删除区域之间的关系
initCompleted【function】：经常知道您的表何时已经完全初始化、数据加载和呈现，尤其是当使用Ajax数据源时
	  */
    var oc = $('#chart-container').orgchart({
      'data' : contact,
      'depth': 12,
		'nodeId':'id',
		//'nodeTitle':'photo',
      'nodeContent': 'title',
		drag: true,//是否可以拖动
	   //'direction': 'b2t',
		//'direction': 'r2l',
		//'toggleSiblingsResp': true,
		'exportButton': true,
        'exportFilename': 'DuOrgChart',
	   'pan': true,
      'zoom': true
    });

  });
})(jQuery);
	
	</script>
	
</body>
</html>