树结构图

最新推荐文章于 2024-07-14 02:56:43 发布
最新推荐文章于 2024-07-14 02:56:43 发布
阅读量358 收藏
点赞数
分类专栏： 树 
<html>
<head>
	<title>树结构</title>
	<meta name="decorator" content="default"/>	
	<script src="${}/common/organization.js" type="text/javascript" ></script>
	
	<style type="text/css">
	body{text-align: center;}
	
	.OrgBox{
		font-size:12px;
		padding:5px 5px 5px 5px;
 		clear:left; 
 		float:left; 
		text-align:center;
		position:absolute;
		width:70px;
		height:50px;
		margin-left: auto;
		margin-right: auto;
		vertical-align:middle;
	}
	.OrgBox img{
		width:60px;
		height:70px;
	}
	.OrgBox div{
		color:#FFA500;
		font-weight:800;
	}
	</style>
	
	<script type="text/javascript">
		$(document).ready(function() {

		});

		function CookieGroup(){
// 			alert(123)	
		}


	  	
		
	</script>
</head>
<body>

<div>
<c:forEach items="${list31}" var="people" varStatus="tabId" begin="0">
	<input id="name3${tabId.count}" name="name3${tabId.count}" type="hidden" value="${people.name}"/>
	<input id="type3${tabId.count}" name="type3${tabId.count}" type="hidden" value="${fns:getDictLabel(people.positions, 'positions', '')}"/>
</c:forEach>

<c:forEach items="${list41}" var="people" varStatus="tabId" begin="0">
	<input id="name4${tabId.count}" name="name4${tabId.count}" type="hidden" value="${people.name}"/>
	<input id="type4${tabId.count}" name="type4${tabId.count}" type="hidden" value="${fns:getDictLabel(people.positions, 'positions', '')}"/>
</c:forEach>
</div>
<div id="center">

	<script language="javascript">
	
		var a=new OrgNode()
		a.customParam.EmpName=""
		a.customParam.department="树结构"

		var listSize = "${list0.size()}";
		var bb = Math.round(listSize/2)-1;

		// 人员
		if (listSize == '0') {
	 		var bb0=new OrgNode()
	 		bb0.customParam.EmpName="无"
	 		bb0.customParam.department=""
	 		
			a.Nodes.Add(bb0);
		}
		for(var i=0; i<listSize; i++){
			var count= i+1; 
			
			eval("var b_" + i + "=new OrgNode()");
			eval("b_"+i).customParam.EmpName=document.getElementById("name0" + count).value
			eval("b_"+i).customParam.department=document.getElementById("type0" + count).value
			
			
			a.Nodes.Add(eval("b_"+i));
		}

		// 组长3
		if("${list3.emerName}" != null && "${list3.emerName}" != ''){

	 		var c3=new OrgNode()
	 		c3.customParam.EmpName="${list3.getEmerName()}"
	 		c3.customParam.department="${fns:getDictLabel(list3.getPositions(), 'positions', '')}"

	 		if (bb == '-1') {
		 		bb0.Nodes.Add(c3);
	 		} else {
		 		eval("b_"+bb).Nodes.Add(c3);
	 		}
		} else if ("${list31.size()}" > 0) {
	 		var c3=new OrgNode()
	 		c3.customParam.EmpName="无"
	 		c3.customParam.department=""

	 		if (bb == '-1') {
		 		bb0.Nodes.Add(c3);
	 		} else {
		 		eval("b_"+bb).Nodes.Add(c3);
	 		}
		}
 		
 		// 组员3
		for(var i=0; i<"${list31.size()}"; i++){
			var count= i+1; 
			
			eval("var c3_" + i + "=new OrgNode()");
			eval("c3_"+i).customParam.EmpName=document.getElementById("name3" + count).value
			eval("c3_"+i).customParam.department=document.getElementById("type3" + count).value
			
			
			c3.Nodes.Add(eval("c3_"+i));
		}


		// 组长4
		if("${list4.emerName}" != null && "${list4.emerName}" != ''){

	 		var c4=new OrgNode()
	 		c4.customParam.EmpName="${list4.getEmerName()}"
	 		c4.customParam.department="${fns:getDictLabel(list4.getPositions(), 'positions', '')}"

	 		if (bb == '-1') {
		 		bb0.Nodes.Add(c4);
	 		} else {
		 		eval("b_"+bb).Nodes.Add(c4);
	 		}
		} else if ("${list41.size()}" > 0) {
	 		var c4=new OrgNode()
	 		c4.customParam.EmpName="无"
	 		c4.customParam.department=""

	 		if (bb == '-1') {
		 		bb0.Nodes.Add(c4);
	 		} else {
		 		eval("b_"+bb).Nodes.Add(c4);
	 		}
		}
 		
 		// 组员4
		for(var i=0; i<"${list41.size()}"; i++){
			var count= i+1; 
			
			eval("var c4_" + i + "=new OrgNode()");
			eval("c4_"+i).customParam.EmpName=document.getElementById("name4" + count).value
			eval("c4_"+i).customParam.department=document.getElementById("type4" + count).value
			
			
			c4.Nodes.Add(eval("c4_"+i));
		}
		
		var OrgShows=new OrgShow(a);
		OrgShows.Top=50;
		OrgShows.Left=100;
		OrgShows.IntervalWidth=10;
		OrgShows.IntervalHeight=20;
		OrgShows.ShowType=2;
		OrgShows.BoxHeight=10;
		OrgShows.BoxTemplet=
			"<div id=\"{Id}\" class=\"OrgBox\" οnclick=\"CookieGroup()\">" +
			"<span>{EmpName}</span><div>{department}</div>" + 
			"</div>"
		OrgShows.Run()
	</script>
