您好，欢迎来到华佗小知识。
科技 教育 生活 旅游 时尚 美容 美食 健康 体育 游戏 汽车 家电
搜索
您的当前位置：首页JS流程设计器（二）

JS流程设计器（二）

来源：华佗小知识
JS流程设计器（⼆）

此代码接着JS流程设计器（⼀）续写，该代码主要是怎么将设计好的流程图⽤最基本字符串的⽅式传到后台，再由后台字符串的⽅式重新显⽰在页⾯上。

1 //转化成后端的⽅法

2 function changebe(firstbegin){

3 for(var x=0;x-1){

6 laststr=laststr+\"begin(\"+$(\"#\"+firstbegin).text()+\")\"; 7 }else if(firstbegin.indexOf(\"tableform\")>-1){

8 laststr=laststr+\"tab(\"+$(\"#\"+firstbegin).text()+\")\"; 9 }else if(firstbegin.indexOf(\"approval-circle\")>-1){

10 laststr=laststr+\"dug(\"+$(\"#\"+firstbegin).text()+\")\";11 }else if(firstbegin.indexOf(\"end-circle\")>-1){

12 laststr=laststr+\"end(\"+$(\"#\"+firstbegin).text()+\")\";13 }

14 for(var y=0;y\";

17 changebe(lineobjjson.lineobj[y].endid);18 }19 }20 }21 }22 }

显⽰的主要字符串的样式为：\"begin(开始)>tab(表单1)>dug(审批2)>tab(表单2)>dug(审批1)>dug(审批4)>tab(表单3)>dug(审批5)>dug(审批6)>tab(表单4)>dug(审批7)>dug(审批8)>dug(审批9)>end(结束1)\";

从后端传⼊前端并显⽰在前台的代码如下：

1 //定义每⼀⾏对象的宽度总和是多少 2 var objsumwidth=0;

3 //前⼀个对象的宽度和⾼度 4 var beforewidth=0; 5 var beforeheight=0;

6 //*******************************将后台传过来的字符串转化为前台图形********************************//

7 //假设后台传过来的字符串是开始,begin-circle>表单1,tableform>审批2,approval-circle>表单2,tableform>审批1,approval-circle>结束,end-circle

8 var firststr=\"begin(开始)>tab(表单1)>dug(审批2)>tab(表单2)>dug(审批1)>dug(审批4)>tab(表单3)>dug(审批5)>dug(审批6)>tab(表单4)>dug(审批7)>dug(审批8)>dug(审批9)>end(结束1)\"; 9 changefe(firststr); 10 //转化成前端的⽅法

