3.4.2 新建视图设计
1.?新建对话框设计
新建电影时，在电影主页中打开一个对话框显示新建的操作界面，对话框设计引用了“artDialog.js”的对话框插件，然后编写一个脚本来打开对话框，如代码清单3-17所示。其中“./new”是连接控制器的请求URL，注意这里使用了相对路径，这个URL通过“$.get”请求返回新建电影的HTML页面，请求链接中的ts参数传递的是当前时间，这是为了保证该链接是一个全新的链接，以使浏览器能显示一个最新的内容页面。
代码清单3-17 新建电影对话框设计js编码
function create(){
$.get("./new",{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-18所示，这里只是部分HTML编码，其中的日期控件使用“WdatePicker.js”插件来实现。对于一部电影来说，我们需要输入名称、剧照和日期三个属性，其中剧照的图片下拉列表框使用“imageselect.js”图片下拉列表框插件来实现，并且为了简化设计，剧照中的图片文件使用了预先定义的文件，这里只要选择使用哪一个图片即可。
代码清单3-18 新建电影页面HTML编码
<link th:href="@{/styles/imageselect.css}" rel="stylesheet" type="text/css" />
<script th:src="@{/scripts/imageselect.js}"></script>
<script th:src="@{/scripts/movie/new.js}"></script>
<form id="saveForm" action="./save" method="post">
<table class="addNewInfList">
<tr>
<th>名称</th>
<td><input class="inp-list w-200 clear-mr f-left" type="text" id=
"name" name="name" maxlength="120" /></td>
<th>剧照</th>
<td width="240">
<select name="photo" id="photo">
<option th:each="file:${files}"
th:value="${file}"
th:text="${file}">
</option>
</select>
</td>
</tr>
<tr>
<th>日期</th>
<td>
<input onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
type="text" class="inp-list w-200 clear-mr f-left" id="createDate" name="createDate"/>
</td>
</tr>
</table>
<div class="bottomBtnBox">
<a class="btn-93X38 saveBtn" href="javascript:void(0)">确定</a>
<a class="btn-93X38 backBtn" href="javascript: closeDialog()">返回</a>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('select[name=photo]').ImageSelect({dropdownWidth:425});
});
</script>
3.?表单验证与提交设计
验证新建电影表单的提交时使用“jquery.validate.min.js”插件中的验证方法来实现，如代码清单3-19所示。保存时调用经典的“$.ajax”方式利用POST方法进行提交，其中headers: {"Content-type": "application/x-www-form-urlencoded;charset=UTF-8"}用于保证数据在传输过程中中文字符的正确性。在表单验证中，只对name和createDate两个属性进行简单的非空验证，表单的参数传递使用一个表单序列化函数serialize()来实现，它将表单控件上的对象序列化为一个个含有“键-值”对的字符串进行提交。
代码清单3-19 新建电影中表单验证和提交的js编码
$(function(){
$('#saveForm').validate({
rules: {
name :{required:true},
createDate :{required:true}
},messages:{
name :{required:"必填"},
createDate :{required:"必填"}
}
});
$('.saveBtn').click(function(){
if($('#saveForm').valid()){
$.ajax({
type: "POST",
url: "./save",
data: $("#saveForm").serialize(),
headers: {"Content-type": "application/x-www-form-urlencoded;
charset=UTF-8"},
success: function (data) {
if (data == 1) {
alert("保存成功");
pageaction();
closeDialog();
} else {
alert(data);
}
},
error:function(data){
var e;
$.each(data,function(v){
e += v + " ";
});
alert(e);
}
});
}else{
alert('数据验证失败，请检查！');
}
});
});
4.?新建视图设计效果
新建电影的视图设计最后的显示效果如图3-3所示。
图3-3 新建电影视图设计效果图