</div>
</body>
</html>









organization.js




function $(id){return document.getElementById(id)}
function offset(node){
	var x = node.offsetLeft;
	var y = node.offsetTop;
	var w = node.offsetWidth;
	var h = node.offsetHeight;
	var parent = node.offsetParent;
	while (parent != null){
		x += parent.offsetLeft;
		y += parent.offsetTop;
		parent = parent.offsetParent;
	}
	if(w==0){
		w+=parseInt(node.currentStyle.width);
		w+=parseInt(node.currentStyle.paddingRight);
		w+=parseInt(node.currentStyle.paddingLeft);
		w+=parseInt(node.currentStyle.borderWidth) * 2;
	}
	if(h==0){
		h+=parseInt(node.currentStyle.height);
		h+=parseInt(node.currentStyle.paddingTop);
		h+=parseInt(node.currentStyle.paddingBottom);
		h+=parseInt(node.currentStyle.borderWidth) * 2;
	}
	return {x: x, y: y, w: w, h: h};
}
/*
 *@Generator -> Surnfu - Email:Surnfu@126.com - QQ:31333716 Ver:1.0.0
 *@Copyright (c) 2009 Surnfu composition  http://www.on-cn.com
 *使用示例
 *==============================================================================
var a=new OrgNode()
	a.Text="节点文本"
	a.Description="节点描述"
	a.Link="节点链接"
	//a.customParam.Img="xxx" //自定义节点参数，需要设置节点模板
var b=new OrgNode()
	b.Text="节点文本"
	b.Description="节点描述"
	b.Link="节点链接"
a.Nodes.Add(b);
var OrgShows=new OrgShow(a);
	OrgShows.Top=50;  //设置顶距离
	OrgShows.Left=50; //设置左距离
	OrgShows.IntervalWidth=10; //设置节点间隔宽度
	OrgShows.IntervalHeight=20; //设置节点间隔高度
	OrgShows.ShowType=2;  //设置节点展示方式  1横向  2竖向
	OrgShows.BoxHeight=100;  //设置节点默认高度
	//OrgShows.BoxWidth=100; //设置节点默认宽度
	//OrgShows.BoxTemplet="="<div id=\"{Id}\" style=\"font-size:12px;padding:5px 5px 5px 5px;border:thin solid orange;background-color:lightgrey; clear:left;float:left;text-align:center;position:absolute;\" title=\"{Description}\" ><a href=\"{Link}\">{Text}</a></div>";自定义节点模板
	OrgShows.LineSize=2;  //设置线条大小
	OrgShows.LineColor=2;  //设置线条颜色
	OrgShows.Run()
 *==============================================================================
 */
