前言
现在项目中，由于本人负责的模块为：“资源目录” ，功能清单如下，而此篇文章的功能描述在于“在线编目”里面实现中。业务和整体的实现逻辑就不多说了，挺多的！这里只是围绕具体的增加、删除行剖析即可。
--------功能列表--------
资源目录管理
资源目录管理-在线编目
资源目录管理-资源审核
资源目录管理-资源目录检索
资源目录共享
资源目录共享-资源申请
资源目录共享-资源审核
资源目录共享-资源获取
功能实现
实现的jsp代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<base target="_self">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/common/meta.jsp"/>
<link href="${ctx}/skins/blue/css/sjsjzx.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx }/tiles/scripts/jquery-1.8.0.min.js"></script>
<!-- 表单验证组件 -->
<script type="text/javascript" src="${ctx}/tiles/Validform/js/Validform_v5.3.2.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/tiles/Validform/css/style.css"/>
<title>在线编目</title>
<style type="text/css">
.button{
position: relative;
overflow: visible;
display: inline-block;
padding: 0.5em 1em;
border: 1px solid #6495ED;
margin: 0;
width:120px;
text-decoration: none;
text-shadow: 1px 1px 0 #fff;
font-family:"Microsoft YaHei", "微软雅黑", "宋体", Arial, Helvetica, sans-serif;
font-size: 16px;
color: #333;
font-weight:bold;
white-space: nowrap;
cursor: pointer;
outline: none;
background-color: #fff;
-webkit-background-clip: padding;
-moz-background-clip: padding;
-o-background-clip: padding-box;
/*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
/* IE hacks */
zoom: 1;
*display: inline;
}
.dfinput{width:345px; height:25px; line-height:25px; border-top:solid 1px #a7b5bc; border-left:solid 1px #a7b5bc; border-right:solid 1px #ced9df; border-bottom:solid 1px #ced9df; background:url(../images/inputbg.gif) repeat-x; text-indent:10px;}
</style>
<script type="text/javascript">
function dosubmit(){
if($('#resourceName').val()==''){
alert("请输入资源目录名称！");
return;
}
if($('#infoSysName').val()==''){
alert("请输入信息系统名称！");
return;
}
if($('#sysAbstract').val()==''){
alert("请输入信息系统简介！");
return;
}
if($('#provideDepartment').val()==''){
alert("请输入提供科室！");
return;
}
if($('#keyWord').val()==''){
alert("请输入检索关键字！");
return;
}
if($('#busLinkman').val()==''){
alert("请输入业务联系人姓名！");
return;
}
if($('#busLinkmanPhone').val()==''){
alert("请输入业务联系人电话！");
return;
}
if($('#jointLinkman').val()==''){
alert("请输入对接联系人姓名！");
return;
}
if($('#jointLinkmanPhone').val()==''){
alert("请输入对接联系人电话！");
return;
}
if($('#jointType').val()==''){
alert("请输入对接方式！");
return;
}
if($('#shareProperty').val()==''){
alert("请选择共享属性！");
return;
}
if($('#openProperty').val()==''){
alert("请选择公开属性！");
return;
}
if($('#updateRate').val()==''){
alert("请输入更新频度！");
return;
}
if($('#resourceType').val()==''){
alert("请选择资源类型！");
return;
}
//校验资源项信息
$('#resourceList').find("input").each(function(){
var thisId = $(this).attr("id");
alert(thisId.val());
if(thisId.val() == ""){
alert("资源项属性不能为空！");
return;
}
});
if(confirm("确定要保存吗？")){
$("#mainForm").submit();
}
}
</script>
</head>
<body>
<p style="text-align:center;font-size:20px;padding-bottom: 15px;padding-top: 10px;"><b>在线编目</b></p>
<form id="mainForm" name="mainForm" action="${ctx }/zymlgl/saveBm" method="post" >
<input type="hidden" id="" name="resources.resourceId" value="${obj.resources.resourceId}">
<input type="hidden" id="" name="dept" value="${obj.dept}">
<table width="90%" class="table_multilist" align="center">
<tr>
<td width="15%" class="label_1">资源目录名称</td>
<td width="85%" colspan="6" class="label_2">
<input type="text" class="dfinput" style="width:98%" id="resourceName" name="resources.resourceName" value="${obj.resources.resourceName}" datatype="*1-200" nullmsg="请输入url！" errormsg="请输入少于200个汉字！"/>
</td >
</tr>
<tr>
<td width="15%" class="label_1">摘要</td>
<td width="85%" colspan="6" class="label_2">
<input type="text" class="dfinput" style="width:98%" id="abstractWord" name="resources.abstractWord" value="${obj.resources.abstractWord}" datatype="*1-200" nullmsg="请输入url！" errormsg="请输入少于200个汉字！"/>
</td >
</tr>
<tr>
<td width="15%" class="label_1">信息系统名称</td>
<td width="85%" colspan="6" class="label_2">
<input type="text" class="dfinput" style="width:98%" id="infoSysName" name="resources.infoSysName" value="${obj.resources.infoSysName}" datatype="*1-200" nullmsg="请输入url！" errormsg="请输入少于200个汉字！"/>
</td >
</tr>
<tr>
<td width="15%" class="label_1">系统简介</td>
<td width="85%" colspan="6" class="label_2">
<input type="text" class="dfinput" style="width:98%" id="sysAbstract" name="resources.sysAbstract" value="${obj.resources.sysAbstract}" datatype="*1-200" nullmsg="请输入url！" errormsg="请输入少于200个汉字！"/>
</td >
</tr>
<tr>
<td width="15%" class="label_1">信息系统链接</td>
<td width="85%" colspan="6" class="label_2">
<input type="text" class="dfinput" style="width:98%" id="sysUrl" name="resources.sysUrl" value="${obj.resources.sysUrl}" datatype="*1-200" nullmsg="请输入url！" errormsg="请输入少于200个汉字！"/>
</td >
</tr>
<tr>
<td width="15%" class="label_1">检索关键字</td>
<td width="85%" colspan="6" class="label_2">
<input type="text" class="dfinput" style="width:98%" id="keyWord" name="resources.keyWord" value="${obj.resources.keyWord}" datatype="*1-200" nullmsg="请输入url！" errormsg="请输入少于200个汉字！"/>
</td >
</tr>
<tr>
<td width="15%" class="label_1">提供科室</td>
<td width="85%" colspan="6" class="label_2">
<input type="text" class="dfinput" style="width:98%" id="keyWord" name="resources.provideDepartment" value="${obj.resources.provideDepartment}" datatype="*1-200" nullmsg="请输入url！" errormsg="请输入少于200个汉字！"/>
</td>
</tr>
<tr>
<td class="label_1">业务联系人</td>
<td width="35%" class="label_2" colspan="2">
<input type="text" class="dfinput" style="width:95%" id="busLinkman" name="resources.busLinkman" value="${obj.resources.busLinkman}" datatype="*1-50" nullmsg="请输入返回参数！" errormsg="请输入少于50个汉字！"/>
</td>
<td width="15%" class="label_1">联系电话</td>
<td width="35%" class="label_2" colspan="3">
<input type="text" class="dfinput" style="width:95%" id="busLinkmanPhone" name="resources.busLinkmanPhone" value="${obj.resources.busLinkmanPhone}" datatype="*1-50" nullmsg="请输入返回参数！" errormsg="请输入少于50个汉字！"/>
</td>
</tr>
<tr>
<td class="label_1">对接联系人</td>
<td width="35%" class="label_2" colspan="2">
<input type="text" class="dfinput" style="width:95%" id="jointLinkman" name="resources.jointLinkman" value="${obj.resources.jointLinkman}" datatype="*1-50" nullmsg="请输入返回参数！" errormsg="请输入少于50个汉字！"/>
</td>
<td width="15%" class="label_1">联系电话</td>
<td width="35%" class="label_2" colspan="3">
<input type="text" class="dfinput" style="width:95%" id="jointLinkmanPhone" name="resources.jointLinkmanPhone" value="${obj.resources.jointLinkmanPhone}" datatype="*1-50" nullmsg="请输入返回参数！" errormsg="请输入少于50个汉字！"/>
</td>
</tr>
<tr>
<td class="label_1">对接方式</td>
<td width="35%" class="label_2" colspan="2">
<wd:select name="resources.jointType" id="jointType" dicCode="1064" initValue="---请选择---" className="selectInput" style="width:175px;height:25px;" defaultValue="${obj.resources.jointType}"/>
</td>
<td width="15%" class="label_1">资源更新频度</td>
<td width="35%" class="label_2" colspan="3">
<wd:select name="resources.updateRate" id="updateRate" dicCode="1063" initValue="---请选择---" className="selectInput" style="width:175px;height:25px;" defaultValue="${obj.resources.updateRate}"/>
</td>
</tr>
<tr>
<td class="label_1">资源共享属性</td>
<td width="35%" class="label_2" colspan="2">
<wd:select name="resources.shareProperty" id="shareProperty" dicCode="1056" initValue="---请选择---" className="selectInput" style="width:175px;height:25px;" defaultValue="${obj.resources.shareProperty}"/>
</td>
<td width="15%" class="label_1">资源公开属性</td>
<td width="35%" class="label_2" colspan="3">
<wd:select name="resources.openProperty" id="openProperty" dicCode="1057" initValue="---请选择---" className="selectInput" style="width:175px;height:25px;" defaultValue="${obj.resources.openProperty}"/>
</td>
</tr>
<tr>
<td class="label_1">所属资源类型</td>
<td width="35%" class="label_2" colspan="2">
<wd:select name="resources.resourceType" id="resourceType" dicCode="1054" initValue="---请选择---" className="selectInput" style="width:175px;height:25px;" defaultValue="${obj.resources.resourceType}"/>
</td>
<td width="15%" class="label_1">数据库表名</td>
<td width="35%" class="label_2" colspan="3">
<input type="text" class="dfinput" style="width:95%" id="tableName" name="resources.tableName" value="${obj.resources.tableName}" datatype="*1-50" nullmsg="请输入返回参数！" errormsg="请输入少于20个字符！"/>
</td>
</tr>
</table><br>
<!-- 资源项 -->
<table width="90%" class="table_multilist" align="center" id="maintable">
<tr>
<td class="label_1" width="12%" style="text-align: center;">资源项名称</td>
<td class="label_1" width="12%" style="text-align: center;">数据库字段名</td>
<td class="label_1" width="10%" style="text-align: center;">数据类型</td>
<td class="label_1" width="15%" style="text-align: center;">备注</td>
<td class="label_1" width="10%" style="text-align: center;">共享属性</td>
<td class="label_1" width="15%" style="text-align: center;">不予共享理由</td>
<td class="label_1" width="10%" style="text-align: center;">公开属性</td>
<td class="label_1" width="15%" style="text-align: center;">不予公开理由</td>
<td class="label_1" width="5%" align="left"><input type="button" value="+" onclick="addRow()"/></td>
</tr>
<!-- 克隆模板 -->
<tr id="branchTr" style="display:none;">
<td class="label_2" width="12%" style="text-align: center;">
<input type="text" class="dfinput" style="width:90%" id="dataItemName_0" name="resourceDetailList[0].dataItemName" value="${resource.dataItemName}"/>
</td>
<td class="label_2" width="12%" style="text-align: center;">
<input type="text" class="dfinput" style="width:90%" id="fieldCode_0" name="resourceDetailList[0].fieldCode" value="${resource.fieldCode}"/>
</td>
<td class="label_2" width="10%" style="text-align: center;">
<wd:select name="resourceDetailList[0].dataItemType" id="dataItemType_0" dicCode="1055" initValue="--请选择--" className="selectInput" style="width:98%" defaultValue="${resource.dataItemType}"/>
</td>
<td class="label_2" width="15%" style="text-align: center;"><input type="text" class="dfinput" style="width:90%" id="memo" name="resourceDetailList[0].memo" value="${resource.memo}"/></td>
<td class="label_2" width="12%" style="text-align: center;">
<wd:select name="resourceDetailList[0].shareProperty" id="shareProperty_0" dicCode="1056" initValue="--请选择--" className="selectInput" style="width:98%" defaultValue="${resource.shareProperty}"/>
</td>
<td class="label_2" width="15%" style="text-align: center;">
<input type="text" class="dfinput" style="width:90%" id="noShareReason_0" name="resourceDetailList[0].noShareReason" value="${resource.noShareReason}"/>
</td>
<td class="label_2" width="12%" style="text-align: center;">
<wd:select name="resourceDetailList[0].openProperty" id="openProperty_0" dicCode="1057" initValue="--请选择--" className="selectInput" style="width:98%" defaultValue="${resource.openProperty}"/>
</td>
<td class="label_2" width="15%" style="text-align: center;">
<input type="text" class="dfinput" style="width:90%" id="noOpenReason_0" name="resourceDetailList[0].noOpenReason" value="${resource.noOpenReason}"/>
</td>
<td class="label_2" width="5%" style="text-align: center;"><input type="button" value="删除" onclick="deleteRow(this)"/></td>
</tr>
<c:forEach items="${obj.resourceDetailList}" var="resource" varStatus="row">
<tr>
<td class="label_2" width="12%" style="text-align: center;">
<input type="text" class="dfinput" style="width:90%" id="dataItemName_0" name="resourceDetailList[${row.index+1}].dataItemName" value="${resource.dataItemName}"/>
</td>
<td class="label_2" width="12%" style="text-align: center;">
<input type="text" class="dfinput" style="width:90%" id="fieldCode_0" name="resourceDetailList[${row.index+1}].fieldCode" value="${resource.fieldCode}"/>
</td>
<td class="label_2" width="10%" style="text-align: center;">
<wd:select name="resourceDetailList[${row.index+1}].dataItemType" id="dataItemType_0" dicCode="1055" initValue="---请选择---" className="selectInput" style="width:98%" defaultValue="${resource.dataItemType}"/>
</td>
<td class="label_2" width="15%" style="text-align: center;"><input type="text" class="dfinput" style="width:90%" id="memo_0" name="resourceDetailList[${row.index+1}].memo" value="${resource.memo}"/></td>
<td class="label_2" width="12%" style="text-align: center;">
<wd:select name="resourceDetailList[${row.index+1}].shareProperty" id="shareProperty_0" dicCode="1056" initValue="---请选择---" className="selectInput" style="width:98%" defaultValue="${resource.shareProperty}"/>
</td>
<td class="label_2" width="15%" style="text-align: center;">
<input type="text" class="dfinput" style="width:90%" id="noShareReason_0" name="resourceDetailList[${row.index+1}].noShareReason" value="${resource.noShareReason}"/>
</td>
<td class="label_2" width="12%" style="text-align: center;">
<wd:select name="resourceDetailList[${row.index+1}].openProperty" id="openProperty_0" dicCode="1057" initValue="---请选择---" className="selectInput" style="width:98%" defaultValue="${resource.openProperty}"/>
</td>
<td class="label_2" width="15%" style="text-align: center;">
<input type="text" class="dfinput" style="width:90%" id="noOpenReason_0" name="resourceDetailList[${row.index+1}].noOpenReason" value="${resource.noOpenReason}"/>
</td>
<td class="label_2" width="5%" style="text-align: center;">
<input type="hidden" name="resourceDetailList[${row.index+1}].detailsId" value="${resource.detailsId}"/>
<input type="button" value="删除" onclick="deleteRow(this)"/>
</td>
</tr>
</c:forEach>
</table>
<div style="text-align: center;margin-top: 20px;padding-bottom: 10px">
<input type="button" id="button" class="button" value="保存修改" onclick="dosubmit();" />
</div>
</form>
<script>
var index = ${fn:length(obj.resourceDetailList)};
function addRow(obj) {
index++;
var listName = "resourceDetailList[0]";
var cloneTr = $("#branchTr").clone();
$(cloneTr).show();
$(cloneTr).attr("id",$("#branchTr").attr("id")+"_"+index);
$(cloneTr).find("input").each(function(){
var thisName = $(this).attr("name");
var thisId = $(this).attr("id");
if(thisName){
if(thisName.indexOf(listName) != -1){
$(this).attr("name",thisName.replace(listName,"resourceDetailList["+ index + "]"));
}
}
if(thisId){
$(this).attr("id",thisId.replace("_0","_"+index));
}
});
$(cloneTr).find("select").each(function(){
var thisName = $(this).attr("name");
var thisId = $(this).attr("id");
if(thisName){
if(thisName.indexOf(listName) != -1){
$(this).attr("name",thisName.replace(listName,"resourceDetailList["+ index + "]"));
}
}
if(thisId){
$(this).attr("id",thisId.replace("_0","_"+index));
}
});
$(cloneTr).appendTo($("#maintable"));
}
function deleteRow(obj) {
if(confirm("确定删除吗？")){
$(obj).parent().parent().remove();
}
}
</script>
</body>
</html>
增加行采用克隆方式，在后台接收值的方法如下：
public View saveBm(@Param("::resources") Resource resources, @Param("::resourceDetailList") List<ResourceDetails> resourceDetailList,String dept, HttpServletRequest request)
此接收方式的写法看着不一样吧，用惯了SSH或SSM框架感觉不一样，这里用的是Nutz框架；如果是SSH或SSM框架，接收时写个List<ResourceDetails>，然后get()，set()就可以了。
增加行、删除行效果如下：
编辑同样效果如下：
时间： 2024-08-06 01:52:59