0%

10.6.2 浏览所有流拍物品

10.6.2 浏览所有流拍物品

浏览所有流拍物品需要调用前端处理组件的getFailItems()方法,调用该方法无须执行权限检查。所有用户都可以直接调用。当用户单击页面上方的”浏览流拍物品”链接时,将发送获取所有流拍物品的请求,对应的函数如下。
程序清单:codes\10\auction\WebContent\js\viewFail.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 异步加载所有的流拍物品 
$(function() {
$.get("auction/getFailItems", {}, function(data) {
// 遍历数据展示到表格中去
// 使用jQuery的方法来遍历JSON集合数据
$.each(data, function() {
// 把数据注入到表格的行中去
var tr = document.createElement("tr");
tr.align = "center";
$("<td/>").html(this.name).appendTo(tr);
$("<td/>").html(this.kind).appendTo(tr);
$("<td/>").html(this.maxPrice).appendTo(tr);
$("<td/>").html(this.remark).appendTo(tr);
$("tbody").append(tr);
})
});
})

在上面的代码中,使用jQueryget()方法向auction/getFailItems发送请求,该方法指定的回调函数将会负责迭代服务器端返回的JSON 数据,并将数据添加到页面上的<tbody>元素内。
查看流拍物品的HTML页面代码如下。
程序清单:codes\10\auction\WebContent\viewFail.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script src="js/viewFail.js"></script>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">所有流拍的物品</h3>
</div>
<div class="panel-body">
<table class="table table-bordered table-hover">
<thead>
<tr align="center">
<th style="text-align: center;">物品名</th>
<th style="text-align: center;">物品种类</th>
<th style="text-align: center;">初始/最高价格</th>
<th style="text-align: center;">物品描述</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>

从上面的页面代码可以看出,该页面只包含一个Bootstrap表单,在该表单内包含一个空的<tbody>元素,用于装载、显示从服务器端返回的流拍物品。如果系统中包含流拍物品,将可看到如图10.10所示的界面。

原文链接: 10.6.2 浏览所有流拍物品