function OrgNode(){
	this.Text=null;
	this.Link=null;
	this.Description=null;
	this.BoxWidth=null;
	this.BoxHeight=null;
	this.parentNode=null;
	this.NodeGroupId=null; //同一层的级别序号,从零开始
	this.NodeOrderId=null; //同一级中的序号,从零开始
	this.TopLine=null;
	this.BottomLine=null;
	this.Depth=null;
	this.Top=null;
	this.Left=null;
	this.Type=null;
	this.Nodes=[];
	this.customParam=[]; //节点自定义参数
	var This=this;
	this.Nodes.Add=function(OrgNode_){
		OrgNode_.parentNode=This;
		This.Nodes[This.Nodes.length]=OrgNode_;
	}
	this.Box=null;
	this.Templet=null;
	this.Id="OrgNode_"+ GetRandomId(20);
	
	this.inIt= function(){
		if(this.inIted==true)return;
		var tempDiv=document.createElement("DIV");
		document.body.appendChild(tempDiv);
		var tempHTML=this.Templet;
		tempHTML=tempHTML.replace("{Id}", this.Id);
		tempHTML=tempHTML.replace("{Text}", this.Text);
		tempHTML=(this.Link==null)?tempHTML.replace("{Link}", "JavaScript:void(0)"):tempHTML.replace("{Link}", this.Link);
		tempHTML=tempHTML.replace("{Description}", this.Description);
		for(var Param_ in  this.customParam){
			tempHTML=tempHTML.replace("{"+ Param_ +"}", this.customParam[Param_]);
		}
		tempDiv.innerHTML=tempHTML;
		this.Box=$(this.Id);
		
		if(this.BoxWidth!=null){
			if(offset(this.Box).w < this.BoxWidth){
				this.Box.style.width=this.BoxWidth +"px";
				if(offset(this.Box).w > this.BoxWidth){
					this.Box.style.width=(this.BoxWidth - (offset(this.Box).w - this.BoxWidth)) +"px";
				}
			}
		}
		
		if(this.BoxHeight!=null){
			if(offset(this.Box).h < this.BoxHeight){
				this.Box.style.height=this.BoxHeight +"px";
				if(offset(this.Box).h > this.BoxHeight){
					this.Box.style.height=(this.BoxHeight - (offset(this.Box).h - this.BoxHeight)) +"px";
				}
			}
		}

		this.Width=offset(this.Box).w;
		this.Height=offset(this.Box).h;
		this.inIted=true;
	}

	function GetRandomId(n_){
		var litter="abcdefghijklmnopqrstuvwxyz"
		litter+=litter.toUpperCase()
		litter+="1234567890";
		var idRnd="";
		for(var i=1; i<=n_; i++){
			idRnd+=litter.substr((0 + Math.round(Math.random() * (litter.length - 0))), 1)
		}
        return idRnd;
	}
}


