在web开发中,一个页面的某些字段可能需要通过弹出浮出对话框的形式完成,这就要用到弹出框和其依赖的父类窗口的控制句柄,只有利用这个句柄才能操作对应页面的字段值的修改,当然具体的业务场景需要中的页面来源的数据需要从数据库中获取,并且带有更有的处理判断逻辑,这里只是给一个简单的弹出对话框,并且用jquery对页面元素对值进行回写。
主要用到的插件是:
<script type="text/javascript" src="lhgdialog.min.js?self=true&skin=default"></script>
弹窗的父页面 :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="lhgdialog.min.js
?self=true&skin=default"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="consolestick">
<div class="stickname"><strong>名称</strong><span style="color:red; font-weight:600;">*</span>
</div>
<div class="stickdetail">
<div class="nomalinput33">
<input class="noborderinput33" id="riskNameId" type="text" maxlength="10" value="爆炸物相关书籍" readonly />
</div>
</div>
</div>
<div class="consolestick">
<div class="stickname"><strong>父节点<span style="color:red; font-weight:600;">*</span>[<a href="#" οnclick="editPath()">编辑</a>]</strong>
</div>
<div class="stickdetail">
<div class="nomalinput22">
<input class="noborderinput22" id="parentPathId" type="text" maxlength="900" value="禁售商品>易燃易爆类>其他涉爆商品" readonly/>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var riskId="123";
function editPath(){ //从父类窗口中弹出编辑路径对话框
var dialog = $ .dialog({
title:'编辑风险路径',
data
:riskId,
content:'url:casepathmodify11.html',
lock:true,
width:700,
height:200,
resize:true
});
}
</script>
</html>
弹窗页面的html:
casepathmodify11.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var api = frameElement.api, W = api.opener;
//父子窗口的句柄,可以通过他们操作对应页面的标签和属性值,类似jquery选择器
var riskId = api.data
; // 得到riskId,通过这种方式得到父类窗口中穿过来的post参数值
window.onload = function () {
$('#riskName').val(W.
$('#riskNameId').val());
var pathArray = W.$('#parentPathId').val().split(">");
for (var i = 0; i <pathArray.length; i++) {
var j=i+1;
var selectedText=pathArray[i];
$("#"+j+"Catalog option
").each
(function(){
var optionText=$(this)
.text().trim(); // this指的是前面的option标签选择器
if(optionText==selectedText){
$(this).attr("selected",true);
//遍历对选菜单属性值,一个多选菜单中的某一个option属性为selected
}
});
}
};
api.button({
id:'valueOk',
name:'确定',
callback:ok
//执行确定操作后的回调函数
});
api.button({
id:'valueCancel',
name:'取消'
});
/* 函数ok即为上面添加按钮方法中callback回调函数调用的函数 */
function ok()
{
W.$('#riskNameId').val($('#riskName').val());
var newPath="";
for(var i=1;i<=4;i++){
var elem = $("#"+i+"Catalog").find("option:selected").text().trim();
if(elem=="") {
alert("不能选项中不能有空选!");
return;
}
newPath+=elem+">";
}
W.$('#parentPathId').val(newPath.substring(newPath,newPath.length-1));
alert("修改成功!");
return true;
};
</script>
<style type="text/css">
td {
padding: 6px;
height: 10px;
}
.selects {
margin-left: 2px;
width: 120px;
height: 25px;
}
.titles {
text-align: right;
height: 25px;
font-size: 14px;
}
input {
height: 22px;
font-size: 13px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="titles">名称</td>
<td>
<input name="riskName" id="riskName" maxlength="16">
</td>
</tr>
<tr>
<td class="titles">类型</td>
<td>
<select class="selects" id="1Catalog" name="1Catalog" >
<option value=""></option>
<option value="cashi1">ceshi1</option>
<option value="cashi1">ceshi2</option>
<option value="cashi1">禁售商品</option>
</select>
<select class="selects" id="2Catalog" name="2Catalog" >
<option value=""></option>
<option value="cashi1">ceshi1</option>
<option value="cashi1">ceshi2</option>
<option value="cashi1">易燃易爆类</option>
</select>
<select class="selects" id="3Catalog" name="3Catalog" >
<option value=""></option>
<option value="cashi1">ceshi1</option>
<option value="cashi1">ceshi2</option>
<option value="cashi1">其他涉爆商品</option>
</select>
<select class="selects" id="4Catalog" name="4Catalog" >
<option value=""></option>
<option value="cashi1">ceshi1</option>
<option value="cashi1">ceshi2</option>
<option value="cashi1">其他涉爆商品</option>
</select>
</td>
</tr>
</table>
<div id="tips"></div>
</body>
</html>
相见具体效果,请参考附件。