(原創) 工作流程圖的樹形展示-使用qunee外掛實現

阿新 • • 發佈：2019-01-17

var test = {  
    "children": [{  
        "children": [{  
            "children": null,  
            "codeDescription": "2級節點",  
            "nodeLevel": 2,  
            "nodeName": "test1_1",  
            "nodeOrder": 0  
        }],  
        "codeDescription": "1級節點",  
        "nodeLevel": 1,  
        "nodeName": "test1",  
        "nodeOrder": 0  
    }],  
    "codeDescription": "根節點",  
    "nodeLevel": 0,  
    "nodeName": "test0",  
    "nodeOrder": 0  
}

完整的html程式碼，每一部分都有較詳細的註釋。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Qunee Treelayout Demo 20160801 update</title>
<!--引入qunee外掛的js檔案-->
<script src="./qunee-min.js"></script>
<!--引入json資料 -->
<script src="./dataserver1.js"></script>


</head>
<body>
	<div id="root_box"
		style="width: 1000px; height: 600px; margin: auto; border: solid 1px #2898E0;"></div>

	<!-- <script type="text/javascript" src="work-process.js"></script> -->
	<script type="text/javascript">
		//指定一個div元素，初始化qunee畫布
		var graph = new Q.Graph("root_box");
		//graph.originAtCenter為false時表示設定左上角為座標原點
		graph.originAtCenter = false;
		
		//建立一個數組存放所有的子孫節點
		var allChildren = [];
		
		//用來記錄最大層級
		var maxLevel = 1;
		
		//遞迴函式，將傳入的資料建立成樹形圖的節點
		function loadDatas(json, parent, layoutType) {
			json.forEach(function(data) {
				//獲取最深的層級
				if (data.nodeLevel > maxLevel) {
					maxLevel = data.nodeLevel;
				}
				
				var node = createNode(data.nodeName, parent, layoutType);
				allChildren.push(node);

				if (layoutType == Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL) {
					node.vGap = 20; //設定孩子佈局的垂直間距,hGap為水平間距
				}
				
				//遞迴建立所有節點
				if (data.children) {
					loadDatas(data.children, node, Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL);
				}
			});
		}
		
		//傳入根節點(根節點屬性中包含了所有子孫節點),生成樹形圖
		function init(rootNode) {
			//建立一個數組用於存放主流程節點
			var nodeL1Arr = [];

			//在本demo中，rootNode根節點不展示，根節點下的第一級節點作為主流程節點
			if (rootNode.children) {
				rootNode.children.forEach(function(nodeL1) {
					var newNode = createStep(nodeL1.nodeName);
					nodeL1Arr.push(newNode);
					if (nodeL1.children) {
						loadDatas(nodeL1.children, newNode, Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL);
					}
				});
			} else {
				var newNode = createNode("沒有流程資訊");
			}
			//設定樹形圖佈局
			setLayout(nodeL1Arr);
		}

		//建立單個流程節點
		function createNode(name, from, layoutType) {
			var node = graph.createText(name);
			node.setStyle(Q.Styles.LABEL_BORDER, 1);
			node.setStyle(Q.Styles.LABEL_BORDER_STYLE, "#1D4876");
			node.setStyle(Q.Styles.LABEL_FONT_SIZE, 16);
			node.setStyle(Q.Styles.LABEL_PADDING, 5);
			node.setStyle(Q.Styles.LABEL_SIZE, new Q.Size(70, 35));
			node.setStyle(Q.Styles.LABEL_BACKGROUND_COLOR, "#FFF");
			//節點是否可見
			node.visible = true;
			//節點是否能用滑鼠拖動,false為不能拖動
			node.movable = false
			node.layoutType = layoutType;
			
			if (from) {
				node.parent = from;
				node.host = from;
			}
			
			if (from instanceof Q.Node) {
				//建立連線
				var nodeEdge = graph.createEdge(from, node);
				if (from.layoutType == Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL) {
					nodeEdge.edgeType = Q.Consts.EDGE_TYPE_VERTICAL_HORIZONTAL;
				} else {
					nodeEdge.edgeType = Q.Consts.EDGE_TYPE_ORTHOGONAL;
				}
			}
			return node;
		}

		//建立主流程節點
		function createStep(label) {
			var node = graph.createText(label);
			node.setStyle(Q.Styles.LABEL_BORDER, 1);
			node.setStyle(Q.Styles.LABEL_BACKGROUND_COLOR, "#FFF");
			node.setStyle(Q.Styles.LABEL_BORDER_STYLE, "#1D4876");
			node.setStyle(Q.Styles.LABEL_FONT_SIZE, 20);
			node.setStyle(Q.Styles.LABEL_SIZE, new Q.Size(120, 50));
			node.visible = true;
			//節點是否能用滑鼠拖動,false為不能拖動
			node.movable = false
			node.layoutType = Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL;
			//node.vGap = 30;//設定孩子佈局的垂直間距,hGap為水平間距

			return node;
		}

		//建立連線
		function createEdge(from, to, lineWidth, dash) {
			var edge = graph.createEdge(from, to);
			edge.setStyle(Q.Styles.EDGE_WIDTH, lineWidth || 3);
			edge.setStyle(Q.Styles.EDGE_COLOR, "#1D4876");
			if (dash) {
				edge.setStyle(Q.Styles.EDGE_LINE_DASH, [ 10, 10 ]);
			}
			return edge;
		}

		//調整樹狀圖各分支的位置，形成美觀的對稱結構
		function moveNodes() {
			var rightBound = 0; //節點右邊界
			var rightX = 0 //用於記錄最右側節點的橫座標
			var rightElementName; //邊界節點的名稱
			var prevElement; //前一主流程
			var dx = 20 * maxLevel; //移動基數20乘以獲取的最大層級
			graph.graphModel.forEachByTopoBreadthFirstSearch(function(element) {
				if (element instanceof Q.Node) {
					//每次移動，整個父子節點鏈的線條都會移動
					graph.moveElements([ element ], dx, 0);
					
					if (!element.parent) {
						//如果節點橫座標小於上一節點的右邊界，則移動節點，避免重合
						if (element.x < rightBound) {
							graph.moveElements([ element ], rightBound - element.x, 0);
						}

						//如果主流程沒有子流程，需要單獨移動固定距離dx，否則連線會非常短
						if (prevElement && !prevElement.hasChildren()) {
							graph.moveElements([ element ], dx, 0);
						}
						prevElement = element;
					}

					if (element.x >= rightX) {
						//更新最右側節點橫座標的值
						rightX = element.x;
						
						//rightX為最右側節點的橫座標，加上該節點邊框的寬度，得到最右側邊界的位置
						rightBound = rightX + graph.getUIBounds(element).width;
						
						//獲取最右側節點的名稱，用於列印測試
						rightElementName = element.name;
					}
				}
			});
		}

		graph.visibleFilter = function(node) {
			return node.visible !== false;
		}

		var nodeClicked;
		// 設定點選事件
		graph.onclick = function(evt) {
			nodeClicked = evt.getData();

			if (!nodeClicked) {
				Q.forEach(allChildren, function(p) {
					p.visible = true;
					p.invalidateVisibility();
				})
				graph.invalidate();
				return;
			}

			//點選主流程節點，只顯示子孫節點，隱藏其他節點
			/* if (!nodeClicked.parent && !nodeClicked.from) {
				Q.log(nodeClicked);
				Q.forEach(allChildren, function(p) {
					var visible = p.isDescendantOf(nodeClicked);
					p.visible = visible;
					p.invalidateVisibility();
				})
				graph.invalidate();
			} */
			
			//點選主流程節點，顯示或隱藏其子孫節點
			if (!nodeClicked.parent && !nodeClicked.from&&nodeClicked.hasChildren()) {
				setAllChildren(nodeClicked);
				graph.invalidate();
			} 
		}
		
		//顯示或隱藏子孫節點的函式
		function setAllChildren(parent){
			Q.forEach(parent.children, function(p) {
				p.visible = !p.visible;
				p.invalidateVisibility();
				if(p.hasChildren()){
					setAllChildren(p);
				}
			})
		}
		
		//設定樹形圖佈局
		var layouter = new Q.TreeLayouter(graph);
		function setLayout(nodeL1Arr) {
			layouter.layoutType = Q.Consts.LAYOUT_TYPE_EVEN_HORIZONTAL;
			//qunee新特性，節點連線能夠等長排列
			layouter.parentChildrenDirection = Q.Consts.DIRECTION_BOTTOM_RIGHT;
			layouter.doLayout({
				callback : function() {
					//graph.moveToCenter(1);
					graph.zoomToOverview();
					moveNodes();
					if (nodeL1Arr.length > 0) {
						var index = 0
						nodeL1Arr.forEach(function(obj) {
							if (index > 0) {
								createEdge(nodeL1Arr[index - 1], obj);
							}
							index++;
						});
					}
				}
			});
		}
		init(test);
	</script>