function OrgShow(OrgNode_){
	this.LineSize=2;
	this.LineColor="#000000";

	this.IntervalWidth=100;
	this.IntervalHeight=50;
	this.Top=0;
	this.Left=0;
	this.Depth=0;
	this.Nodes=[];
	this.DepthGroup=[]; //this.DepthGroup[n].Nodes 层深节点集合
	//this.DepthGroup[n].NodeGroups[m]  层深节点按上层分类集合 this.DepthGroup[n].NodeGroups[m][k]层深节点
	var This=this;
	this.BoxWidth=null;
	this.BoxHeight=null;
	this.BoxTemplet=null;
	this.ShowType=null;

	this.Run=function(){
		BoxInit(OrgNode_);
		GetDepth(OrgNode_);
		SetDepthsHeight()//设置层深高度
		
		//***************************
		for(var n=1; n<=this.Depth; n++){//设置顶距离
			var tempTop=this.Top + GetDepthHeightToRoot(n);
			var tempNodes=this.DepthGroup[n].Nodes;
			for(var m=0; m<tempNodes.length; m++){
				tempNodes[m].Top=tempTop;
			}
		}

		//***************************
		for(var n=this.Depth; n>=1; n--){//设置左距离
			var DepthNodes=this.DepthGroup[n].Nodes;
			if(n==this.Depth){
				for(var m=0; m<DepthNodes.length; m++){
					if(m==0){
						DepthNodes[m].Left=0;
					}else{
						DepthNodes[m].Left=DepthNodes[m-1].Left + DepthNodes[m-1].Width + this.IntervalWidth;
					}
				}
			}else{
				for(var m=0; m<DepthNodes.length; m++){//根据下级节点位置，确定节点位置
					if(DepthNodes[m].Nodes.length!=0){
						var tempNodeLeft_=DepthNodes[m].Nodes[0].Left + (GetGroupWidthByNode(DepthNodes[m].Nodes[0]) / 2);
						tempNodeLeft_-=(DepthNodes[m].Width / 2);
						DepthNodes[m].Left = tempNodeLeft_;
					}
				}
				for(var m=0; m<DepthNodes.length; m++){
					if(DepthNodes[m].Left==null){//没有下级节点的，
						SetLeftByDepthNode(DepthNodes, m, "LTR");
					}
				}
				
				for(var m=1; m<DepthNodes.length; m++){//修正错误位置
					var ErrDistance=this.IntervalWidth - (DepthNodes[m].Left - DepthNodes[m-1].Left - DepthNodes[m-1].Width);
					if(ErrDistance>0){
						for(var u_=m; u_<DepthNodes.length; u_++){
							AmendNodeLeft(DepthNodes[u_], ErrDistance);
						}
					}
				}
			}
		}
		SetDepthGroupWidth();//设置群组宽度

		var MaxLeftValue=this.Nodes[0].Left;
		for(var n=1; n<this.Nodes.length; n++){//取得最小左距离
			if(MaxLeftValue>this.Nodes[n].Left){
				MaxLeftValue=this.Nodes[n].Left;
			}
		}
		MaxLeftValue=(-MaxLeftValue) + this.Left;
		for(var n=0; n<this.Nodes.length; n++){//重新设置距离
			this.Nodes[n].Left+=MaxLeftValue;
			this.Nodes[n].Box.style.left=this.Nodes[n].Left + "px"
			this.Nodes[n].Box.style.top=this.Nodes[n].Top + "px"
		}
		
		
		//***************************
		for(var n=1; n<=this.Depth; n++){//设置竖线条
			var tempNodes=this.DepthGroup[n].Nodes;
			for(var m=0; m<tempNodes.length; m++){
				if(n!=this.Depth){//设置底线条
					if(tempNodes[m].Nodes.length!=0){
						var tempLineLeft=tempNodes[m].Left + (tempNodes[m].Width / 2);
						var tempLineHeight=((this.IntervalHeight - this.LineSize) / 2);
						tempLineHeight+=(this.DepthGroup[n].Height - tempNodes[m].Height);
						var tempLineTop=tempNodes[m].Top + tempNodes[m].Height;
						var tempBottomLine=new CreateLine(2, tempLineTop, tempLineLeft, tempLineHeight, this.LineSize, this.LineColor, "LineBottom_"+ tempNodes[m].Id);
						tempNodes[m].BottomLine=tempBottomLine.Line;
					}
				}
				if(n!=1){//设置顶线条
					var tempLineLeft=tempNodes[m].Left + (tempNodes[m].Width / 2);
					var tempLineHeight=((this.IntervalHeight - this.LineSize) / 2);
					var tempLineTop=tempNodes[m].Top - 	tempLineHeight;
					if(this.DepthGroup[tempNodes[m].Depth].NodeGroups[tempNodes[m].NodeGroupId].length==1){//如果只有一个节点
						var tempBottomLineHeight=parseFloat(tempNodes[m].parentNode.BottomLine.style.height) + this.LineSize;
						tempNodes[m].parentNode.BottomLine.style.height=(tempLineHeight + tempBottomLineHeight)+"px";
					}else{
						var temptopLine=new CreateLine(2, tempLineTop, tempLineLeft, tempLineHeight, this.LineSize, this.LineColor, "LineTop_"+ tempNodes[m].Id);
						tempNodes[m].TopLine=temptopLine.Line;
					}
				}
			}
		}
		
		for(var n=2; n<=this.Depth; n++){//设置横线条
			var tempNodeGroups_=this.DepthGroup[n].NodeGroups;
			for(var m=0; m<tempNodeGroups_.length; m++){
				if(tempNodeGroups_[m].length!=1){
					var tempLineWidth=tempNodeGroups_[m].Width - (tempNodeGroups_[m][0].Width / 2) + this.LineSize;
					tempLineWidth-=(tempNodeGroups_[m][tempNodeGroups_[m].length-1].Width / 2);
					var tempLineTop=tempNodeGroups_[m][0].Top - ((this.IntervalHeight - this.LineSize) / 2) - this.LineSize;
					var tempLineLeft=tempNodeGroups_[m][0].Left + (tempNodeGroups_[m][0].Width / 2);
					var tempGroupLine=new CreateLine(1, tempLineTop, tempLineLeft, tempLineWidth, this.LineSize, this.LineColor, "LineGroup_"+ tempNodeGroups_[m][0].Id);
				}
			}
		}
	
	//*************************************************************************************************
	
	function AmendNodeLeft(Node_, ErrDistance_){//修正错误位置
		Node_.Left=Node_.Left + ErrDistance_;
		if(Node_.Nodes.length!=0){
			for(var n=0; n<Node_.Nodes.length; n++){
				AmendNodeLeft(Node_.Nodes[n], ErrDistance_);
			}
		}
	}
	
	
	}
	function GetGroupWidthByNode(Node_){//根据群组中任一节点，取得群组宽度
		var tempNodesGroup_=This.DepthGroup[Node_.Depth].NodeGroups[Node_.NodeGroupId];
		var tempGroupWidth_=tempNodesGroup_[tempNodesGroup_.length-1].Left - tempNodesGroup_[0].Left;
		tempGroupWidth_+=tempNodesGroup_[tempNodesGroup_.length-1].Width
		return tempGroupWidth_;
	}
	
	
	function SetLeftByDepthNode(DepthNodes_, NodeId, Type){
		if(Type=="LTR"&&NodeId==DepthNodes_.length-1){
			SetLeftByDepthNode(DepthNodes_, NodeId, "RTL");
			return;
		}
		if(Type=="RTL"&&NodeId==0){
			SetLeftByDepthNode(DepthNodes_, NodeId, "LTR");
			return;
		}
		var FindIndex=null;
		if(Type=="LTR"){
			for(var r_=NodeId+1; r_<DepthNodes_.length; r_++){
				if(DepthNodes_[r_].Left!=null){
					FindIndex=r_;
					break;
				}
			}
			if(FindIndex==null){
				SetLeftByDepthNode(DepthNodes_, NodeId, "RTL");
				return;
			}else{
				for(var r_=FindIndex-1; r_>=NodeId; r_--){
					DepthNodes_[r_].Left=DepthNodes_[r_+1].Left - This.IntervalWidth - DepthNodes_[r_].Width;
				}
			}
		}
		if(Type=="RTL"){
			for(var r_=NodeId-1; r_>=0; r_--){
				if(DepthNodes_[r_].Left!=null){
					FindIndex=r_;
					break;
				}
			}
			if(FindIndex==null){
				SetLeftByDepthNode(DepthNodes_, NodeId, "LTR");
				return;
			}else{
				for(var r_=FindIndex+1; r_<=NodeId; r_++){
					DepthNodes_[r_].Left=DepthNodes_[r_-1].Left + This.IntervalWidth + DepthNodes_[r_-1].Width;
				}
			}
		}
	}
	
	
	
	
	
	
	
	function GetDepthHeightToRoot(DepthId){//取得距离顶层的高度
		var tempHeight_=0;
		for(var x_=DepthId; x_>=1; x_--){
			tempHeight_+=This.DepthGroup[x_].Height;
		}
		tempHeight_+=This.IntervalHeight * (DepthId - 1);
		tempHeight_-=This.DepthGroup[DepthId].Height;
		return tempHeight_;
	}
	
	
	function SetLeftPosByChildNode(Node_, ChildNode_){//根据下级节点位置设置节点位置
		var tempNodeGroups=This.DepthGroup[ChildNode_.Depth].NodeGroups[ChildNode_.NodeGroupId];
		var tempNodeLeft;
		if(tempNodeGroups.length==1){
			tempNodeLeft=((ChildNode_.Width / 2) + ChildNode_.Left) - (Node_.Width / 2);
		}else{
			tempNodeLeft=GetFirstLeftPos(ChildNode_) + (tempNodeGroups.Width / 2) - (Node_.Width / 2);
		}
		Node_.Left=tempNodeLeft;
	}
	
	function GetFirstLeftPos(Node_){//根据节点位置取得同一级中首个节点位置
		if(Node_.NodeOrderId==0){//Node_为首节点
			return Node_.Left;
		}
		var tempWidth=0;
		for(var k_=0; k_<=Node_.NodeOrderId; k_++){
			var tempGroupsNode=This.DepthGroup[Node_.Depth].NodeGroups[Node_.NodeGroupId][k_];
			tempWidth+=tempGroupsNode.Width;
		}
		tempWidth+=(Node_.NodeOrderId * This.IntervalWidth);
		return ((Node_.Left - tempWidth) + (Node_.Width / 2));
	}
	

	function ChildNodesWidth(OrgObj){//取得层宽
		var ReWidth=0;
		for(var s_=0; s_<OrgObj.Nodes.length; s_++){
			ReWidth+=OrgObj.Nodes[s_].Width;
		}
		ReWidth+=(OrgObj.Nodes.length-1) * This.IntervalWidth;
		return ReWidth;
	}
	
	function SetDepthGroupWidth(){//设置层深宽度
		for(var n_=1; n_<=This.Depth; n_++){
			var tempNodeGroups=This.DepthGroup[n_].NodeGroups;
			for(var m_=0; m_<tempNodeGroups.length; m_++){
				tempNodeGroups[m_].Width=GetGroupWidthByNode(tempNodeGroups[m_][0]);
			}
		}
	}
	
	
	function SetDepthsHeight(){//设置层深高度
		for(var n_=1; n_<=This.Depth; n_++){
			var tempNodes_=This.DepthGroup[n_].Nodes;
			var MaxHeight=0;
			for(var m_=0; m_<tempNodes_.length; m_++){
				if(tempNodes_[m_].Height>MaxHeight){
					MaxHeight=tempNodes_[m_].Height;
				}
			}
			This.DepthGroup[n_].Height=MaxHeight;
		}
	}

	function GetDepth(OrgObj){//取得层深,层群集
		This.Nodes[This.Nodes.length]=OrgObj;
		OrgObj.Depth=(This.Depth==0)?This.Depth+1:OrgObj.parentNode.Depth+1;
		This.Depth=(OrgObj.Depth>This.Depth)?OrgObj.Depth:This.Depth;
		if(typeof(This.DepthGroup[OrgObj.Depth])!="object"){
			This.DepthGroup[OrgObj.Depth]=[];
			This.DepthGroup[OrgObj.Depth].Nodes=[];
			This.DepthGroup[OrgObj.Depth].NodeGroups=[];
		}
		This.DepthGroup[OrgObj.Depth].Nodes[This.DepthGroup[OrgObj.Depth].Nodes.length]=OrgObj;
		if(OrgObj.Depth==1){
			This.DepthGroup[OrgObj.Depth].NodeGroups[0]=[];
			This.DepthGroup[OrgObj.Depth].NodeGroups[0][0]=OrgObj;
			OrgObj.NodeGroupId=0;
			OrgObj.NodeOrderId=0;
		}else{
			if(This.DepthGroup[OrgObj.Depth].NodeGroups.length==0){
				This.DepthGroup[OrgObj.Depth].NodeGroups[0]=[];
				This.DepthGroup[OrgObj.Depth].NodeGroups[0][0]=OrgObj;
				OrgObj.NodeGroupId=0;
				OrgObj.NodeOrderId=0;
			}else{
				var GroupsLength=This.DepthGroup[OrgObj.Depth].NodeGroups.length;
				var GroupNodesLength=This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength-1].length;
				if(OrgObj.parentNode==This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength-1][GroupNodesLength-1].parentNode){
					This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength-1][GroupNodesLength]=OrgObj;
					OrgObj.NodeGroupId=GroupsLength-1;
					OrgObj.NodeOrderId=GroupNodesLength;
				}else{
					if(typeof(This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength])!="object"){
						This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength]=[];
					}
					GroupNodesLength=This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength].length;
					This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength][GroupNodesLength]=OrgObj;
					OrgObj.NodeGroupId=GroupsLength;
					OrgObj.NodeOrderId=GroupNodesLength;
				}
			}
		}
		
		if(OrgObj.Nodes.length!=0){
			for(var n=0; n<OrgObj.Nodes.length; n++){
				GetDepth(OrgObj.Nodes[n]);
			}
		}
	}
	function BoxInit(OrgObj_){//节点初始化
		OrgObj_.Templet=GetBoxTemplet();
		OrgObj_.BoxWidth=This.BoxWidth;
		OrgObj_.BoxHeight=This.BoxHeight;
		OrgObj_.inIt();
	
		if(OrgObj_.Nodes.length!=0){
			for(var n=0; n<OrgObj_.Nodes.length; n++){
				BoxInit(OrgObj_.Nodes[n]);
			}
		}
	}

	function GetBoxTemplet(){//取得节点模板
		if(This.BoxTemplet!=null)return This.BoxTemplet;
		var TempletStr="<div id=\"{Id}\" style=\"font-size:12px;padding:5px 5px 5px 5px;border:thin solid orange;background-color:lightgrey; clear:left;float:left;text-align:center;position:absolute;"
		if(This.ShowType==2)TempletStr+="writing-mode: tb-rl;";
		TempletStr+="\" title=\"{Description}\" ><a href=\"{Link}\" target=\"_blank\">{Text}</a></div>";
		return TempletStr;
	}
	
	function CreateLine(type_, top_, left_, long_, size_, color_, id_){
		this.Type=type_;
		top_=top_+"";
		left_=left_+"";
		long_=long_+"";
		this.Top=(top_.substr(top_.length-2).toLowerCase()!="px")?top_+"px":top_;
		this.Left=(left_.substr(left_.length-2).toLowerCase()!="px")?left_+"px":left_;
		this.Long=(long_.substr(long_.length-2).toLowerCase()!="px")?long_+"px":long_;
		this.Size=(size_==undefined)?"1px":size_+"";
		this.Id=(id_==undefined)?null:id_;
		this.Size=(this.Size.substr(this.Size.length-2).toLowerCase()!="px")?this.Size+"px":this.Size;
		this.Color=(color_==undefined)?"#000000":color_;
		this.Line=document.createElement("DIV");
		document.body.appendChild(this.Line);
		this.Line.innerText="x";
		this.Line.style.position="absolute";
		this.Line.style.top=this.Top;
		this.Line.style.left=this.Left;
		this.Line.style.overflow="hidden";
		if(this.Type==1){
			this.Line.style.borderTopColor=this.Color;
			this.Line.style.borderTopWidth=this.Size;
			this.Line.style.borderTopStyle="solid";
			this.Line.style.width=this.Long;
			this.Line.style.height="0px";
		}else{
			this.Line.style.borderLeftColor=this.Color;
			this.Line.style.borderLeftWidth=this.Size;
			this.Line.style.borderLeftStyle="solid";
			this.Line.style.height=this.Long;
			this.Line.style.width="0px";
		}
		if(this.Id!=null)this.Line.id=this.Id;
	} 

}






                

        

        

    

  


    

      

        

            

              
                
                  青言
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
html如何绘制树结构图,HTML 5 Canvas 递归画树

				
			

			

				

					weixin_35859336的博客
				

				

					06-15
					
					2288
					
				

			

		

		

			
				
