hhcysn
- 浏览: 16208 次
- 性别:
- 来自: 宁波
-
最新评论
写的一个工作流设计前台界面，代码效率不高，有很大优化空间、、、
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，稍作修改。
分享到：
发表评论
相关推荐
本实例源码集合旨在帮助Web设计者和前台编程人员深入理解jQuery的核心概念和实际应用，无论你是初学者还是经验丰富的开发者，都能从中受益。 首先，让我们探讨jQuery的基础知识。jQuery的核心是选择器，它允许...
标题中的“最好用的前台模板”指的是一个优秀的前端开发框架，用于构建用户界面。...对于有经验的开发者，这则是一个高效的工作流加速器，能够让他们专注于业务逻辑，而不是页面的布局和样式设计。
- 了解Git的工作流，如Master分支策略、Feature分支、Pull Request等。 - 使用Code Review和持续集成/持续部署(CI/CD)流程，保证代码质量和团队协作效率。 以上是Java前端开发笔试可能涉及的一些主要知识点，涵盖...
总结来说，这个"java小项目前后端实操练习完整代码legal.rar"是一个综合性的学习资源，涵盖了JAVA后端开发、Jquery前端实现、SSM架构应用、activity工作流和拦截器的使用。通过这个项目，你可以全面提升你的Java全栈...
6. 工作流设计器：JEECG集成了jbpm工作流设计器，允许开发者在页面配置流程转向，从而简化工作流的开发过程。通过工作流设计器，可以在少量Java代码的辅助下，快速完成工作流设计。 7. 常用共通封装：JEECG提供了一...
在新闻发布系统中，Servlet充当控制器角色，接收Jsp发送的请求，调用业务逻辑（如添加、删除、修改新闻），然后将结果返回给Jsp，实现数据的CRUD操作。 4. **Jdbc（Java Database Connectivity）**：Jdbc是Java与...
8. UX/UI设计: 用户体验（UX）和用户界面（UI）设计是Web前台的重要部分，它们关注如何通过直观的界面和流畅的交互提升用户满意度。 9. 浏览器兼容性: 开发者需确保网页在各种主流浏览器（如Chrome、Firefox、...
理解这两种控件的工作原理和配置方式，可以帮助开发者提升Web应用的用户体验，并实现更高效的时间输入。 总之，Web前端时间控件是提高用户交互性的重要工具。My97DatePicker以其强大的兼容性和丰富的功能深受开发者...
网站前台模版是构建网页和用户交互界面的重要组成部分，它为网页设计师和开发者提供了预设的布局、颜色方案、字体样式以及元素排列方式，极大地提高了工作效率。这些模版通常包括HTML、CSS、JavaScript等前端技术，...
企业级前台后台模板是专为小型公司设计的一套完整的网站构建解决方案，旨在提供高效、稳定且功能丰富的用户体验。这套模板包含前端和后端两部分，适用于那些希望快速搭建专业网站而又不想投入大量时间和资源的企业。...
- 工作流设计器：通过集成jbpm工作流，简化工作流的开发，并支持流程的可视化配置。 JEECG还支持多种数据库系统，如SQLServer、Oracle和MySQL等，并且对浏览器兼容性良好，支持IE6、IE8+和Google Chrome等。 为了...
Java 开发程序员简历 Java 开发程序员简历是一...* 熟悉 JBPM 等工作流技术 * 熟悉 DOM4J 等 XML 解析技术 该简历涵盖了 Java 开发、项目管理、数据库管理、Web 开发等多个方面的知识点，是一份非常详细的个人简历。
在前台实现了用户注册、上传音乐、试听歌曲、发送短信、音乐下载以及音乐消息发送等功能；在后台则主要用于管理数据库，实现了管理员删除音乐以及注册用户删除的功能。 关键词中提及Music Website、Struts2 ...
3. **审批流程**：描述中提到的“审核”和“审批流程”表明系统可能有工作流管理的组件。JSP可以结合Java的Workflow框架，如Activiti或JBPM，实现复杂的业务流程自动化。 4. **分发**：文件的分发可能涉及到邮件...
• 工作流设计器让业务系统更灵活 • 常用共通封装(数据字典/邮件发送/定时任务/短信接口/Freemarker工具类等..) • 兼容IE 6、IE 8+和Google等浏览器 • 支持SQL Server、Oracle和MySQL等主流数据库
《SSH请假流管理系统详解》 SSH请假流管理系统是一款基于SpringMVC、Spring和Hibernate三大主流Java Web框架...这个系统的设计和实现，充分体现了现代Web应用开发的最佳实践，为教育信息化领域提供了有价值的参考。
在实现瀑布流分页时，还需要注意兼容性问题，确保在不同的浏览器和设备上都能正常工作。此外，为了提高用户体验，可以添加一些额外的功能，比如加载指示器、懒加载等。总的来说，瀑布流分页结合JavaScript可以实现...
开题报告通常包括论文或设计的主题、目的与意义、主要内容、可行性研究以及工作思路等部分，是毕业设计的起点。 【设计题目】基于 PHP 技术的企业网站，旨在利用 PHP 这种流行的服务器端脚本语言，构建一个模块化的...