本文探讨了JS框架中eval函数的使用限制及其在弹窗交互中的应用技巧，包括动态调用子页面函数的方法和主页面与子页面数据传递的过程。
今天潜心认真学习项目中的js框架，发现老李确实是个牛人，架构师就是架构师，确实是个JS牛人。
其中的
eval(String str)其中只能使用str字符串，不能使用对象。
eval("win._frame.contentWindow."+idMethod+"()"废话不多说，还是先上代码 shit
子页面代码如下：
t-qualification.vm
<head>
#import(["jquery","dwr","xTree"])
<script type="text/javascript" >
function initTreeStyle(){
tree.enableRadioButtons(true);
tree.enableSingleRadioMode(true, "0");
}
function initTreeData(){
tree.showItemCheckbox(null,1);
var children = tree.getAllItemsWithKids();
var items = children.split(",");
for(i=0;i<items.length;i++){
tree.showItemCheckbox(items[i],0);
}
tree.closeAllItems();
}
function getSelectedId(){
return jQuery("#selectedId").val();
}
function getSelectedName(){
return jQuery("#selectedName").val() + "-" + getSearchType();
}
function getSearchType(){
return jQuery(":radio:checked").val();
}
function setSelected(){
if(tree.getAllChecked()==""){
alert("请先选择");
return false;
}
var searchType = $(":radio:checked").val();
var id = tree.getAllChecked();
jQuery("#selectedId").val(id);
jQuery("#selectedName").val(tree.getItemText(id));
parent.dhxWins.window("gw").close();
}
function clearSelected(){
jQuery("#selectedId").val("");
jQuery("#selectedName").val("");
alert(parent.dhxWins.window("gw").getText());
parent.dhxWins.window("gw").close();
}
function searchTree(){
if(jQuery("#searchText").val()!=""){
var findItem = tree.findItemIdByLabel(jQuery("#searchText").val(),0,0);
if(findItem!=null){
tree.focusItem(findItem);
tree.selectItem(findItem,false,true);
}
}
}
$(function(){
var qualType = $("#qualType").val();
if(qualType == ""){
$("#selectTypeDiv").css("display","none");
}
});
</script>
</head>
<body>
<div id="div-content">
<input type="hidden" id="selectedId">
<input type="hidden" id="selectedName">
<input type="hidden" id="qualType" value=$!qualType >
<div style="margin:0 0 5px 10px;"><input type="text" id="searchText"><input type="button" class="operainput" value="搜索" onclick="searchTree()"/></div>
<div style="height:90%;" id="tree" name="tree" data="{xTree:{content:'dwr,getQualificationTree'}}" component="xTree"></div>
</div>
<div id="div-opera">
<input type="button" class="operainput" value="确定" onclick="setSelected()">
<input type="button" class="operainput" value="取消" onclick="clearSelected()">
</div>
</body>XTree.js
var parentId;
function xTree(source,metadata){
alert("XTREE");
var content = metadata.content.split(",");
if(content[0]=="dwr"){
parentId = source.attr("id");
if(!parentId){
parentId = "treebox_tree";
source.attr("id",parentId);
}
var params = "";
if(content.length>2){
for(i=2;i<content.length;i++){
params += "'"+content[i]+"',";
}
}
//调用dwr函数DWRService里面的方法
eval("_ajax."+content[1]+"("+params+"{callback:callbackFunc});");
}
}
//回调函数，处理xml展示的问题，注意，这里的回调是dwr的回调函数，为了显示树用的。呵呵
var tree;
function callbackFunc(xml){
alert(xml);
tree = new dhtmlXTreeObject(parentId, "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("/js/xTree/imgs/csh_yellowbooks/");
//tree.enableSmartCheckboxes(1);
try{
initTreeStyle();
}catch(e){
}
tree.loadXMLString(xml);
try{
initTreeData();
}catch(e){
}
}
主页面的代码如下
t-qualification-main-add.vm
<head>
#import(["jquery","validate","#component","xDate","upload","pickupWindows","dwr"])
<script type="text/javascript">
function saveSubmit(){
//校验附件
var attsList = document.getElementsByName('attachids');
if(attsList.length==0){
alert("请上传资格证书扫描件.");
return;
}
//提交
jQuery("#editForm").submit();
}
function addDetail(){
if("$!_M.mainId"==""){
alert("请先保存主项资质，然后再添加增项资质");
return;
}
document.location.href="$base/t-qualification-add!edit.do?mainId=$!_M.mainId&enterpriseId=$!_M.enterpriseId";
}
function setRange(id,name){
//设值
jQuery("#typeLevel").val(id);
var array = name.split("-");
jQuery("#qualificationMainName").val(array[0]);
//重置范围
var level = jQuery("#typeLevel").val();
if(level!=null&&level!=""){
//清空范围
jQuery("#businessRange").val('');
_ajax.getCQualification(level,{
callback:function(qual){
if(qual!=null){
jQuery("#businessRange").val(qual.scope == null? "":qual.scope);
}
}
});
}
}
var oldPauseReason = "$!_M.pauseReason";
jQuery(function(){
jQuery("#preview").click(function(){
window.open("/admin-qual-preview!preview.do?mainId=$!_M.mainId","代码证预览", "toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=no,status=no, width="+screen.availWidth+",height="+screen.availHeight);
});
//暂停业务模块，控制显示暂停原因问题
jQuery(":radio[name='_M.pause']").click( function() {
if(this.id == "pauseRadio"){
jQuery("#pauseReason").removeAttr("readonly").val(oldPauseReason);
}else {
jQuery("#pauseReason").val("").attr("readonly","readonly");
}
});
});
function getCertificateNoMessage(){
var message = "该证书在系统中已经存在!";
jQuery.ajax({
method:'post',
url:'$base/t-qualification-main!getCertificateNoMessage.do',
data:{
mainId:"$!_M.mainId",
certificateNo:jQuery("#certificateNo").val()
},
async:false,
success:function(response){
message = response;
},
error:function(data){
message = "该证书在系统中已经存在!";
}
});
return message;
}
</script>
</head>
<div id="div-title">
<div id="title"><span>主项资质</span></div>
</div>
<form id="editForm" name="editForm" action="${defaultSaveUri}" validate="true" method="post">
<input type="hidden" name="_M.enterpriseId" value="$!_M.enterpriseId">
<input type="hidden" name="enterpriseId" value="$!enterpriseId">
<input type="hidden" name="_M.mainId" value="$!_M.mainId">
<div id="div-content">
<table id="form-table" class="formtable" >
<tr>
<!--
<td class="nametd">行业类型</td>
<td>
<select name="_M.industryType" id="industryType" value="$_M.industryType" data="{v:{required:true}}">
<option value="$!tl.uuid">--请选择--</option>
#foreach($tl in $tradeList)
<option value="$!tl.uuid" #if($tl.uuid==$_M.industryType) selected='selected' #end>$!tl.name</option>
#end
</select>
</td>
-->
<td width="17%" class="nametd">资质类别及等级</td>
<td width="33%">
<input type="hidden" name="_M.typeLevel" id="typeLevel" value="$!_M.typeLevel" data="{v:{required:true}}"/>
<input type="text" id="qualificationMainName" value="$!qualification.name" component="pickupWindows"
data="{pickupWindows:{callbackFunc:'setRange',url:'${base}/pickup-windows!qualification.do',windowName:'资质类别及等级选择',targetId:'typeLevel',targetName:'qualificationMainName',width:'450'}}"/>
</td>
<td class="nametd">证书编号</td>
<td><input type="text" name="_M.certificateNo" id="certificateNo" value="$!_M.certificateNo"
data="{v:{required:true,maxlength:30,gboatremote:{url:'$base/t-qualification-main!checkCertificateNo.do?mainId=$!_M.mainId',noCheckValue:'$!_M.certificateNo',cache:false,messages:{gboatremote:getCertificateNoMessage}}}}"/></td>
</tr>
<tr>
<td class="nametd">发证机关</td>
<td><input type="text" name="_M.certificateIssuer" id="certificateIssuer" value="$!_M.certificateIssuer" data="{v:{required:true,maxlength:60}}"/></td>
<td class="nametd">发证时间</td>
<td><input type="text" name="_M.certificateDate" id="certificateDate" value="$!_M.certificateDate" data="{v:{required:true},xDate:{format:'yyyy-MM-dd'}}" component="xDate"/></td>
</tr>
<tr>
<td class="nametd">资质有效期始</td>
<td><input type="text" name="_M.validStartDate" id="validStartDate" value="$!_M.validStartDate" data="{v:{required:true},xDate:{format:'yyyy-MM-dd'}}" component="xDate"/></td>
<td class="nametd">资质有效期至</td>
<td colspan="3"><input type="text" name="_M.validDate" id="validDate" value="$!_M.validDate" data="{v:{required:true, compareDateGreater:['validStartDate','有效期至时间必须大于有效期始']},xDate:{format:'yyyy-MM-dd'}}" component="xDate"/></td>
</tr>
#if("$!role" == "E")
<tr>
<td class="nametd">资质状态</td>
<td colspan="3">
#if("$!_M.mainId" == "")
正常
#elseif("$!_M.pause" == "Y")
暂停资质
#if("$!_M.pauseReason" != "")
暂停原因：$!_M.pauseReason
#end
#elseif("$!_M.validDate"!="" && $date.toDate($date.systemDate).after($date.toDate($!_M.validDate)))
过期
##"2592000000"--指的是天数(30)对应的毫秒数
#elseif("$!_M.validDate"!="" && $date.toDate($date.systemDate).before($date.toDate($math.sub($!_M.validDate.getTime(), $!math.mul($!warn.enterQualDate, 86400000)))))
正常
#else
即将过期
#end
</td>
</tr>
#end
#if("$!role" == "E")
<input type="hidden" name="_M.pause" #if("$!_M.pause" == "") value="N" #elseif("$!_M.pause" != "") value="$!_M.pause" #end />
<input type="hidden" name="_M.pauseReason" value="$!_M.pauseReason" />
#end
#if($priority.havePriority($request,"$!{resourceCode}.stop_cert"))
<tr>
<td class="nametd">是否暂停业务</td>
<td colspan="3">
<input type="radio" name="_M.pause" #if("$!_M.pause" == "N" || "$!_M.pause" == "") checked #end value="N" style="width:20px;border-width:0px;vertical-align:middle" /> 否 <input id="pauseRadio" type="radio" name="_M.pause" value="Y" #if("$!_M.pause" == "Y") checked #end style="width:20px;border-width:0px;vertical-align:middle"/> 是
<br/>暂停原因：<br/>
<textarea name="_M.pauseReason" id="pauseReason" #if("$!_M.pause" == "N" || "$!_M.pause" == "") readonly #end data="{v:{maxlength:1000}}"/>$!_M.pauseReason</textarea>
</td>
</tr>
#end
<tr>
<td class="nametd">可承担业务范围</td>
<td colspan="3"><textarea name="_M.businessRange" id="businessRange" data="{v:{maxlength:1300}}">$!_M.businessRange</textarea></td>
</tr>
<tr>
<td class="nametd">资格证书扫描件<span style="color:red">*</span><br><input type="hidden" data="{v:{attachment:'资质证书'}}"/></td>
<td colspan="3">#attsvaild("editForm" $!atts)</td>
</tr>
</table>
<div class="listtitle">
<span class="right">
<a href="#" onclick="addDetail()">添加增项资质</a>
</span>
<h2>增项资质</h2>
</div>
<table id="list-table" class="listtable" border="0" rules="none">
<thead>
<tr>
<td>序号</td>
<td>资质类别及等级</td>
<td>操作</td>
</tr>
</thead>
#foreach($item in $adds)
<tr>
<td>$velocityCount</td>
<td>$!item.name</td>
<td>
<a id="editlink" class="operalink" href="$base/t-qualification-add!edit.do?SID=$item.addId&mainId=$item.mainId&enterpriseId=$!_M.enterpriseId" onclick="">编辑</a>
<a id="dellink" class="operalink" href="$base/t-qualification-add!delete.do?SID=$item.addId&mainId=$item.mainId&enterpriseId=$!_M.enterpriseId" onclick="">删除</a>
</td>
</tr>
#end
</table>
</div>
<div id="div-opera">
<input type="submit" class="operainput" id="saveBt" name="saveBt" value="保存" onclick=""/>
<input type="button" class="operainput" id="returnBt" name="returnBt" value="返回" onclick="#back("${defaultListUri}?enterpriseId=$!enterpriseId")"/>
#if("$!_M.mainId" != "")
<input type="button" class="operainput" id="preview" name="previewBt" value="#if("$!roleCode"=="E")查看#else审核#end" />
#end
</div>
</form>
pickupwindow.js
var dhxWins;
var message;
function showAlert(alertMessage){
message = alertMessage;
dhxWins = new dhtmlXWindows();
dhxWins.enableAutoViewport(true);
dhxWins.attachViewportTo("winVP");
dhxWins.setImagePath("imgs/");
dhxWins.setEffect("maximize", false);
dhxWins.attachEvent("onContentLoaded",doOnContentLoader);
gw = dhxWins.createWindow("gw", 0, 0, 450, 300);
gw.setText("系统信息");
gw.setModal(false);
gw.centerOnScreen();
gw.attachURL("./alertWindow.html");
}
function doOnContentLoader(win){
//alert(win);
win._frame.contentWindow.showAlertMessage(message);
}
//这是核心的显示程序，所有的弹出页面都是这个函数实现的
function showModalWindow(windowName,url,callback,width,height){
if(url.indexOf("rdm=")==-1){
if(url.indexOf("?")==-1){
url += "?rdm="+Math.random();
}else{
url += "&rdm="+Math.random();
}
}
dhxWins = new dhtmlXWindows();
dhxWins.enableAutoViewport(true);
dhxWins.attachViewportTo("div-content");
dhxWins.setImagePath("/comp/xWindows/imgs/");
if(callback==undefined||callback==""){
callback = defaultCallback;
}
dhxWins.attachEvent("onClose",callback);//定义弹出窗口关闭时的回调函数，首先会调用最下面的那个函数callbackFunc(win)
dhxWins.setEffect("resize", false);
dhxWins.setEffect("max", false);
maxwidth = jQuery(document).width();
if(width==undefined||width==""||maxwidth<width){
width = maxwidth;
}
maxheight = jQuery(document).height();
if(height==undefined||height==""||maxheight<height){
height = maxheight;
}
//定义窗口的名字
gw = dhxWins.createWindow("gw", 0, 0, width, height,{});
gw.setText(windowName);
gw.setModal(true);
gw.denyMove();
gw.centerOnScreen();
gw.attachURL(url);
gw.button("minmax1").hide();
return gw;
//alert(win._frame);
}
//主要还是间接的调用了上面的核心函数showModalWindow
function showWindowOnTop(window,url,callback,width,height){
if(callback=="")
callback="''";
if(typeof(top.showModalWindowOnTop)=="function"){
eval("top.showModalWindowOnTop('"+window+"','"+url+"',"+callback+",'"+width+"','"+height+"');");
}else{
eval("showModalWindow('"+window+"','"+url+"',"+callback+",'"+width+"','"+height+"');");
}
}
//默认的回调函数的写法，其中的return true表明窗口关闭，只要return true 则弹出窗口就能够自动关闭
function defaultCallback(){
return true;
}
function closeModalWindow(o){
if(o){
o.dhxWins.window("gw").close();
}else{
parent.dhxWins.window("gw").close();
}
}
//这是弹出框的前期操作准备，尤其去调用下面的的showWindowInPickupWindow
var md;
function pickupWindows(source,metadata){
var url = metadata.url;
if(!url){
showAlert("未设置打开的连接");
return;
}
var windowName = metadata.windowName;
if(!windowName){
windowName = "请选择";
}
var width = metadata.width;
if(!width){
width = 600;
}else if(width=="max"){
width = jQuery(document).width();
}
var height = metadata.height;
var maxheight = jQuery(document).height();
if(!height){
if(maxheight>500){
height = 500;
}else{
height = maxheight;
}
}else if(height=="max"){
height = maxheight;
}else if(height>maxheight){
height = maxheight;
}
var randId = Math.round(Math.random()*10000)+"";
//存放数据，建立一个唯一的id，以便右面的默认的callbackFun的调用，呵呵，终于明白了。
jQuery(document).data(randId,metadata);//此处是设置值，把主页面的值如targetId,targetName,callbackFun等等的值都放到里面
md = metadata;
//alert(source.attr("tagName")+","+source.attr("type"));
if((source.attr("tagName")=="INPUT"&&source.attr("type")=="text")||source.attr("tagName")=="TEXTAREA"){
source.after("<input type=\"button\" class=\"showinput\" value=\"...\" onclick=\"showWindowInPickupWindow('"+randId+"','"
+windowName+"','"+url+"',"+width+","+height+")\">");
if(metadata.targetName){
jQuery("#"+metadata.targetName).attr("readonly",true);
}
}else if(source.attr("tagName")=="INPUT"&&source.attr("type")=="button"){
source.bind("click",function(event){
showWindowInPickupWindow(randId,windowName,url,width,height);
});
}else if(source.attr("tagName")=="A"){
source.attr("href","#");
source.bind("click",function(event){
showWindowInPickupWindow(randId,windowName,url,width,height);
});
}
}
function showWindowInPickupWindow(id,windowName,url,width,height){
//读取弹出页面的参数
var params = "";
try{
params = getParamsForPickupWindow();
}catch(e){
}
if(params.length>0){
if(url.indexOf("?")==-1){
url += "?"+params;
}else{
url += "&"+params;
}
}
var modWindow = showModalWindow(windowName+"-"+id,url,callbackFunc,width,height);
}
//很专业，只要是窗口关闭都会自动触发这个函数。所以很重要
function callbackFunc(win){
alert("call back windows");
var splited = win.getText().split("-");//这个是在构建模态窗口的时候设值进去的
alert(splited);
if(splited.length>0){
//获取之前放入的metadata对象，splited[splited.length-1]则是pickupwindows中的randId，根据这个ID获取metadata的对象数组。
md = jQuery(document).data(splited[splited.length-1]);
}
//前面三个都是能够获取到值得，后面两个是undifined，但是后面会给它设置值的。
alert(md.callbackFunc+","+md.targetId+","+md.targetName+","+md.selectIdMethod+","+md.selectNameMethod);
if(!md.callbackFunc&&(!md.targetId||!md.targetName)){//这三个值必须从原先的主页面带过来，要不然无法设值。
alert("系统错误,请和管理员联系!");
}else{
var idMethod = "getSelectedId";
if(md.selectIdMethod){
idMethod = md.selectIdMethod;
}
var nameMethod = "getSelectedName";
if(md.selectNameMethod){
nameMethod = md.selectNameMethod;
}
var selectedId="",selectedName="";
try{
//动态调用子页面上的函数
selectedId = eval("win._frame.contentWindow."+idMethod+"()");
//alert("id selected : "+selectedId);
}catch(e){
}
try{
//动态调用子页面上的函数
selectedName = eval("win._frame.contentWindow."+nameMethod+"()");
//alert("name selected : "+selectedName);
}catch(e){}
//调用主页面上的回调函数
if(md.callbackFunc){
eval(md.callbackFunc+"('"+selectedId+"','"+selectedName+"');");
}else{
settedId = document.getElementById(md.targetId);
settedName = document.getElementById(md.targetName);
if(!settedId){
alert("ID["+md.targetId+"]不存在,无法设值!");
}else{
jQuery("#"+md.targetId).val(selectedId);
}
if(!settedName){
alert("NAME["+md.targetName+"]不存在,无法设值!");
}else{
var tagtype = jQuery("#"+md.targetName).attr("tagName");
if(tagtype=="INPUT"||tagtype=="textarea"){
jQuery("#"+md.targetName).val(selectedName);
}else{
jQuery("#"+md.targetName).text(selectedName);
}
}
}
//alert(selectedId+" --> "+selectedName);
}
return true;//只有return true 才能关闭这个弹出窗口
}
扫一扫
2997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