上图就是用html5随机生成的大树 : ) 但是你应该没想到40+行代码就可以搞定了吧~接下来就跟大家说说这棵大树是如何实现的。同样必须要有html容器。新建Index.html，代码如下:canvastree接下来咱们开始tree.js:varcanvas=document.createElement("canvas");varctx=canvas.getContext("2d");canva...

			
		

	



                

              
                



	

		

			

				
					
html dom树的结构图,什么是DOM对象?DOM树形结构介绍

				
			

			

				

					weixin_39924329的博客
				

				

					06-18
					
					1810
					
				

			

		

		

			
				
JavaScript中，经常需要操作DOM。所谓DOM指的是文档对象模型(Document Object Model)。它提供了对文档结构化的描述，并将HTML页面与脚本、程序语言联系起来。为了大家更好地理解，下面演示-段HTML代码以及其对应的DOM树形结构图，如下所示。测试标题<1i>链接1i>上述代码中，层层嵌套的HTML标签就是一个类似树形的DOM文档。其中，最外面的一层...

			
		

	



                


  
              

                


	

		

			

				
					
js实现的组织结构图

				
			

			

				

					03-04
				

			

		

		

			
				
js动态实现的组织架构图型显示，可是参考了以前好多的例子才弄出来。

			
		

	





	

		

			

				
					
