3.4.4 修改视图设计
1.?修改对话框设计
在电影的主页中修改一部电影，首先打开一个修改电影的对话框，这个对话框的设计如代码清单3-22所示。其中通过“$.get”访问“./edit/{id}”取得数据和修改视图的HTML页面元素。
代码清单3-22 修改电影对话框js编码
function edit(id){
$.get("./edit/"+id,{ts:new Date().getTime()},function(data){
art.dialog({
lock:true,
opacity:0.3,
title: "修改",
width:'750px',
height: 'auto',
left: '50%',
top: '50%',
content:data,
esc: true,
init: function(){
artdialog = this;
},
close: function(){
artdialog = null;
}
});
});
}
2.?修改页面设计
修改电影视图的页面设计如代码清单3-23所示，其中剧照的下拉列表框中增加了“选中”的代码：th:selected="${movie.photo == f?ile}"，即如果电影中的剧照与下拉框列表中的剧照相同，则选中它。
在修改界面上，还增加了“增加角色”和“选择演员”的编辑项。为了简化设计这里的角色名称我们也使用了预先定义的数据。
代码清单3-23 修改电影页面HTML编码
<link th:href="@{/styles/imageselect.css}" rel="stylesheet" type="text/css" />
<script th:src="@{/scripts/imageselect.js}"></script>
<script th:src="@{/scripts/movie/edit.js}"></script>
<form id="saveForm" method="post">
<input type="hidden" name="id" id="id" th:value="${movie.id}"/>
<div class="addInfBtn" >
<h3 class="itemTit"><span>编辑信息</span></h3>
<table class="addNewInfList">
<tr>
<th>电影名称</th>
<td width="240"><input class="inp-list w-200 clear-mr f-left" type=
"text" th:value="${movie.name}" id="name" name="name" maxlength="16" /></td>
<th>电影剧照</th>
<td width="240">
<select name="photo" id="photo">
<option th:each="file:${files}"
th:value="${file}"
th:text="${file}"
th:selected="${movie.photo == file}">
</option>
</select>
</td>
</tr>
<tr>
<th>出版日期</th>
<td>
<input οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
type="text" class="inp-list w-200 clear-mr f-left" th:value="${movie.createDate} ? ${#dates.format(movie.createDate,'yyyy-MM-dd HH:mm:ss')} :''" id="createDate" name="createDate"/>
</td>
</tr>
<tr>
<th>增加角色</th>
<td width="240">
<select name="rolename" id="rolename">
<option value="">增加角色</option>
<option th:each="role:${rolelist}"
th:value="${role}"
th:text="${role}">
</option>
</select>
</td>
<th>选择演员</th>
<td width="240">
<select name="actorid" id="actorid">
<option value="">选择演员</option>
<option th:each="actor:${actors}"
th:value="${actor.id}"
th:text="${actor.name}">
</option>
</select>
</td>
</tr>
</table>
<div class="bottomBtnBox">
<a class="btn-93X38 saveBtn" href="javascript:void(0)">确定</a>
<a class="btn-93X38 backBtn" href="javascript:closeDialog(0)">返回</a>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('select[name=photo]').ImageSelect({dropdownWidth:425});
});
</script>
3.?修改视图的设计效果
最终完成的修改电影视图的显示效果如图3-5所示。
图3-5 修改电影视图设计效果图
