工作流程图的树形展示使用qunee插件实现

1、（原创）工作流程图的树形展示-使用qunee插件实现这里只介绍如何用qunee来实现树形图。和WorkFlowDemo中的流程图结构如下（局部放大）：流程图结构如下（完整）：节点数据是json格式，举例如下：vartest=children:children:children:null,codeDescription:2级节点,nodeLevel:2,nodeName:test1_1,nodeOrder:0,codeDescription:1级节点,nodeLevel:1,nodeName:test1,nodeOrder:0,codeDescription:根节点,nodeLevel:0,no

2、deName:test0,nodeOrder:0完整的html代码，每一部分都有较详细的注释。vmetacharset=utf-8/QuneeTreelayoutDemo20160801update!-指定一个div元素，初始化qunee画布vargraph=newQ.Graph（root_box）;vargraph=newQ.Graph(root_box);/graph.originAtCenter为false时表示设置左上角为坐标原点graph.originAtCenter=false;创建一个数组存放所有的子孙节点varallChildren=;用来记录最大层级varmaxLevel=1

3、;递归函数，将传入的数据创建成树形图的节点functionloadDatas(json,parent,layoutType)json.forEach(function(data)获取最深的层级if(data.nodeLevelmaxLevel)maxLevel=data.nodeLevel;varnode=createNode(data.nodeName,parent,layoutType);allChildren.push(node);if(layoutType=Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL)node.vGap=20;设置孩子布局的垂直间距,hGap为

4、水平间距递归创建所有节点if(data.children)loadDatas(data.children,node,Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL););传入根节点(根节点属性中包含了所有子孙节点)，生成树形图functioninit(rootNode)/建立一个数组用于存放主流程节点varnodeL1Arr=;/在本demo中，rootNode根节点不展示，根节点下的第一级节点作为主流程节点if(rootNode.children)rootNode.children.forEach(function(nodeL1)varnewNode=createSte

5、p(nodeL1.nodeName);nodeL1Arr.push(newNode);if(nodeL1.children)loadDatas(nodeL1.children,newNode,Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL););elsevarnewNode=createNode(没有流程信息,，)；设置树形图布局setLayout(nodeL1Arr);创建单个流程节点functioncreateNode(name,from,layoutType)varnode=graph.createText(name);node.setStyle(Q.Styles.

6、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,newQ.Size(70,35);node.setStyle(Q.Styles.LABEL_BACKGROUND_COLOR,#FFF);节点是否可见node.visible=true;节点是否能用鼠标拖动false为不能拖动nod

7、e.movable=falsenode.movable=falsenode.1ayoutType=layoutType;if(from)node.parent=from;node.host=from;if(frominstanceofQ.Node)创建连线varnodeEdge=graph.createEdge(from,node);if(from.layoutType=Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL)nodeEdge.edgeType=Q.Consts.EDGE_TYPE_VERTICAL_HORIZONTAL;elsenodeEdge.edgeType

8、=Q.Consts.EDGE_TYPE_ORTHOGONAL;returnnode;创建主流程节点functioncreateStep(label)varnode=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.setS

9、tyle(Q.Styles.LABEL_SIZE,newQ.Size(120,50);node.visible=true;/节点是否能用鼠标拖动,false为不能拖动node.movable=falsenode.layoutType=Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL;/node.vGap=30;/设置孩子布局的垂直间距,hGap为水平间距returnnode;创建连线functioncreateEdge(from,to,lineWidth,dash)varedge=graph.createEdge(from,to);edge.setStyle(Q.Style

10、s.EDGE_WIDTH,lineWidth|3);edge.setStyle(Q.Styles.EDGE_COLOR,#1D4876);if(dash)edge.setStyle(Q.Styles.EDGE_LINE_DASH,10,10);returnedge;调整树状图各分支的位置，形成美观的对称结构functionmoveNodes()varrightBound=0;/节点右边界varrightX=0/用于记录最右侧节点的横坐标varrightElementName;/边界节点的名称varprevElement;/前主流程vardx=20*maxLevel;/移动基数20乘以获取的最大

11、层级graph.graphModel.forEachByTopoBreadthFirstSearch(function(element)if(elementinstanceofQ.Node)每次移动，整个父子节点链的线条都会移动graph.moveElements(element,dx,0);if(!element.parent)如果节点横坐标小于上一节点的右边界，则移动节点，避免重合if(element.x=rightX)更新最右侧节点横坐标的值rightX=element.x;/rightX为最右侧节点的横坐标，加上该节点边框的宽度，得到最右侧边界的位置rightBound=rightX+

12、graph.getUIBounds(element).width;获取最右侧节点的名称，用于打印测试rightElementName=;);graph.visibleFilter=function(node)returnnode.visible!=false;varnodeClicked;/设置点击事件graph.onclick=function(evt)nodeClicked=evt.getData();if(!nodeClicked)Q.forEach(allChildren,function(p)p.visible=true;p.invalidateVisibility();)graph

13、.invalidate();return;点击主流程节点，只显示子孙节点，隐藏其他节点/*if(!nodeClicked.parent&!nodeClicked.from)Q.log(nodeClicked);Q.forEach(allChildren,function(p)varvisible=p.isDescendantOf(nodeClicked);p.visible=visible;p.invalidateVisibility();)graph.invalidate();*/点击主流程节点，显示或隐藏其子孙节点if(!nodeClicked.parent&!nodeClicked.fr

14、om&nodeClicked.hasChildren()setAllChildren(nodeClicked);graph.invalidate();显示或隐藏子孙节点的函数functionsetAllChildren(parent)Q.forEach(parent.children,function(p)p.visible=!p.visible;p.invalidateVisibility();if(p.hasChildren()setAllChildren(p);)设置树形图布局varlayouter=newQ.TreeLayouter(graph);functionsetLayout(nodeLIArr)layouter.layoutType=Q.Consts.LAYOUT_TYPE_EVEN_HORIZONTAL;/qunee新特性，节点连线能够等长排列layouter.parentChildrenDirection=Q.Consts.DIRECTION_BOTTOM_RIGHT;layouter