JS生成的组织结构图

				
			

			

				

					剑胆琴心-.Net 学习笔记
				

				

					04-07
					
					4021
					
				

			

		

		

			
				
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">JS版组织结构图.OrgBox{ font-size:12px; padding:5px 5px 5px 5px; clear:left; float:left; text-align:center; position:abs

			
		

	



		

			
		



	

		

			

				
					
Js组织架构图

				
			

			

				

					05-25
				

			

		

		

			
				
使用go.js创建组织架构图，里面有做好的demo，有兴趣的可以看看

			
		

	





	

		

			

				
					
D3.js + Canvas 绘制组织结构图

				
			

			

				

					weixin_33898233的博客
				

				

					06-01
					
					1625
					
				

			

		

		

			
				
使用 D3.js 默认的 svg 渲染
D3默认的树状图画图使用的是svg, 比如这个来自D3作者的例子:
https://bl.ocks.org/mbostock/4339083
使用svg有好有坏:

好处是方便操作dom元素, 添加用户交互
坏处是渲染效率不高, 在数据量较大时页面易掉帧, 卡顿

在大多数数据量不是特别大情况下, 使用svg的好处是远远盖过坏处的,但如果我们真的需要渲染大量...

			
		

	





	

		

			

				
					
数据结构学习笔记——使用draw.io绘制的树结构图

				
			

			

				

					04-29
				

			

		

		

			
				
