第一次使用jqueryUI嵌入到系统中,jquery-ui-1.8.18.custom.min.js这个插件可以把一个div封装成一个弹出框,不用window.open()这种纯dom方式,使得代码编写更加简单易懂,但是我使用的这个版本有点问题:
jsp页面中定义如下的div作为对话框的“载体”:
<div id="editradiationdiv" style="display: none">
<table style="border:1px; border-color: red;width: 100%">
<thead>
<tr>
<td>货物名称</td><td>辐照数量</td><td>辐照重量</td><td>辐照方式</td><td>辐照时间</td>
</tr>
</thead>
<tr>
<td><input id="divcargoname" name="divcargoname" type="text" disabled="disabled" /> <input type="hidden" id="receiveorgid" name="receiveorgid" /> </td>
<td>
<input type="text" id="irradednum" name="irradednum" />
<input type="hidden" id="hiddenoldirradednum"/>
<crazy:dictselect id="showcountorginfos" name="showcountorginfos" collection="${showcountorginfos}" ></crazy:dictselect>
</td>
<td> <input type="text" id="cargoweight" name="cargoweight" /> </td>
<td><crazy:dictselect id="irradtypes" name="irradtypes" collection="${irradtypes}" ></crazy:dictselect></td>
<td> <input type="text" id="irradtime" name="irradtime" /> <crazy:dictselect id="timeorgs" name="timeorgs" collection="${timeorgs}" ></crazy:dictselect> </td>
</tr>
</table>
<table>
<thead>
<tr>
<td>日期</td>
<td>序号</td>
<td>交接时间</td>
<td>首位吊具号</td>
<td>辐照批号</td>
<td>入场时间</td>
<td>吊具号码</td>
<td>装载模式</td>
<td>运行参数</td>
<td>运行圈数</td>
<td>变动说明</td>
<td>下圈开始时间</td>
<td>备注</td>
</tr>
</thead>
<tr>
<td> <input type="text" id="doirraddate" placeholder="格式:yyyy-mm-dd" /> </td>
<td> <input type="text" id="ordernum" /> </td>
<td> <input type="text" id="connecttime"/> </td>
<td> <input type="text" id="firstspreadernum" /> </td>
<td> <input type="text" id="irradbatchnum" /> </td>
<td> <input type="text" id="entrancetime" /> </td>
<td> <input type="text" id="spreadernum" /> </td>
<td> <crazy:dictselect id="loadmodel" name="loadmodel" collection="${loadmodel}" ></crazy:dictselect> </td>
<td> <input type="text" id="runparam" /> </td>
<td> <input type="text" id="runcycle" /> </td>
<td> <input type="text" id="changedesc" /> </td>
<td> <input type="text" id="nextcyclestarttime" /> </td>
<td> <input type="text" id="mask" /> </td>
</tr>
</table>
</div>
页面的按钮单击事件(业务就是一个编辑操作,根据Id得到一条信息,放到对话框里边,用户修改后保存活取消操作)触发弹框的代码如下(PS:黑体部分是弹框数据丢失的解决方案):
function goeditradiation(id,receivemgrid){
globalstillid = id+"-"+receivemgrid;
initradiation();
//使用jQuery的Dialog控件时,jQuery会将创建的dialog缓存到页面上,生成一些隐藏的div,当再次创建dialog时,由于id相同
//总会调用缓存中的Dialog,导致无法显示想要显示的内容。必须使用remove()才能彻底清除,同时把原div从dom树种移除,移除意
//味着弹出框只能弹出一次,为了解决此问题此处将当前的DIV克隆一份放在内存,当关闭对话框romove()之后再将克隆的div添加到
//dom树之中
**var dialogParent = $("#editradiationdiv").parent();
var dialogOwn = $("#editradiationdiv").clone();
dialogOwn.hide();**
//在此初始化(存在bug)
$("#editradiationdiv").dialog({
autoOpen : false,// 设置对话框打开的方式 不是自动打开
show : "bind",
hide : "explode",
modal : true,
height : 350,
width : 900,
title: "编辑",
buttons : {
'保存' : function() {
var irradednum= document.getElementById("irradednum").value;
var hiddenoldirradednum= document.getElementById("hiddenoldirradednum").value;
if(parseInt(irradednum) > parseInt(hiddenoldirradednum)){
alert("辐照数量不能超过已有货物数量!");
return;
}
if(!CommnUtil.validatetime($("#doirraddate").val())){
alert("日期格式错误!\n 格式:yyyy-mm-dd");
return;
}
if(CommnUtil.haveOneTagIsNull("doirraddate,ordernum,connecttime,firstspreadernum,irradbatchnum,entrancetime,spreadernum,runparam,runcycle,changedesc,nextcyclestarttime"))
{
alert("标红信息必须填写!");
return;
}
saveradiation();
$(this).dialog("close");
},
"取消" : function() {
$(this).dialog("close");
}
},
open : function(ev, ui) {
// CommnUtil.cleanInputValue("addcargoname,org,irradtype,irradtime,timeorg");
},
close : function(ev, ui) {
//将克隆的添加到dom之中,然后移除当前的div
**dialogOwn.appendTo(dialogParent);
$(this).dialog("destroy").remove();**
//CommnUtil.cleanInputValue("divcargoname,receiveorgid,irradednum,hiddenoldirradednum,showcountorginfos,cargoweight,irradtypes,irradtime,timeorgs");
}
});
$('#editradiationdiv').dialog('open');
}
其中initradiation();是从数据库得到数据然后吧数据塞到input标签里边:
function initradiation(){
var id = globalstillid.split("-")[0];
var data = CommnUtil.normalAjax("/business/receivingmana/goradiation.do","id="+id, "json");
if(CommnUtil.notNull(data)){
$("#receiveorgid").val(data.receiveorgid);
$("#divcargoname").val(data.cargoname);
$("#hiddencargoid").val(data.cargoid);
document.getElementById("irradednum").value=data.cargocount;
$("#hiddenoldirradednum").val(data.cargocount);//
$("#showcountorginfos").find("option[value='"+data.countorg+"']").attr("selected",true);
document.getElementById("cargoweight").value=data.cargoweight;
$("#irradtypes").find("option[value='"+data.irradtype+"']").attr("selected",true);
document.getElementById("irradtime").value=data.irradtime;
$("#timeorgs").find("option[value='"+data.irradtimeorg+"']").attr("selected",true);
}
}