|
楼主 |
发表于 2017-7-20 16:47:54
|
显示全部楼层
已找到了解决方案,在此记录一下,同时分享给需要的朋友:
方案是引用了第三方的弹出框 js框架:artDialog,这里需要下载3个文件:dialog-plus-min.js、ui-dialog.cs和common-artdiag.js。
父窗口的js中添加一个弹出框的函数:function editList(self){
var val = $(self).attr("value");
//console.info("val:"+val);
var add_from = dialog({
title: '编辑',
content: getDivByUrl("attributeInfoController.do?editListPage&val="+val),
width:"300px",
height:"250px",
lock:true,
modal:true,
okValue: '确 定',
ok:function(){
var trList = $("#editListTable tr");
var returnedVal = "";
if(trList.length>1){
for(var i=1;i<trList.length;i++){
returnedVal+=$("#editListTable tr").find('input[name="paramList['+(i-1)+']"]').val()+",";
}
returnedVal = returnedVal.substring(0,returnedVal.length-1);
}
$.trim(returnedVal);
$(self).attr("value",returnedVal);
},
cancelValue: '取消',
cancel: function () {
this.title('已经取消..',1);
}
});
add_from.show();
};
这里ok按钮执行的function可以用于将值回填到父页面的标签。子页面借用了jeecg一对多 no tag那个页面,子表的增删改查代码
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link id="easyuiTheme" rel="stylesheet" href="plug-in/easyui/themes/default/easyui.css" type="text/css" />
<link rel="stylesheet" href="plug-in/easyui/themes/icon.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="plug-in/accordion/css/accordion.css">
<link rel="stylesheet" href="plug-in/Validform/css/style.css" type="text/css" />
<link rel="stylesheet" href="plug-in/Validform/css/tablefrom.css" type="text/css" />
<script type="text/javascript" src="plug-in/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="plug-in/tools/dataformat.js"></script>
<script type="text/javascript" src="plug-in/easyui/jquery.easyui.min.1.3.2.js"></script>
<script type="text/javascript" src="plug-in/easyui/locale/zh-cn.js"></script>
<script type="text/javascript" src="plug-in/tools/syUtil.js"></script>
<script type="text/javascript" src="plug-in/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="plug-in/lhgDialog/lhgdialog.min.js"></script>
<script type="text/javascript" src="plug-in/tools/easyuiextend.js"></script>
<script type="text/javascript" src="plug-in/Validform/js/Validform_v5.3.1_min_zh-cn.js"></script>
<script type="text/javascript" src="plug-in/Validform/js/Validform_Datatype_zh-cn.js"></script>
<script type="text/javascript" src="plug-in/Validform/js/datatype_zh-cn.js"></script>
<script type="text/javascript">
function resetTrNum(tableId) {
$tbody = $("#" + tableId + "");
$tbody.find('>tr').each(function(i){
$(':input, select', this).each(function() {
var $this = $(this), name = $this.attr('name'), val = $this.val();
if (name != null) {
if (name.indexOf("#index#") >= 0) {
$this.attr("name",name.replace('#index#',i));
} else {
var s = name.indexOf("[");
var e = name.indexOf("]");
var new_name = name.substring(s + 1,e);
$this.attr("name",name.replace(new_name,i));
}
}
});
});
}
$(function() {
$('#addBtn').linkbutton({
iconCls: 'icon-add'
});
$('#delBtn').linkbutton({
iconCls: 'icon-remove'
});
$('#addBtn').bind('click', function(){
var tr = $("#add_param_table_template tr").clone();
$("#add_param_table").append(tr);
resetTrNum('add_param_table');
});
$('#delBtn').bind('click', function(){
$("#add_param_table").find("input:checked").parent().parent().remove();
resetTrNum('add_param_table');
});
});
</script>
</head>
<body>
<div style="padding: 3px; height: 25px; width: auto;" class="datagrid-toolbar"><a id="addBtn" href="#">添加</a> <a id="delBtn" href="#">删除</a></div>
<table border="0" cellpadding="2" cellspacing="0" id="editListTable">
<tr bgcolor="#E6E6E6">
<td align="center" bgcolor="#EEEEEE">序号</td>
<td align="left" bgcolor="#EEEEEE">VALUE</td>
</tr>
<tbody id="add_param_table">
<c:choose>
<c:when test="${fn:length(paramList) <= 0 }">
<tr>
<td align="center"><input style="width: 20px;" type="checkbox" name="ck" /></td>
<td align="left"><input nullmsg="请输入VALUE!" name="paramList[0]" maxlength="10" type="text" value=""></td>
</tr>
</c:when>
<ctherwise>
<c:forEach items="${paramList}" var="poVal" varStatus="stuts">
<tr>
<td align="center"><input style="width: 20px;" type="checkbox" name="ck" /></td>
<td align="left"><input nullmsg="请输入VALUE!" name="paramList[${stuts.index }]" maxlength="10" type="text"
value="${poVal}"></td>
</tr>
</c:forEach>
</ctherwise>
</c:choose>
</tbody>
</table>
<table style="display: none">
<tbody id="add_param_table_template">
<tr>
<td align="center"><input style="width: 20px;" type="checkbox" name="ck" /></td>
<td align="left"><input nullmsg="请输入VALUE!" name="paramList[#index#]" maxlength="10" type="text"></td>
</tr>
</tbody>
</table>
</body>
</html> |
|