11 function changefe(firststr){

12 for(var a=0;a\").length;a++){ 13 whichobj(firststr.split(\">\")[a].split(\"(\")[0]); 14 if(a%5==4){

15 var avgwidth=(parseFloat($(\"#right-area\").width())-objsumwidth)/5.0; 16 //判断⽅向是从左往右还是从右往左的⽅向 17 if(a%10==4){//从左往右画对象 18 for(var b=a-4;b<=a;b++){ 19 if(b==a-4){

20 shapeobjjson.shapeobj[b].offsettop = a*35;

21 shapeobjjson.shapeobj[b].offsetleft = avgwidth/2.0+$(\".navbox\").width();

22 shapeobjjson.shapeobj[b].leftcenterdot = avgwidth/2.0+$(\".navbox\").width()+\";\"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2));

23 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(avgwidth/2.0+$(\".navbox\").width())+parseFloat(shapeobjjson.shapeobj[b].width))+\";\"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 24 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(avgwidth/2.0+$(\".navbox\").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+parseFloat(a*35);

25 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(avgwidth/2.0+$(\".navbox\").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height)); 26 beforewidth=parseFloat(shapeobjjson.shapeobj[b].width)+avgwidth/2.0+$(\".navbox\").width(); 27 beforeheight=a*35;

28 console.log(\"beforewidth：\"+beforewidth+\";\"+\"beforeheight:\"+beforeheight); 29 }else{

30 shapeobjjson.shapeobj[b].offsettop = a*35;

31 shapeobjjson.shapeobj[b].offsetleft = beforewidth+avgwidth;

32 shapeobjjson.shapeobj[b].leftcenterdot = (beforewidth+avgwidth)+\";\"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2));

33 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width))+\";\"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 34 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+parseFloat(a*35);

35 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height)); 36 beforewidth=parseFloat(shapeobjjson.shapeobj[b].width)+beforewidth+avgwidth; 37 beforeheight=a*35; 38 } 39 }

40 }else if(a%10==9){//从右往左画对象 41 for(var b=a-4;b<=a;b++){ 42 if(b==a-4){

43 shapeobjjson.shapeobj[b].offsettop = a*35;

44 shapeobjjson.shapeobj[b].offsetleft = $(\"#right-area\").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(\".navbox\").width();

45 shapeobjjson.shapeobj[b].leftcenterdot = ($(\"#right-area\").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(\".navbox\").width())+\";\"+(parseFloat(a*35)+parseInt(shapeobjjson.shapeobj[b].height/2));

46 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat($(\"#right-area\").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(\".navbox\").width())+parseFloat(shapeobjjson.shapeobj[b].width))+\";\"+(parseFloat(a*35)+parseFloa 47 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat($(\"#right-area\").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(\".navbox\").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+(a*35);

48 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat($(\"#right-area\").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(\".navbox\").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+(parseFloat(a*35)+ 49 beforewidth=$(\"#right-area\").width()-avgwidth/2.0-parseFloat(shapeobjjson.shapeobj[b].width)+$(\".navbox\").width(); 50 beforeheight=a*35; 51 }else{

52 shapeobjjson.shapeobj[b].offsettop = a*35;

53 shapeobjjson.shapeobj[b].offsetleft = beforewidth-avgwidth-shapeobjjson.shapeobj[b].width;

54 shapeobjjson.shapeobj[b].leftcenterdot = (beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+\";\"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2));

55 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width))+\";\"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2 56 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+(a*35);

57 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].he 58 beforewidth=beforewidth-avgwidth-parseFloat(shapeobjjson.shapeobj[b].width); 59 beforeheight=a*35; 60 } 61 } 62 }

63 //图形转到下⼀⾏的时候,宽度重新赋值为0，⾼度值继续累加 beforewidth=0; 65 objsumwidth=0;

66 }else if(a==firststr.split(\">\").length-1){

67 var avgwidth=(parseFloat($(\"#right-area\").width())-objsumwidth)/parseFloat(firststr.split(\">\").length%5); 68 for(var b=a-parseFloat(firststr.split(\">\").length%5)+1;b<=a;b++){ 69 console.log(b);

70 if((parseInt(b/5)+1)%2==1){//从左往右画对象

71 if(b==firststr.split(\">\").length-firststr.split(\">\").length%5){ 72 shapeobjjson.shapeobj[b].offsettop = beforeheight+140;

73 shapeobjjson.shapeobj[b].offsetleft = avgwidth/2.0+$(\".navbox\").width();

74 shapeobjjson.shapeobj[b].leftcenterdot = avgwidth/2.0+$(\".navbox\").width()+\";\"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[b].height/2));

75 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(avgwidth/2.0+$(\".navbox\").width())+parseFloat(shapeobjjson.shapeobj[b].width))+\";\"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[b].height/2 76 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(avgwidth/2.0+$(\".navbox\").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+parseFloat(beforeheight+140);

77 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(avgwidth/2.0+$(\".navbox\").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[b].height)); 78 beforewidth=parseFloat(shapeobjjson.shapeobj[b].width)+avgwidth/2.0+$(\".navbox\").width(); 79 beforeheight=beforeheight+140;

80 console.log(\"beforewidth：\"+beforewidth+\";\"+\"beforeheight:\"+beforeheight); 81 }else{

82 shapeobjjson.shapeobj[b].offsettop = beforeheight;

83 shapeobjjson.shapeobj[b].offsetleft = beforewidth+avgwidth;

84 shapeobjjson.shapeobj[b].leftcenterdot = (beforewidth+avgwidth)+\";\"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height/2));

85 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width))+\";\"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height/2)); 86 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+parseFloat(beforeheight);

87 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height)); 88 beforewidth=parseFloat(shapeobjjson.shapeobj[b].width)+beforewidth+avgwidth;

// beforeheight=beforeheight+140; 90 }

91 }else if((parseInt(b/5)+1)%2==0){//从右往左画对象

92 if(b==firststr.split(\">\").length-firststr.split(\">\").length%5){ 93 shapeobjjson.shapeobj[b].offsettop = beforeheight+140;

94 shapeobjjson.shapeobj[b].offsetleft = $(\"#right-area\").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width;

95 shapeobjjson.shapeobj[b].leftcenterdot = ($(\"#right-area\").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width)+\";\"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[a].height/2));

96 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat($(\"#right-area\").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width))+\";\"+(parseFloat(beforeheight+140)+parseFloat(shape 97 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat($(\"#right-area\").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+(beforeheight+140);

98 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat($(\"#right-area\").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+(parseFloat(beforeheight+140)+ 99 beforewidth=$(\"#right-area\").width()-avgwidth/2.0-parseFloat(shapeobjjson.shapeobj[b].width);100 beforeheight=beforeheight+140;101 }else{

102 shapeobjjson.shapeobj[b].offsettop = beforeheight;

103 shapeobjjson.shapeobj[b].offsetleft = beforewidth-avgwidth-shapeobjjson.shapeobj[b].width;

104 shapeobjjson.shapeobj[b].leftcenterdot = (beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+\";\"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height/2));

105 shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width))+\";\"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b106 shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+(beforeheight);

107 shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+\";\"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeo108 beforewidth=beforewidth-avgwidth-parseFloat(shapeobjjson.shapeobj[b].width);109 // beforeheight=beforeheight+140;110 }111 }112 }113 }114 }

115 beforewidth=0;116 objsumwidth=0;117 beforeheight=0;

118 console.log(\"shapeobjjson:\"+JSON.stringify(shapeobjjson));119 //加载到页⾯上

120 for(var c=0;c121 $(\".right-area\").html($(\".right-area\").html()+'

'123 +'
'124 +'
'125 +'
'

126 +'

'

127 +'

'+firststr.split(\">\")[c].split(\"(\")[1].split(\")\")[0]+'
');128 $(\"#\"+shapeobjjson.shapeobj[c].id).css(\"position\

129 $(\"#\"+shapeobjjson.shapeobj[c].id).css(\"top\130 $(\"#\"+shapeobjjson.shapeobj[c].id).css(\"left\131 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #showhidden\").css(\"position\

132 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #showhidden\").css(\"top\133 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #showhidden\").css(\"left\134 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #showhidden #circle-center\").css(\"position\

135 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #showhidden #circle-center\").css(\"top\136 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #showhidden #circle-center\").css(\"left\137 //左⽅块

138 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #leftpoint\").css(\"position\

139 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #leftpoint\").css(\"top\140 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #leftpoint\").css(\"left\141 //右⽅块

142 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #rightpoint\").css(\"position\

143 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #rightpoint\").css(\"top\144 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #rightpoint\").css(\"left\145 //上⽅块

146 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #toppoint\").css(\"position\

147 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #toppoint\").css(\"top\148 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #toppoint\").css(\"left\149 //下⽅快

150 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #bottompoint\").css(\"position\

151 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #bottompoint\").css(\"top\152 $(\"#\"+shapeobjjson.shapeobj[c].id+\" #bottompoint\").css(\"left\153 }

154 //更新坐标

155 var startdot=new Array(4);156 var enddot=new Array(4);

157 for(var q=1;q158 //获取线起始点的左中点，右中点，上中点和下中点的坐标159 startdot[0]=shapeobjjson.shapeobj[q-1].leftcenterdot;160 startdot[1]=shapeobjjson.shapeobj[q-1].rightcenterdot;161 startdot[2]=shapeobjjson.shapeobj[q-1].topcenterdot;162 startdot[3]=shapeobjjson.shapeobj[q-1].bottomcenterdot;163

1 //获取线終点的左中点，右中点，上中点和下中点的坐标165 enddot[0]=shapeobjjson.shapeobj[q].leftcenterdot;166 enddot[1]=shapeobjjson.shapeobj[q].rightcenterdot;167 enddot[2]=shapeobjjson.shapeobj[q].topcenterdot;168 enddot[3]=shapeobjjson.shapeobj[q].bottomcenterdot;169 //连接起始点和终点连线最短的线

170 var minline=Math.sqrt(Math.pow((startdot[0].split(\";\")[0]-enddot[0].split(\";\")[0]),2)+Math.pow((startdot[0].split(\";\")[1]-enddot[0].split(\";\")[1]),2));171 //start和end的值0,1,2,3代表是该对象左中点，右中点，上中点还是下中点172 var start=0;173 var end=0;

174 //获取线最短的两个点的位置

175 for(var x=0;x177 if((minline-Math.sqrt(Math.pow((startdot[x].split(\";\")[0]-enddot[y].split(\";\")[0]),2)+Math.pow((startdot[x].split(\";\")[1]-enddot[y].split(\";\")[1]),2)))>0){178 minline=Math.sqrt(Math.pow((startdot[x].split(\";\")[0]-enddot[y].split(\";\")[0]),2)+Math.pow((startdot[x].split(\";\")[1]-enddot[y].split(\";\")[1]),2)); 179 start=x;180 end=y;181 }182 }183 }

184 lineobjjson.lineobj.push({185 lineid: \"flow\"+chartj,

186 startid: shapeobjjson.shapeobj[q-1].id,187 endid: shapeobjjson.shapeobj[q].id,188 startpos:start,1 endpos:end,

190 startcsys:startdot[start],191 endcsys:enddot[end],192 });

193 $(\".right-area\").html($(\".right-area\").html()+'');194 chartj++;195 }

196 for(var p=0;p197 drawarrow(lineobjjson.lineobj[p].lineid,0,0,lineobjjson.lineobj[p].startcsys.split(\";\")[0],lineobjjson.lineobj[p].startcsys.split(\";\")[1],lineobjjson.lineobj[p].endcsys.split(\";\")[0],lineobjjson.lineobj[p].endcsys.split(\";\")[1]);198 }

199 showcenterobj('begin-circle');200 moveshape('begin-circle');201 for(var x=1;x<=charti;x++){202 moveshape('tableform'+x);203 showcenterobj('tableform'+x);204 }

205 for(var x=1;x<=chartm;x++){

206 moveshape('approval-circle'+x);207 showcenterobj('approval-circle'+x);208 }

209 for(var x=1;x<=chartn;x++){210 moveshape('end-circle'+x);211 showcenterobj('end-circle'+x);

212 }213 }

214 function addjsonobj(id,width,height){215 shapeobjjson.shapeobj.push({216 id : id,

217 width : width,218 height : height,219 offsettop : \"\220 offsetleft : \"\221 leftcenterdot : \"\222 rightcenterdot : \"\223 topcenterdot : \"\224 bottomcenterdot : \"\225 });

226 objsumwidth=objsumwidth+parseInt(width);227 }

228 function whichobj(idconstr){229 if(idconstr==\"begin\"){

230 addjsonobj(\"begin-circle\231 }else if(idconstr==\"tab\"){

232 addjsonobj(\"tableform\"+charti,\"132\233 charti++;

234 }else if(idconstr==\"dug\"){

235 addjsonobj(\"approval-circle\"+chartm,\"102\236 chartm++;

237 }else if(idconstr==\"end\"){

238 addjsonobj(\"end-circle\"+chartn,\"132\239 chartn++;240 }241 }

具体位置是由对象的个数决定的，距离顶部的位置暂时设为定值。

本⽂需要先阅读JS流程设计器（⼀），以便于读懂JS流程设计器（⼆）的代码。如有任何建议，还望提出。

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

Copyright © 2019- huatuo0.cn 版权所有 湘ICP备2023017654号-2

违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务