0%

10.6.8 浏览拍卖物品

发表于 更新于 分类于 ， ，

10.6.8 浏览拍卖物品

用户可以浏览当前正在拍卖的物品。在浏览正在拍卖的物品时,必须先选择想浏览的物品种类。系统通过一个列表框来显示系统中所有的物品种类,当用户单击某个物品种类时,该种类下的所有物品将显示在页面上。当用户单击”浏览拍卖物品”链接时,将进入浏览物品的模块。这时应该先获取当前物品种类,并将所有物品种类加载在页面中供用户选择。
下面是浏览拍卖物品的页面代码。
程序清单：codes\10\auction\WebContent\viewInBid.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
<script src="js/viewInBid.js"></script>
<div class="container">
    <!-- 面板 -->
    <div class="panel panel-primary">
        <!-- 面板头 -->
        <div class="panel-heading">
            <h3 class="panel-title">浏览拍卖物品</h3>
        </div>
        <!-- 面板主体 -->
        <div class="panel-body">

            <select class="btn btn-default" id="kindSelect">
                <option value="0">==请选拍卖物品的种类==</option>
            </select>
            <hr>
            <table class="table table-bordered">
                <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>
                        <th style="text-align: center;">所有者</th>
                    </tr>
                </thead>
                <!-- jQuery自动注入 -->
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

页面中的粗体字代码用于加载、显示当前系统的物品种类,当用户通过该下拉列表选择指定种类时,系统将会获取该种类下所有物品信息,并将它们加载、显示在下面的表格内。
下面是该页面所包含的JS脚本。
程序清单：codes\10\auction\WebContent\js\viewInBid.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
47
48
49
50
51
52
53
54
55
56
57
58
$(function () {
	// 发送请求
	$.get("auction/getAllKind", {}, function (data) {
		// 遍历数据展示到下拉列表中去
		// 使用jQuery的方法来遍历JSON集合数据
		$.each(data, function () {
			// 把数据注入到下拉列表中
			$("<option/>").html(this.kindName).val(this.id)
				.appendTo("#kindSelect");
		})
	});
	// 监听下拉列表
	$("#kindSelect").change(function () {
		// 如果下拉项是默认
		if ($("#kindSelect").val() == 0) {
			return;
		}
		// 获取当前选中的商品类别去加载下面拍卖的商品
		$.post(
			// 请求URL
			"auction/getItemsByKind",
			// 请求数据
			{ kindId: this.value },
			// 响应处理回到函数
			function (data) {
				// 先清空表格之前的数据
				$("tbody").empty();
				//如果响应不对
				if (data == null || data.length < 1) {
					// 设置对话框中的提示信息
					$("#tip").html("<span style='color:red;'>该种类下暂时没有竞拍物品,请重新选择</span>");
					// 显示对话框
					$('#myModal').modal('show');
				}
				// 遍历数据展示到表格中去
				// 使用jQuery的方法来遍历JSON集合数据
				else {
					// 遍历JSON
					$.each(data, function () {
						// 把数据注入到表格的行中去
						var tr = document.createElement("tr");
						tr.align = "center";
						$("<td/>").html("<a href='#' onclick='goPage(\"addBid.html\");"
							+ "curBidItem=" + JSON.stringify(this)
							+ ";'>" + this.name + "</a>").appendTo(tr);
						$("<td/>").html(long2Date(this.addTime)).appendTo(tr);
						$("<td/>").html(long2Date(this.endTime)).appendTo(tr);
						$("<td/>").html(this.maxPrice).appendTo(tr);
						$("<td/>").html(this.owner).appendTo(tr);
						$("tbody").append(tr);
					})
				}
			});
	})
	// 取消对话框中两个按钮上绑定的事件处理函数
	$("#sure").unbind("click");
	$("#cancelBn").unbind("click");
});

第一段代码调用jQuery的get()方法向auction/getAllKind发送请求,该地址将会返回当前系统中所有种类信息。接下来回调函数把所有物品种类加载、显示在下拉列表中。
然后为页面上下拉列表的"change"绑定事件处理函数,当用户改变下拉列表的选项时,会触发该事件处理函数。粗体字代码向auction/getItemsByKind发送请求,该地址会根据物品种类来获取拍卖物品信息,系统会将返回的指定种类下的所有物品信息加载、显示在表格中。
通过上面的代码可以看出,单击”浏览拍卖物品”链接时并未获取任何物品信息,而只是将当前的所有物品种类加载到了kindSelect 列表框中。如果用户单击”浏览拍卖物品”链接,将看到如图10.21所示的界面。
如果用户单击的物品种类下没有对应的拍卖物品,系统将弹出提示框。如果用户单击的种类下有相应的拍卖物品,将看到如图10.22所示的界面。
如图10.22所示,物品列表中的物品名是一个超链接,单击该链接将显示对应物品的详细信息,并可对该物品竞价。

原文链接: 10.6.8 浏览拍卖物品