10.6.8 浏览拍卖物品

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.7k 阅读时长 ≈ 3 分钟

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所示,物品列表中的物品名是一个超链接,单击该链接将显示对应物品的详细信息,并可对该物品竞价。