树结构 draw.io图 二叉树、顺序树、树的链式存储结构、树的数组存储结构、欧拉树 绘图软件为免费开源软件draw.io

			
		

	





	

		

			

				
					
canvas绘制树形结构可视图形的实现

				
			

			

				

					12-28
				

			

		

		

			
				
如下图，最近项目中需要这么个树形结构可视化数据图形，找了好多可视化插件，没有找到可用的，所以就自己画了一个，代码如下。  树形分支是后端接口返回数据渲染，可展示多条；  代码可拓展，可封装；  点击节点可...

			
		

	





	

		

			

				
					
数据结构实验-构造图的最小生成树

				
			

			

				

					10-26
				

			

		

		

			
				
一、问题描述 运用Prim算法或Kruskal算法构造图的最小生成树。 输入格式（无向图的邻接矩阵）： 8 10, 0 5, 6, 0 ...1、构造图的存储结构。 2、实现Prim算法或Kruskal算法，求出给定无向图的最小生成树。

			
		

	





	

		

			

				
					
JavaScript  员工组织结构图 代码版  很漂亮 创意的 分享一下

				
			

			

				

					03-19
				

			

		

		

			
				
JavaScript  员工组织结构图 代码版  很漂亮 创意的 分享一下
JavaScript 员工组织结构图代码版，自动生成的结构图，很牛的功能吧，研究Js的兄弟姐妹来看看，共同提高。目前只做了一种展示方式，如果有兴趣，等我再更新。功能：支持自定义节点样式，无限级节点支持，节点间宽度高度间隔自定义，颜色线条大小自定义……

			
		

	





	

		

			

				
					
