jquery实现工作流设计器前台
写的一个工作流设计前台界面，代码效率不高，有很大优化空间、、、
workflow_index.html
<html><head><meta charset="GBK"><title>WorkFlow D</title><link rel="stylesheet" href="jquery/development-bundle/themes/base/jquery.ui.all.css"><link rel="stylesheet" href="jquery/development-bundle/themes/base/jquery.ui.dialog.css"><script src="jquery/js/jquery-1.5.1.min.js"></script><script src="jquery/development-bundle/external/jquery.bgiframe-2.1.2.js"></script><script src="jquery/development-bundle/ui/jquery.ui.core.js"></script><script src="jquery/development-bundle/ui/jquery.ui.widget.js"></script><script src="jquery/development-bundle/ui/jquery.ui.mouse.js"></script><script src="jquery/development-bundle/ui/jquery.ui.button.js"></script><script src="jquery/development-bundle/ui/jquery.ui.draggable.js"></script><script src="jquery/development-bundle/ui/jquery.ui.position.js"></script><script src="jquery/development-bundle/ui/jquery.ui.resizable.js"></script><script src="jquery/development-bundle/ui/jquery.ui.dialog.js"></script><style>button span{font:9px "Trebuchet MS",sans-serif;}</style><script>$( "#dialog:ui-dialog" ).dialog( "destroy" );var reloadNum = 0;$(function(){$("#dialog_w1").dialog({ title:"设计工作流", resizable:true,draggable:true,autoOpen:false,cover:true,height: 400,width: 700,modal: true,buttons: {"取消":function(){$( this ).dialog( "close" );},"下一步":function(){/*操作*/ $(this).dialog("close");$("#dialog_w2").dialog("open");}}});$("#dialog_w2").dialog({ title:"设计工作流", resizable:true,draggable:true, autoOpen:false,cover:true,height: 400,width: 700,modal: true,buttons: {"取消":function(){ $( this ).dialog( "close" );},"上一步":function(){ $(this).dialog("close");$("#dialog_w1").dialog("open");},"完成":function(){/*操作,需考虑未变更为a元素的input元素*/// ie&firefox alert(document.getElementById("frame2").contentWindow.varName);// ie&firefox alert(document.getElementById("frame2").contentWindow.functionName());// ie&firefox alert(document.getElementById("frame2").contentWindow.document.getElementById("info_step1").innerHTML);// ie alert(document.frames("frame2").window.document.getElementById("info_step1").innerHTML);// firefox alert(document.getElementById("frame2").contentDocument.getElementById("info_step1").innerHTML);// ie&firefox alert($("#frame2").contents().find("#info_step1").html());$(this).dialog("close");}},close:function(){}});$("#beginWorkFlow").click(function(){$("#dialog_w1").dialog("open");//刷新iframe，使select元素正常显示,只刷新一次if(reloadNum == 0){ reloadNum++; $("#frame1").attr("src",$("#frame1").attr("src"));}});});</script></head> <body><div><input id="beginWorkFlow" type="button" value="设计工作流"/></div><div id="dialog_w1" style="text-align:center;"> <iframe id="frame1" frameborder=0 scrolling="no" name="设计工作流part1" src="workflow_part1.html" style="width:650px;height:400px" ></iframe></div><!--第一步界面--><div id="dialog_w2" style="text-align:center;"> <iframe id="frame2" frameborder=0 name="设计工作流part2" src="workflow_part2.html" style="width:650px;height:400px"></iframe></div><!--第二步界面--><script></script> </body></html>workflow_part1.html
<html><style>* {font-size:13px}* {margin:0}tr th {background-image:url("img/l1.png");background-repeat:repeat-x;height="70px";text-align:left;font-size:15px;padding-left:5px;}.do {border:thin;border-style:groove;}.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}.b1,.b1b{margin:0 5px;background:#999;}.b2,.b2b{margin:0 3px;border-width:2px;}.b3,.b3b{margin:0 2px;}.b4,.b4b{height:2px;margin:0 1px;}.d1{background:#FFFFFF;}.k {height:100px;}.thinline {height:1px;border:none;border-top:1px solid #EFF3FE;}</style><body> </head> <div align="center" style="width:650;height:400px;padding-top:2px"> <form id="formPart1" action=""><table border="0" width="99%" height="99%" align="center"><tr><th colspan="2" >定义新工作流</th></tr><tr><td width="70%" valign="top"><div><table border="0" width="100%"> <tr><td>选择工作流的类型，以及此新工作流的运行条件<br/><br/></td></tr><tr><td>指定工作流名称：</td></tr><tr><td><input type="text" name="" size="25"/><br/><br/></td></tr><tr><td>此工作流应用到哪个工作任务表单？</td></tr><tr><td> <select name=""><option value="" selected=selected>无任务表单</option></select><br/><br/></td></tr><tr><td>什么时候开始启动此工作流？</td></tr><tr><td><input type="checkbox" name="" value="">数据创建的时候启动此工作流</input></td></tr><tr><td><input type="checkbox" name="" value="">数据修改的时候启动此工作流</input><br/><br/></td></tr><tr><td></td></tr></table></div></td><td valign="top" style="background:#EFF3FE"> <div style="margin:5px;margin-top:15px"><b name="code"><html><head><script src="jquery/js/jquery-1.5.1.min.js"></script><script src="js/popmenu/jquery.popmenu.js"></script><script src="js/mulitselector/jquery.mulitselector.js"></script><script src="js/jquery.workflow.js"></script><link rel="stylesheet" href="js//mulitselector/layer.css"><link rel="stylesheet" href="js/popmenu/jquery.popmenu.css"><style>* {font-size:12px;}a {color:#0000FF;text-decoration:underline}.thinline {height:1px;border:none;border-top:1px solid #1E90FF;}.do {border:thin;border-style:groove;}.trhead {background-image:url('img/l2.png');height:40;}</style></head><body> <div align="center" style="width:650;height:400px"> <form id="formPart2" action=""><table border="0" width="100%" height="99%"><tr valign="top"><td id="allTables" width="70%"><table id="info_step1" width="100%" border="0" style=""><tr type="text" name="stepName_step1" size="25px" value="步骤1"/></td></tr><tr><td style="color:#0000FF">指定当前步骤的详细信息</td></tr><tr><td>选择定义此工作流步骤的条件和操作。</td></tr><tr><td><hr width="100%" height="100%"><tr align="center"><td width="25%" style="background:#C6DBFF"><input id="condition" type="button" value="条件 " style="width:80px;height:30px"/></td><td valign="top"><div id="condition_content_step1" style="overflow:auto;height:130px;border:1px;border-style:solid;border-color:#C6DBFF;padding:1px;padding-right:6px"></div></td></tr><tr align="center"><td style="background:#C6DBFF"><input id="handle" type="button" value="操作 " style="width:80px;height:30px"/></td><td valign="top""><div id="handle_content_step1" style="overflow:auto;height:130px;border:1px;border-style:solid;border-color:#C6DBFF;padding:1px;padding-right:6px"></div></td></tr></table></td></tr></table></td><td valign= "top" align="left"> <div style="margin:2px;background:#EFF3FE;width:100%;height:100%"> <dl><dt style="height:25px;margin-top:10px;margin-left:5px"> 工作流步骤</dt><dt style="margin-left:5px;margin-right:5px;clear:both;text-align:right;height:20px;background:#D2D9EB" onmouseover="titleOnBlur($(this));" onmouseout="titleOutBlur($(this));"><a id="title_step1" href="javascript:void(0)" onClick="showStep('info_step1');" style="float:left;margin-top:4px;margin-left:3px;text-decoration:none;color:#000000">步骤1</a> <img src="img/close.gif" style="cursor:pointer;display:none;margin-top:4px;margin-right:3px" onClick="deleteStep('title_step1','info_step1');"/></dt><dt id="addStep" style="margin-left:5px;clear:both;margin-top:4px;"><a href="javascript:void(0)" onClick="addStep();" style="margin-left:3px">添加工作流步骤</a></dt> </dl> </div></td></tr></table> </form> </div></body></html>jquery.workflow.js
var stepNum = 1;//记录步骤数量 var stepNo = 1;//记录步骤序号 var nowStepNo = 1;//当前显示步骤序号 var stepMaxNum = 10;//限制步骤个数为stepMaxNum var stepVarNum = 30;//限制步骤允许标记范围 /*动态声明变量*/ for(var n = 1 ; n <= stepVarNum ; n++){ eval("var condNo_step"+n+" = 0");//条件已添加数量 eval("var handNo_step"+n+" = 0");//操作已添加数量 eval("var createrNo_step"+n+" = 0");//特定人员创建的人员编号 eval("var updaterNo_step"+n+" = 0");//特定人员修改的人员编号 eval("var dataSourceNo_step"+n+" = 0");//任意数据源比较编号 eval("var missionNo_step"+n+" = 0");//任务分配编号 eval("var regionSettingNo_step"+n+" = 0");//域设置编号 } var conditionStr = "[{val:'cond1',text:'由特定人员创建'},{val:'cond2',text:'由特定人员修改'},{val:'cond3',text:'比较任意数据源'}]"; var handleStr = "[{val:'hand1',text:'分配待办事宜'},{val:'hand2',text:'设置当前项目的域'}]"; var str2Obj = new Function("obj","return eval(obj);"); var conditionItems = str2Obj(conditionStr); var handleItems = str2Obj(handleStr); var conditionMenu; var handleMenu; $().ready(function() { initMenu(); $(document).click(function(event){ if(event.target.id!="condition" && event.target.id!="handle"){handleMenu.hideMenu();conditionMenu.hideMenu();}//即时更改当前步骤在右侧列表的名称if($("#stepName_step"+nowStepNo).val()=="")$("#stepName_step"+nowStepNo).val("步骤"+nowStepNo);$("#title_step"+nowStepNo).html($("#stepName_step"+nowStepNo).val());//即时给条件和操作右边框中的非链接值变更为显示链接上的值,循环次数为条件数量和操作数量的较大一方var forN = eval("condNo_step"+nowStepNo);if(forN < eval("handNo_step"+nowStepNo))forN = eval("handNo_step"+nowStepNo);for(var i = 1;i <= forN;i++){ //对于第一个条件或则第二个条件，先将下拉选项值value赋给对应隐藏字段，然后变更为a元素//条件一//特定人员var cond1A = "cond1_A_"+i+"_step"+nowStepNo;var cond1I = "cond1_I_"+i+"_step"+nowStepNo;rebOnClickCond12(event,cond1A,cond1I);//条件二//特定人员 var cond2A = "cond2_A_"+i+"_step"+nowStepNo; var cond2I = "cond2_I_"+i+"_step"+nowStepNo; rebOnClickCond12(event,cond2A,cond2I); //对于第三个条件，将文本框的值赋给隐藏字段，然后变更为a元素 //值1 var cond3A1 = "cond3_A1_"+i+"_step"+nowStepNo; var cond3I1 = "cond3_I1_"+i+"_step"+nowStepNo; rebOnClickInput2A(event,cond3A1,cond3I1); //值2 var cond3A2 = "cond3_A2_"+i+"_step"+nowStepNo; var cond3I2 = "cond3_I2_"+i+"_step"+nowStepNo; rebOnClickInput2A(event,cond3A2,cond3I2); //对于第一个操作，待办事项不管 //‘这些用户’ 赋给隐藏字段、变更为a元素 已经在mulitselector js 操作 //对于第二个操作的域下拉、值文本框 //域 var hand2A1 = 'hand2_A1_'+i+"_step"+nowStepNo; var hand2I1 = 'hand2_I1_'+i+"_step"+nowStepNo; if($("#"+hand2A1).val()!="undefined" && $("#"+hand2A1).val()!="") $("#"+hand2I1).val($("#"+hand2A1).val());// 赋值 if(event.target.id!=hand2A1 && $("#"+hand2A1).val()!="" && $("#"+hand2A1).val()!="undefined"){//变更元素 //实际使用时这里可以域id获取域名，这里暂演示 var name = ""; switch($("#"+hand2I1).val()){ case "location_1":{name = "域一"; break;} case "location_2":{name = "域二"; break;} case "location_3":{name = "域三"; break;} case "location_4":{name = "域四"; break;} } var rebA = '<a id="'+hand2A1+'" href="javascript:void(0)" onClick="setById(\''+hand2A1+'\',\''+hand2I1+'\');">'+name+'</a>'; $("#"+hand2A1).replaceWith(rebA);} //值 var hand2A2 = 'hand2_A2_'+i+"_step"+nowStepNo; var hand2I2 = 'hand2_I2_'+i+"_step"+nowStepNo; rebOnClickInput2A(event,hand2A2,hand2I2);}}); }); function deleteByPId(PId){ handleMenu.hideMenu(); conditionMenu.hideMenu(); if(confirm('确定删除该条目？')){$('#'+PId).remove(); } } function deleteStep(titleId,infoId){ handleMenu.hideMenu(); conditionMenu.hideMenu(); if(confirm('确定删除该步骤？')){ stepNum--; //最后一个步骤的删除 if(stepNum==0){stepNo = 0;nowStepNo = 1;$('#'+titleId).parent().remove();$('#'+infoId).remove();addStep();return; } //删除当前显示步骤 else if(titleId.split('_')[1].substring(4)==nowStepNo){var nextDt = $('#'+titleId).parent().next('dt[id!="addStep"]');if(nextDt.text()!=''){//显示后一个步骤var nextAId = nextDt.children('a:eq(0)').attr('id');$('#'+titleId).parent().remove();$('#'+infoId).remove();nowStepNo = nextAId.split('_')[1].substring(4);initNewTableAndTitle();initMenu();}else{//显示前一个步骤var preDt = $('#'+titleId).parent().prev('dt');var preAId = preDt.children('a:eq(0)').attr('id');$('#'+titleId).parent().remove();$('#'+infoId).remove();nowStepNo = preAId.split('_')[1].substring(4);initNewTableAndTitle();initMenu();} }else{$('#'+titleId).parent().remove();$('#'+infoId).remove(); } } } function addStep(){ handleMenu.hideMenu(); conditionMenu.hideMenu(); //即时更改当前步骤在右侧列表的名称 if($("#stepName_step"+nowStepNo).val()=="")$("#stepName_step"+nowStepNo).val("步骤"+nowStepNo); $("#title_step"+nowStepNo).html($("#stepName_step"+nowStepNo).val()); if(stepNum == stepMaxNum){alert('限制步骤数量最多为'+stepMaxNum+'个!');return;} stepNo++; stepNum++; initOldTableAndTitle(); nowStepNo = stepNo;//新添加的永远作为当前步骤显示出来//添加新table，默认显示，菜单按钮id默认，添加新title，高亮新titlevar newTable = '<table id="info_step'+nowStepNo+'" width="100%" border="0" style=""><tr type="text" name="stepName_step'+nowStepNo+'" size="25px" value="步骤'+nowStepNo+'"/></td></tr><tr><td style="color:#0000FF">指定当前步骤的详细信息</td></tr><tr><td>选择定义此工作流步骤的条件和操作。</td></tr><tr><td><hr width="100%" height="100%"><tr align="center"><td width="25%" style="background:#C6DBFF"><input id="condition" type="button" value="条件 " style="width:80px;height:30px"/></td><td valign="top"><div id="condition_content_step'+nowStepNo+'" style="overflow:auto;height:130px;border:1px;border-style:solid;border-color:#C6DBFF;padding:1px;padding-right:6px"></div></td></tr><tr align="center"><td style="background:#C6DBFF"><input id="handle" type="button" value="操作 " style="width:80px;height:30px"/></td><td valign="top""><div id="handle_content_step'+nowStepNo+'" style="overflow:auto;height:130px;border:1px;border-style:solid;border-color:#C6DBFF;padding:1px;padding-right:6px"></div></td></tr></table></td></tr></table>';var newTitle = '<dt style="margin-left:5px;margin-right:5px;clear:both;text-align:right;height:20px;" onmouseover="titleOnBlur($(this));" onmouseout="titleOutBlur($(this));"><a id="title_step'+nowStepNo+'" href="javascript:void(0)" onClick="showStep(\'info_step'+nowStepNo+'\');" style="float:left;margin-top:4px;margin-left:3px;text-decoration:none;color:#000000">步骤'+nowStepNo+'</a> <img src="img/close.gif" style="cursor:pointer;display:none;margin-top:4px;margin-right:3px" onClick="deleteStep(\'title_step'+nowStepNo+'\',\'info_step'+nowStepNo+'\');"/></dt>';$("#allTables").append(newTable);$("#addStep").before(newTitle);$("#title_step"+nowStepNo).parent().css("background","#D2D9EB");initMenu(); } function showStep(TId){ handleMenu.hideMenu(); conditionMenu.hideMenu();//即时更改当前步骤在右侧列表的名称if($("#stepName_step"+nowStepNo).val()=="")$("#stepName_step"+nowStepNo).val("步骤"+nowStepNo);$("#title_step"+nowStepNo).html($("#stepName_step"+nowStepNo).val());initOldTableAndTitle();nowStepNo = TId.split('_')[1].substring(4);initNewTableAndTitle();initMenu(); } function initOldTableAndTitle(){//老步骤table隐藏，老步骤title不高亮$("#info_step"+nowStepNo).hide();$("#title_step"+nowStepNo).parent().css("background","")//老步骤对应的菜单按钮id更改，添加'_step'+nowStepNo;$("#condition").attr("id","condition_step"+nowStepNo);$("#handle").attr("id","handle_step"+nowStepNo); } function initNewTableAndTitle(){//新步骤的菜单按钮id必须去除'_step'+nowStepNo$("#condition_step"+nowStepNo).attr("id","condition");$("#handle_step"+nowStepNo).attr("id","handle");//将新步骤对应table显示，高亮对应title$("#title_step"+nowStepNo).parent().css("background","#D2D9EB");$("#info_step"+nowStepNo).show(); } function titleOutBlur(obj){var checkStepNo = obj.children('a').attr('id').split('_')[1].substring(4);if(checkStepNo!=nowStepNo){obj.css('background','');}else{obj.css('background','#D2D9EB');}obj.find('img').hide(); } function titleOnBlur(obj){obj.css('background','#C6DBFF');obj.find('img').show(); } function initMenu(){ conditionMenu = $("#condition").popMenu({items: conditionItems,itemHeight: "20",width: "170" }).hide(); handleMenu = $("#handle").popMenu({items: handleItems,itemHeight: "20",width: "170" }).hide(); conditionMenu.onClick(function(event){ //alert(event.data.text + event.data.disable + event.data.value); //1,根据value，右侧td添加相应html，并添加删除链接 var tableContent = $("#condition_content_step"+nowStepNo); if(event.data.value=="cond1"){eval("condNo_step"+nowStepNo+"++");eval("createrNo_step"+nowStepNo+"++");/*id 说明"条件或则操作标志(如'cond1')_当前行链接标志(如'A1','Eq')_当前行的添加时序号_当前步骤的添加时序号(如'step1')"*/var PId = "cond1_P_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//操作对应idvar AId = "cond1_A_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//特定人员链接idvar IId = "cond1_I_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//存储特定人员值的隐藏字段对应idvar newH = '<div id="'+PId+'" style="height:20px;margin-left:5px;" onmouseover="$(this).css(\'border-style\',\'solid\').css(\'border-width\',\'1px\').css(\'border-color\',\'#C6DBFF\');$(this).find(\'img\').show();" onmouseout="$(this).css(\'border-style\',\'none\');$(this).find(\'img\').hide();"><div style="float:left;margin-left:3px;margin-top:3px">如果由 <a id="'+AId+'" href="javascript:void(0)" onClick="setById(\''+AId+'\',\''+IId+'\');">特定人员</a> 创建</div><div style="float:right;margin-right:3px;margin-top:3px"><img src="img/close.gif" style="cursor:pointer;display:none;" onClick="deleteByPId(\''+PId+'\');"/></div> <input id="'+IId+'" type="hidden" value=""/></div>';tableContent.append(newH); } if(event.data.value=="cond2"){eval("condNo_step"+nowStepNo+"++");eval("updaterNo_step"+nowStepNo+"++");var PId = "cond2_P_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;var AId = "cond2_A_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;var IId = "cond2_I_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;var newH = '<div id="'+PId+'" style="height:20px;margin-left:5px;" onmouseover="$(this).css(\'border-style\',\'solid\').css(\'border-width\',\'1px\').css(\'border-color\',\'#C6DBFF\');$(this).find(\'img\').show();" onmouseout="$(this).css(\'border-style\',\'none\');$(this).find(\'img\').hide();"><div style="float:left;margin-left:3px;margin-top:3px">如果由 <a id="'+AId+'" href="javascript:void(0)" onClick="setById(\''+AId+'\',\''+IId+'\');">特定人员</a> 修改</div><div style="float:right;margin-right:3px;margin-top:3px"><img src="img/close.gif" style="cursor:pointer;display:none;" onClick="deleteByPId(\''+PId+'\');"/></div> <input id="'+IId+'" type="hidden" value=""/></div>';tableContent.append(newH); } if(event.data.value=="cond3"){eval("condNo_step"+nowStepNo+"++");eval("dataSourceNo_step"+nowStepNo+"++");var PId = "cond3_P_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;var AndOrId = "cond3_A0_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//并且或则链接对应idvar A1Id = "cond3_A1_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//第一个比较值对应idvar A2Id = "cond3_A2_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//第二个比较值对应idvar EqId = "cond3_Eq_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//运算语idvar I0Id = "cond3_I0_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//并且或则对应隐藏字段id value:0 且 1 或var I1Id = "cond3_I1_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//第一个比较值对应隐藏字段idvar I2Id = "cond3_I2_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//第二个比较值对应隐藏字段idvar I3Id = "cond3_I3_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//运算语对应隐藏字段，value:0(等于)、1(不等于) newH = '<div id="'+PId+'" style="height:20px;margin-left:5px;" onmouseover="$(this).css(\'border-style\',\'solid\').css(\'border-width\',\'1px\').css(\'border-color\',\'#C6DBFF\');$(this).find(\'img\').show();" onmouseout="$(this).css(\'border-style\',\'none\');$(this).find(\'img\').hide();"><div style="float:left;margin-left:3px;margin-top:3px"><a id="'+AndOrId+'" href="javascript:void(0)" onClick="setById(\''+AndOrId+'\',\''+I0Id+'\');">且</a> <a id="'+A1Id+'" href="javascript:void(0)" onClick="setById(\''+A1Id+'\',\''+I1Id+'\');">值</a> <a id="'+EqId+'" href="javascript:void(0)" onClick="setById(\''+EqId+'\',\''+I3Id+'\');">等于</a> <a id="'+A2Id+'" href="javascript:void(0)" onClick="setById(\''+A2Id+'\',\''+I2Id+'\');">值</a></div><div style="float:right;margin-right:3px;margin-top:3px"><img src="img/close.gif" style="cursor:pointer;display:none;" onClick="deleteByPId(\''+PId+'\');"/></div> <input id="'+I0Id+'" type="hidden" value="0"/><input id="'+I1Id+'" type="hidden" value=""/><input id="'+I2Id+'" type="hidden" value=""/><input id="'+I3Id+'" type="hidden" value="0"/></div>';tableContent.append(newH); } }); handleMenu.onClick(function(event){ //alert(event.data.text + event.data.disable + event.data.value); //1,根据value，右侧td添加相应html，并添加删除链接 var tableContent = $("#handle_content_step"+nowStepNo); if(event.data.value=='hand1'){eval("handNo_step"+nowStepNo+"++");eval("missionNo_step"+nowStepNo+"++");var PId = 'hand1_P_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;var A1Id = 'hand1_A1_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//待办事项对应idvar A2Id = 'hand1_A2_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//这些用户对应idvar I1Id = 'hand1_I1_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//待办事项对应隐藏字段idvar I2Id = 'hand1_I2_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//这些用户对应隐藏字段id newH = '<div id="'+PId+'" style="height:20px;margin-left:5px;" onmouseover="$(this).css(\'border-style\',\'solid\').css(\'border-width\',\'1px\').css(\'border-color\',\'#C6DBFF\');$(this).find(\'img\').show();" onmouseout="$(this).css(\'border-style\',\'none\');$(this).find(\'img\').hide();"><div style="float:left;margin-left:3px;margin-top:3px">将 <a id="'+A1Id+'" href="javascript:void(0)" onClick="setById(\''+A1Id+'\',\''+I1Id+'\')">待办事项</a> 分配给 <a id="'+A2Id+'" href="javascript:void(0)" onClick="setById(\''+A2Id+'\',\''+I2Id+'\')">这些用户</a></div><div style="float:right;margin-right:3px;margin-top:3px"><img src="img/close.gif" style="cursor:pointer;display:none;" onClick="deleteByPId(\''+PId+'\');"/></div> <input id="'+I1Id+'" type="hidden" value=""/><input id="'+I2Id+'" type="hidden" value=""/></div>';tableContent.append(newH); } if(event.data.value=='hand2'){eval("handNo_step"+nowStepNo+"++");eval("regionSettingNo_step"+nowStepNo+"++");var PId = 'hand2_P_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;var A1Id = 'hand2_A1_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//域对应idvar A2Id = 'hand2_A2_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//值对应idvar I1Id = 'hand2_I1_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//域对应隐藏字段idvar I2Id = 'hand2_I2_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//值对应隐藏字段id newH = '<div id="'+PId+'" style="height:20px;margin-left:5px;" onmouseover="$(this).css(\'border-style\',\'solid\').css(\'border-width\',\'1px\').css(\'border-color\',\'#C6DBFF\');$(this).find(\'img\').show();" onmouseout="$(this).css(\'border-style\',\'none\');$(this).find(\'img\').hide();"><div style="float:left;margin-left:3px;margin-top:3px">然后将 <a id="'+A1Id+'" href="javascript:void(0)" onClick="setById(\''+A1Id+'\',\''+I1Id+'\')">域</a> 设置为 <a id="'+A2Id+'" href="javascript:void(0)" onClick="setById(\''+A2Id+'\',\''+I2Id+'\')">值</a></div><div style="float:right;margin-right:3px;margin-top:3px"><img src="img/close.gif" style="cursor:pointer;display:none;" onClick="deleteByPId(\''+PId+'\');"/></div> <input id="'+I1Id+'" type="hidden" value=""/><input id="'+I2Id+'" type="hidden" value=""/></div>';tableContent.append(newH); } });$("#condition").click(function(){ handleMenu.hideMenu(); conditionMenu.showMenu();});$("#handle").click(function(){ conditionMenu.hideMenu(); handleMenu.showMenu();}); } function rebOnClickCond12(e,A,I){if($("#"+A).val()!="undefined" && $("#"+A).val()!="") $("#"+I).val($("#"+A).val());// 赋值if(e.target.id!=A && $("#"+A).val()!="" && $("#"+A).val()!="undefined"){//变更元素 //实际使用时这里可以根据用户id获取用户name，这里暂演示 var name = ""; switch($("#"+A).val()){ case "role_1":{name = "超级管理员"; break;} case "role_2":{name = "安监局"; break;} case "user_3":{name = "赵兴海"; break;} case "user_4":{name = "赵子龙"; break;} } var rebA = '<a id="'+A+'" href="javascript:void(0)" onClick="setById(\''+A+'\',\''+I+'\');">'+name+'</a>'; $("#"+A).replaceWith(rebA);} } function rebOnClickInput2A(e,A,I){ if($("#"+A).val()!="undefined" && $("#"+A).val()!="") $("#"+I).val($("#"+A).val());// 赋值 if(e.target.id!=A && $("#"+A).val()!="undefined"){//变更元素 var val = $("#"+I).val(); if(val=="")val="值"; var rebA = '<a id="'+A+'" href="javascript:void(0)" onClick="setById(\''+A+'\',\''+I+'\');">'+val+'</a>'; $("#"+A).replaceWith(rebA);} } function setById(id,IId){//IId为id元素对应需要储值的隐藏字段idif(id.split('_')[0].indexOf('cond1')!=-1 || id.split('_')[0].indexOf('cond2')!=-1){//alert('弹出特定人员给id='+id+'链接处以选择，鼠标在他处点击时将值赋给id='+IId+'隐藏字段');//实际使用时，可以获取对应Action的特定人员集合，每个特定人员至少以id和name标识，这里暂时做静态演示，特定人员可以是角色，可以是用户var oldVal = $("#"+IId).val();var pSelect = '<select id="'+id+'">';pSelect += '<option value="role_1">超级管理员</option>';pSelect += '<option value="role_2">安监局</option>';pSelect += '<option value="user_3">赵兴海</option>';pSelect += '<option value="user_4">赵子龙</option>';pSelect += '</select>';$("#"+id).replaceWith(pSelect);$("#"+id).find('option[value='+oldVal+']').attr("selected","selected");}if(id.split('_')[0].indexOf('cond3')!=-1){if(id.split('_')[1].indexOf('A1')!=-1 || id.split('_')[1].indexOf('A2')!=-1){//alert('给id='+id+'链接处以填写值文本框，鼠标在他处点击时将赋给对应id='+IId+'的隐藏字段');var vText = '<input id="'+id+'" type="text" value="'+$("#"+id).html()+'" size="5"/>';$("#"+id).replaceWith(vText);}if(id.split('_')[1].indexOf('Eq')!=-1 || id.split('_')[1].indexOf('A0')!=-1){//alert('给id='+id+'链接处提供等于和不等于的选择，直接将赋值给id='+IId+'的隐藏字段');if($("#"+id).text()=='等于'){ $("#"+id).text('不等于'); $("#"+IId).val(1);//1 不等于 0 等于 默认等于 }else if($("#"+id).text()=='不等于'){ $("#"+id).text('等于'); $("#"+IId).val(0); }else if($("#"+id).text()=='且'){ $("#"+id).text('或'); $("#"+IId).val(1);//1 或 0 且 默认且 }else if($("#"+id).text()=='或'){ $("#"+id).text('且'); $("#"+IId).val(0); }}}if(id.split('_')[0].indexOf('hand1')!=-1){if(id.split('_')[1].indexOf('A1')!=-1){ //alert('给id='+id+'链接处弹出代办事宜信息，这个需要赋值给id='+IId+'的隐藏字段吗？暂时不管'); alert(' 代办事宜信息:\n\n1,名称：做饭\n2,时间：晚6点\n3,材料：猪肉\n4,服务对象：某人\n5,其他说明：无');}if(id.split('_')[1].indexOf('A2')!=-1){ //alert('给id='+id+'链接处提供多用户选择，鼠标在他处点击时将赋值给id='+IId+'的隐藏字段'); //暂时静态 var data = new Array(); data.push({id:"role_1",name:"超级管理员"}); data.push({id:"role_2",name:"安监局"}); data.push({id:"user_1",name:"赵兴海"}); data.push({id:"user_2",name:"赵子龙"}); var multiText = '<input id="'+id+'" type="text" value="'+$("#"+id).text()+'"/>'; $("#"+id).replaceWith(multiText); $("#"+id).mulitselector({title:"请选择",data:data}); //mulitselector js中更改，点击确定或则清除后将值以链接a元素形式重新赋上 }}if(id.split('_')[0].indexOf('hand2')!=-1){if(id.split('_')[1].indexOf('A1')!=-1){//alert('给id='+id+'链接处提供域选择，鼠标在他处点击时将赋值给id='+IId+'的隐藏字段');//可以动态获取域，这里仅静态表示var oldVal = $("#"+IId).val();var pSelect = '<select id="'+id+'">';pSelect += '<option value="location_1">域一</option>';pSelect += '<option value="location_2">域二</option>';pSelect += '<option value="location_3">域三</option>';pSelect += '<option value="location_4">域四</option>';pSelect += '</select>';$("#"+id).replaceWith(pSelect);$("#"+id).find('option[value='+oldVal+']').attr("selected","selected");}if(id.split('_')[1].indexOf('A2')!=-1){//alert('给id='+id+'链接处提供值填写文本框，鼠标在他处点击时将赋值给id='+IId+'的隐藏字段');var vText = '<input id="'+id+'" type="text" value="'+$("#"+id).html()+'" size="5"/>';$("#"+id).replaceWith(vText);}} }用到了jquery1.5.1，网上别人共享的popmenu、mulitselector，稍作修改。