</body>
</html>

(原創) 工作流程圖的樹形展示-使用qunee外掛實現

var test = { "children": [{ "children": [{ "children": null, "codeDescription": "2級節點", "nodeLeve

Easy-的樹形外掛實現許可權選中效果

最近需要一個實現一個許可權設定，如果通過手工的設定一個一個輸入的話，弄不好要瘋掉，所以就來一個程式圖形化的展示資料然後選中。至於樹形結構的話選擇有很多，本著以前使用過Easy-UI的情況下，就決定用Easy-UI 的樹形結構實現了

zTree樹外掛實現點選左側樹，右側展示文章列表頁面實現思路

筆者新建了一個QQ群：571278542 。歡迎大家加入！上一篇文章中說了zTree樹外掛編寫過程。接來下，談談zTree樹外掛實現點選左側樹，右側展示文章列表頁面過程。效果展示 2.這裡就說說思路。 channel.jsp

WordPress外掛實現圖片縮圖幻燈展示效果

在使用WordPress製作企業網站的過程中，經常會因為要展示某個產品的細節效果圖，而需要在產品詳細頁中插入多張圖片。但是如果單純的把圖片一張張從上往下插入的話，對於使用者的閱讀體驗而言可能會大打折扣。好在WordPress有很多功能外掛，可以幫助我們很輕鬆的實現多樣化的

js基本樹形外掛實現

var Mock = [ {element:'輪播',id:'2',pid:'1'}, {element:'輪播小圖',id:'3',pid:'2'}, {element:'首頁',id:'1',pid:'0'},

【BBS】BBS論壇項目各個頁面的工作流程圖

結構 bsp logs ron img ima cnblogs 新增項目 1論壇整體結構 2數據庫結構 3登錄頁面 4論壇首頁（顯示各個板塊） 5顯示板塊對應的內容 6文章內容頁 7新增板塊、發表文章、回復 8版面管理、用戶管理、發帖排行【BBS】BB

Git版本庫工作流程圖想

mas ima 更新基本方式再次 ace image 技術對照廖雪峰的教程，發現有很多難以理解的地方，畫了一個圖想方便以後參考首先兩個基本命令反應了版本庫最本質的工作流程，後面的命令其實都基於此git add 把文件修改添加到暫存區git commit 在原版本的

Jquery EasyUI Tree樹形結構的Java實現（實體轉換VO）

優勢 con control 項目 util turn ttr real org 前一陣做的OA項目，有一個是組織架構的樹，因為是分開做的，我做的是Controller和頁面，其他組做的Service和Dao，因為之前一直沒有商量頁面用什麽框架做比較好，導致，Dao層取出來

easyui中的下拉菜單是樹形結構時如何實現onchange方法

問題 input style 出現發現 class 如果 box ble 今天碰到一個問題就是我寫的代碼中的一個下拉列表顯示的是樹型菜單，代碼如下（使用的是easyui）： .... <tr> <td>地區：</td>

TCP/UDP工作流程圖

tro 流程圖必須 eight ron lan 流程 src http 說到socket必須要貼的圖： TCP工作流程： UDP工作流程： TCP/UDP工作流程圖

webpack的DefinePlugin外掛實現多環境下配置切換

webpack的DefinePlugin外掛實現多環境下配置切換文章目錄前言例項專案實戰前言在使用springboot開發後臺時，可以使用spring.profies.active實現應用程式在不同的環境可能會有不同

利用js-xlsx.js外掛實現Excel檔案匯入並解析Excel資料成json資料格式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

使用pagination分頁外掛實現ajax分頁

1.html頁面引入jq和js外掛 <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <s

原創 Memcache分組和同步機制的實現

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

微信小程式開發——使用wxParse外掛實現html程式碼的支援

前言：大家都知道，無論是微信小程式還是支付寶小程式都不支援html程式碼的展示的，甚至說你想貼個純html程式碼做demo都不方便，更不用說解析html了。那麼怎麼解決這個問題呢？解決方案：使用WxParse外掛（微信小程式富文字解析元件）就能解決這個問題。本來這個外掛是專為微信小程式設計的，但是

基於ASP.NET的高校輔導員工作管理系統的設計與實現--論文隨筆（四）

一、基本資訊標題:基於ASP.NET的高校輔導員工作管理系統的設計與實現時間：2017 出版源：南通理工學院關鍵詞：ASP.NET; SQL Server; 高校; 管理系統; 輔導員; 二、研究背景問題定義：高校學生數量越來越多，學生資訊也越來越龐大，在輔導員的日常工作中，所使用的傳統的電子表

使用OpenOffice外掛實現RTF/WORD轉PDF轉多張圖片或者一張圖片

這裡我們使用的是OpenOffice外掛，需要安裝，還有相關的jar包網盤地址： https://pan.baidu.com/s/1c6HymABx3wre-d19eB1c-w 密碼： n1cd 安裝OpenOffice完成後 W

工作中常用的vscode外掛

最近折騰著換編輯器，找到一些好東西，分享給大家。 Auto Close Tag自動補全關閉標籤安裝即可用，你敲html標籤，它能自動幫你補全。 Auto Rename Tag自動重新命名標籤在你更改標籤名的時候，它會幫你把對應的關閉標籤頁進行同樣的更改。

如何利用迅捷畫圖繪制工作流程圖

了解 RoCE oss ESS ado ron 51cto 展開還要迅捷畫圖可以繪制流程圖，思維導圖並且能制作的很精美出來，那怎樣利用迅捷畫圖繪制工作流程圖呢？下面是小編輯總結的操作方法，可以參考步驟進行操作使用。　　工具：　　電腦，瀏覽器，迅捷畫圖　　操作方法介紹

如何利用迅捷畫圖繪製工作流程圖

　　迅捷畫圖可以繪製流程圖，思維導圖並且能製作的很精美出來，那怎樣利用迅捷畫圖繪製工作流程圖呢？下面是小編輯總結的操作方法，可以參考步驟進行操作使用。　　工具：　　電腦，瀏覽器，迅捷畫圖　　操作方法介紹：　　1.利用軟體繪製工作流程圖，為了使製作的流程圖更加精美更加快速可以對其進行大致的瞭解，在頁面中

(原創) 工作流程圖的樹形展示-使用qunee外掛實現

相關推薦