组织架构图JS源码

				
			

			

				

					10-22
				

			

		

		

			
				
组织架构图 人员汇报关系图 JS getorgchart 丰富的组织架构层次展示效果。

			
		

	





	

		

			

				
					
多个经典的js版的组织结构图

				
			

			

				

					09-10
				

			

		

		

			
				
多个经典的js版的组织结构图多个经典的js版的组织结构图多个经典的js版的组织结构图多个经典的js版的组织结构图

			
		

	





	

		

			

				
					
JS画组织结构图JS画组织结构图

				
			

			

				

					12-02
				

			

		

		

			
				
JS画组织结构图JS画组织结构图JS画组织结构图

			
		

	





	

		

			

				
					
JS组织结构图大整合

				
			

			

				

					08-09
				

			

		

		

			
				
包含现CSDN上所有的JS组织结构图
以及大部分网上的JS组织结构图

			
		

	





	

		

			

				
					
js实现组织结构图

					
热门推荐

				
			

			

				

					杏子
				

				

					02-15
					
					1万+
					
				

			

		

		

			
				
一、前言



这种组织结构图是不是很熟悉？一般是以画图的形式或者word形式展现，下面给大家介绍一下如何用原生 JS 实现，以便于可以显示在网页上。

二、整理思路（实现步骤）

1. 要想实现这种复杂的组织结构图，首先需要整理具有逻辑性的数据结构，如下所示：


var depArr = [
    {departmentname: 'CEO', subcompanyid1: '2', su...

			
		

	





	

		

			

				
					
用 js 实现组织结构图

				
			

			

				

					微笑的黄捷
				

				

					04-19
					
					9038
					
				

			

		

		

			
				
js组织关系由数组体现出来在 body onload 事件中初使化数组，取得组织关系图的层次和下及关系中节点最多的层次中节点数，用以取得水平线的最大宽度以下为 htm 原码组织结构图 .dvItem {   position:absolute;   width:24px;   border:1px solid #999999;   font-size:12px;   padding:5px;   

			
		

	





	

		

			

				
					
js组织架构图

				
			

			

				

					zhh123sy001的专栏
				

				

					11-29
					
					4577
					
				

			

		

		

			
				
用jquery和html实现的组织架构图

			
		

	





	

		

			

				
					
javascript 组织架构图 生成

					
最新发布

				
			

			

				

					weixin_33930436的博客
				

				

					07-14
					
					93
					
				

			

		

		

			
				
JavaScript 组织架构图生成
在开发大型应用程序时，设计良好的组织架构图对于团队协作和代码维护非常重要。JavaScript作为一种灵活且强大的编程语言，也需要一个清晰的组织架构图来帮助开发人员更好地理解和管理代码。本文将介绍如何使用mermaid语法来生成JavaScript组织架构图，并结合代码示例来说明。
什...

			
		

	





	

		

			

				
					
spsspro导出决策树结构图

				
			

			

				

					08-25
				

			

		

		

			
				
您可以使用SPSS的Modeler流程来导出决策树结构图。以下是一些步骤：  1. 打开SPSS Modeler软件并创建一个新的流程。 2. 在流程中添加一个"Decision Tree"节点。您可以在"Modeling"菜单下找到它。 3. 连接数据源到...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值