10.6.5 管理物品种类
如果用户单击页面上方的”管理种类”链接,将进入管理物品种类模块。用户在这里会先看到系统包含的所有物品种类。用户单击”管理种类”链接时,系统会调用goPager函数导航到viewCategory.html页面,该页面用于查看当前系统的所有物品种类。
viewCategory.html页面代码如下。
程序清单：codes\10\auction\WebContent\viewCategory.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <script src="js/viewCategory.js"></script>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">当前的物品种类如下：</h3>
<a id="addCategory" ui-sref="addCategory"
style="margin-top: -24px" role="button"
class="btn btn-default btn-sm pull-right"
aria-label="添加"> <i class="glyphicon glyphicon-plus"></i>
</a>
</div>
<div class="panel-body">
<table class="table table-bordered table-striped">
<thead>
<tr align="center">
<th style="text-align: center;">种类名</th>
<th style="text-align: center;">种类描述</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
|
从以上代码可以看出,该页面只是一个简单的.panel容器,该容器中包含一个表格,用于显示系统中所有的物品种类。
为了获取系统中所有的物品种类,系统会向auction/getAllKind发送请求,该请求是通过jQuery发送的异步请求。下面是该页面包含的JS脚本。
程序清单：codes\10\auction\WebContent\js\viewCategory.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$(function () {
$.get("auction/getAllKind",
{},
function (data) {
$.each(data, function () {
var tr = document.createElement("tr");
tr.align = "center";
$("<td/>").html(this.kindName).appendTo(tr);
$("<td/>").html(this.kindDesc).appendTo(tr);
$("tbody").append(tr);
})
});
$("#addCategory").click(function () {
goPage("addCategory.html");
})
})
|
从粗体字代码可以看出,该JS脚本会向auction/getAllKind发送请求,该请求将会获取系统物品种类,服务器则以JSON格式返回所有物品种类。接下来jQuery会迭代所有种类信息,并将它们显示在页面上。
进入浏览物品种类的页面,可以看到如图10.17所示的界面。
如果用户单击该界面右上角的"+"按钮,将会触发goPager()函数加载addCategory.html页面,该页面是一个添加物品种类的表单页面。表单页面代码如下。
程序清单：codes\10\auction\WebContent\addCategory.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <script src="js/addCategory.js"></script>
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">添加种类</h4>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">种类名：</label>
<div class="col-sm-10">
<input type="text" class="form-control"
id="name" name="name" minlength="2" required>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-sm-2 control-label">描述：</label>
<div class="col-sm-10">
<textarea type="text" class="form-control"
id="desc" name="desc" minlength="20"
required rows="4"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="addCategory"
class="btn btn-success">添加</button>
<button id="cancel" role="button"
class="btn btn-danger">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
|
该页面只是一个简单的表单页面,当在页面中提交表单时,系统将会使用jQuery的post()方法向服务器发送异步请求,该过程由JS脚本完成。下面是该JS脚本代码。
程序清单：codes\10\auction\WebContent\js\viewCategory.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
$(function() {
$.get(
// 请求URL
"auction/getAllKind",
// 请求参数
{},
function(data) {
$.each(data, function() {
var tr = document.createElement("tr");
tr.align = "center";
$("<td/>").html(this.kindName).appendTo(tr);
$("<td/>").html(this.kindDesc).appendTo(tr);
$("tbody").append(tr);
})
});
$("#addCategory").click(function() {
goPage("addCategory.html");
})
})
|
从粗体字代码可以看出,该JS脚本会向auction/getAllKind发送请求,该请求将会获取系统物品种类,服务器则以JSON格式返回所有物品种类。接下来jQuery会迭代所有种类信息,并将它们显示在页面上。
进入浏览物品种类的页面,可以看到如图10.17所示的界面。
如果用户单击该界面右上角的"+"按钮,将会触发goPager()函数加载addCategory.html页面,该页面是一个添加物品种类的表单页面。表单页面代码如下。
程序清单：codes\10\auction\WebContent\addCategory.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <script src="js/addCategory.js"></script>
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">添加种类</h4>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">种类名：</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" minlength="2" required>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-sm-2 control-label">描述：</label>
<div class="col-sm-10">
<textarea type="text" class="form-control" id="desc" name="desc" minlength="20" required
rows="4"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="addCategory" class="btn btn-success">添加</button>
<button id="cancel" role="button" class="btn btn-danger">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
|
该页面只是一个简单的表单页面,当在页面中提交表单时,系统将会使用jQuery的post()方法向服务器发送异步请求,该过程由JS脚本完成。下面是该JS脚本代码。
程序清单：codes\10\auction\WebContent\js\addCategory.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| $(function () {
$(".form-horizontal").submit(function () {
$.post(
"auction/addKind",
$(".form-horizontal").serializeArray(),
function (data) {
if (data == "success") {
$('#myModal').modal('show');
$("#tip").html("<span style='color:red;'>您添加种类成功了,请问要继续吗?</span>");
} else {
$('#myModal').modal('show');
$("#tip").html("<span style='color:red;'>添加种类失败了</span>");
}
});
return false;
});
$("#sure").unbind("click");
$("#cancelBn").unbind("click");
$("#sure").click(function () {
$('.form-horizontal').get(0).reset();
})
$("#cancelBn").unbind();
$("#cancelBn").click(function () {
goPage("viewCategory.html");
})
$("#cancel").click(function () {
goPage("viewCategory.html");
});
})
|
该代码中采用异步请求的方式提交整个表单数据,向auction/addKind 发送异步请求,该地址则负责处理添加种类的请求。
当用户添加种类成功后,系统将弹出提示框,告诉用户添加种类成功,如图10.18所示。
如果用户单击提示框中的”确定”按钮,系统将停留在添加种类的表单页面,让用户可以继续添加种类;如果用户单击”取消”按钮,系统将返回种类列表页面,这样可以在添加种类成功后,立即在页面上看到新增的物品种类。
原文链接: 10.6.5 管理物品种类