首页 > 代码库 > 初出茅庐之第一个项目历程（三）
初出茅庐之第一个项目历程（三）
上次说到当前台页面需要加载多个数据类，而前台页面只有一直一个form表单，那我们该如何进行数据回显。
为了解决这个问题，小组成员就讨论能不能把数据返回给页面而不是返回给表单，于是就有了以layer（web弹层组件）进行多个表单提交，多个表单数据回显的开发模式。
来看看原先前台页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="http://www.mamicode.com/">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11" />
<link href="http://www.mamicode.com/static/css/main.css" rel="stylesheet" />
<link href="http://www.mamicode.com/static/lib/css/bootstrap.min.css" rel="stylesheet">
<link href="http://www.mamicode.com/static/lib/css/bootstrap-table.css" rel="stylesheet">
<link href="http://www.mamicode.com/static/lib/css/font-awesome.min.css" rel="stylesheet">
<link href="http://www.mamicode.com/static/lib/css/components.min.css" rel="stylesheet">
<link href="http://www.mamicode.com/static/lib/css/layout.min.css" rel="stylesheet" />
<link href="http://www.mamicode.com/static/lib/css/bootstrap-modal-bs3patch.css"
rel="stylesheet">
<link href="http://www.mamicode.com/static/lib/css/bootstrap-modal.css" rel="stylesheet">
<link href="http://www.mamicode.com/static/lib/css/toastr.min.css" rel="stylesheet">
<script src="http://www.mamicode.com/static/lib/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="http://www.mamicode.com/static/lib/js/bootstrap.min.js"></script>
<script src="http://www.mamicode.com/static/lib/js/bootstrap-table.js"></script>
<script src="http://www.mamicode.com/static/lib/js/bootstrap-table-zh-CN.js"></script>
<script src="http://www.mamicode.com/static/lib/js/bootstrap-modalmanager.js"></script>
<script src="http://www.mamicode.com/static/lib/js/bootstrap-modal.js"></script>
<script src="http://www.mamicode.com/static/js/common.js"></script>
<script src="http://www.mamicode.com/static/lib/js/toastr.min.js"></script>
<script src="http://www.mamicode.com/static/lib/js/bootbox.min.js"></script>
<script src="http://www.mamicode.com/static/lib/commons-time.js"></script>
<script src="http://www.mamicode.com/static/lib/commons-utils.js"></script>
<script src="http://www.mamicode.com/static/js/house/housebuild.js"></script>
</head>
<body>
<div class="page-bar">
<ul class="page-breadcrumb">
<li><a href="http://www.mamicode.com/index.html"></a></li>
<li><span>楼栋数据</span></li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<!-- BEGIN EXAMPLE TABLE PORTLET-->
<div class="tabbable-line boxless tabbable-reversed">
<ul class="nav nav-tabs" id="myTab">
<li onclick="javascript:location.href=http://www.mamicode.com/‘housebase/topage.do‘">
<a href="http://www.mamicode.com/#tab_0" data-toggle="tab">房屋基本信息 </a>
</li>
<li onclick="javascript:location.href=http://www.mamicode.com/‘houseRent/topage.do‘" >
<a href="http://www.mamicode.com/#tab_1" data-toggle="tab">房屋出租信息 </a>
</li>
<li class="active" >
<a href="http://www.mamicode.com/#tab_1" data-toggle="tab">房屋楼栋信息 </a>
</li>
<li onclick="javascript:location.href=http://www.mamicode.com/‘gis/tohousegis.do‘">
<a href="http://www.mamicode.com/#tab_1" data-toggle="tab">房屋空间信息 </a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab_0"></div>
<div class="tab-pane active" id="tab_1">
<div id="toolbar" class="btn-group toolbar">
<button type="button" onclick="" class="btn green btn-outline"
data-toggle="modal" data-target="#addmodal">
<i class="fa fa-plus"></i> 新 增
</button>
<button type="button" onclick="updateRow()"
class="btn modify btn-outline" style="margin-left:10px;">
<i class="fa fa-edit"></i> 修 改
</button>
<button type="button" onclick="deleteRow()"
class="btn delete btn-outline" style="margin-left:10px;">
<i class="fa fa-trash-o"></i> 删 除
</button>
</div>
<table id="housebuild" class="table table-hover active"></table>
</div>
<div id="addmodal" class="modal fade" tabindex="-1" data-width="1000">
<form class="form-horizontal" action="housebuild/addBuild.do" method="post" id="addmodal">
<div class="modal-header">
<button type="button" class="close df-hidemodel" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel"
style="text-align:left !important;">楼栋信息</h4>
</div>
<div class="modal-body">
<h4 class="modal-title" style="text-align:left !important;">楼栋基本信息</h4>
<div class="form-group">
<label class="col-sm-2 control-label" for="bnumber">建筑编号</label>
<div class="col-md-4">
<input class="form-control" id="bnumber"
name="bnumber" type="text" placeholder="" required />
</div>
<label class="col-sm-2 control-label" for="name">建筑名称</label>
<div class="col-md-4">
<input class="form-control" id="name"
name="bname" type="text" placeholder="楼栋名称" required />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="buildx">楼栋横坐标</label>
<div class="col-sm-4">
<input class="form-control" id="buildx" name="buildx"
type="text" placeholder="" required />
</div>
<label class="col-sm-2 control-label" for="buildy">楼栋纵坐标</label>
<div class="col-sm-4">
<input class="form-control" id="buildy" name="buildy"
type="text" required />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="spaceid">空间坐标</label>
<div class="col-sm-4">
<input class="form-control" id="spaceid" name="spaceid"
type="text" placeholder="" required />
</div>
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> -->
<button type="submit" class="btn btn-primary">保存更改</button>
</div>
</form>
</div>
<!-- END EXAMPLE TABLE PORTLET-->
</div>
</div>
</div>
</div>
</body>
</html>
在这个jsp里面
我们可以看到，这个页面中包含了model以及form，如果要换成layer弹出框，那么我们就需要把model跟form单独择开来
这里我就以housebase举例
加入layer的js
点击新增
showmodel()对应的js
function showmodel(){
$.post(‘housebase/addoreditpage.do‘, {dTypeCode:"19,26,32,33,30,9"}, function(str){
layer.open({
title: ‘房屋数据新增‘,
type: 1,
maxmin:true,
shade: 0,
area:‘1100px‘,
content: str //注意，如果str是object，那么需要字符拼接。
});
});
}
再来看看housebase/addoreditpage.do对应的Controller，这就是解决返回值的关键，获取不同的实体类，通过model.addAttribute传到houseBase_model页面,然后在前台用美元符号取值
@RequestMapping(value="http://www.mamicode.com/addoreditpage")
public String toAdd(HttpServletRequest req,Model model,Long updateid){
/*判断update是否为空，若不为空，进行数据回显*/
if(updateid!=null){
/*通过主键ID获得房屋位置信息实体类对象*/
HousePosition hp= housePosService.selectByPrimaryKey(updateid);
/*把对象传回model*/
model.addAttribute("hPos", hp);
/*通过主键ID获得房屋信息实体类对象*/
HouseInfo hi = houseInfo.selectByForeignKey(updateid);
/*把对象传回model*/
model.addAttribute("hInfo", hi);
/*通过主键ID获得户主基本信息实体类对象*/
HouseOwner ho = houseOwner.selectByForeignKey(updateid);
/*把对象传回model*/
model.addAttribute("hOwn", ho);
}
return "house/model/houseBase_model";
}
这个的hinfo就是model.addAttribute("hInfo", hi);中的hInfo
Controller返回的是对应的model页面，
在model中利用<%@include file=" "%>包含了三个不同的form表单元素
这是其中一个表单。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div id="houseOwner" class="form-horizontal">
<input type="hidden" name="hOwn.id" value="http://www.mamicode.com/${hOwn.id}" />
<div class="form-group">
<label class="col-sm-2 control-label" for="name">户主姓名</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="hOwn.oName" value="http://www.mamicode.com/${hOwn.oName}" placeholder="">
</div>
<label class="col-sm-2 control-label" for="cardtype">证件类型</label>
<div class="col-sm-4">
<select id="oCardtype" name="hOwn.oCardtype" class="form-control">
<c:forEach var="value" items="${combox9}">
<option value="http://www.mamicode.com/${value.dCode}" <c:if test="${value.dCode==hOwn.oCardtype}">selected</c:if>>${value.dName}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="cardnum">证件号码</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="hOwn.oCardnum" value="http://www.mamicode.com/${hOwn.oCardnum}"
placeholder="">
</div>
<label class="col-sm-2 control-label" for="contact">联系方式</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="hOwn.oContact" value="http://www.mamicode.com/${hOwn.oContact}"
placeholder="">
</div>
</div>
</div>
初出茅庐之第一个项目历程（三）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。