jquery兑现工作流设计器前台
jquery实现工作流设计器前台
写的一个工作流设计前台界面，代码效率不高，有很大优化空间、、、
workflow_index.html
workflow_part1.html
workflow_part2.html
jquery.workflow.js
用到了jquery1.5.1，网上别人共享的popmenu、mulitselector，稍作修改。
写的一个工作流设计前台界面，代码效率不高，有很大优化空间、、、
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" class="do" 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 class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
<div class="b d1 k">
<b>帮助：</b><hr class="thinline"/>当系统新建和修改内容时，通过表单查找对应的工作流，并检查是否符合以下选项内容，如果符合，则启动此工作流
</div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
</div>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
workflow_part2.html
<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" class="do" 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 class="trhead"><td>步骤名称：<input id="stepName_step1" 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 class="thinline"/></td><tr/>
<tr><td>
<table border="0" 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，高亮新title
var newTable = '<table id="info_step'+nowStepNo+'" width="100%" border="0" style=""><tr class="trhead"><td>步骤名称：<input id="stepName_step'+nowStepNo+'" 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 class="thinline"/></td><tr/><tr><td><table border="0" 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;//操作对应id
var AId = "cond1_A_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//特定人员链接id
var IId = "cond1_I_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//存储特定人员值的隐藏字段对应id
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=="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;//并且或则链接对应id
var A1Id = "cond3_A1_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//第一个比较值对应id
var A2Id = "cond3_A2_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//第二个比较值对应id
var EqId = "cond3_Eq_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//运算语id
var I0Id = "cond3_I0_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//并且或则对应隐藏字段id value:0 且 1 或
var I1Id = "cond3_I1_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//第一个比较值对应隐藏字段id
var I2Id = "cond3_I2_"+eval("condNo_step"+nowStepNo)+"_step"+nowStepNo;//第二个比较值对应隐藏字段id
var 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;//待办事项对应id
var A2Id = 'hand1_A2_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//这些用户对应id
var I1Id = 'hand1_I1_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//待办事项对应隐藏字段id
var 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;//域对应id
var A2Id = 'hand2_A2_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//值对应id
var I1Id = 'hand2_I1_'+eval("handNo_step"+nowStepNo)+"_step"+nowStepNo;//域对应隐藏字段id
var 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元素对应需要储值的隐藏字段id
if(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，稍作修改。