循环实战

价格升序 价格降序

全部 价格大于500 价格小于500

<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>商品重量</th>
                <th>商品状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">修改商品</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="goods_name" class="control-label">商品价格:</label>
                        <input type="text" class="form-control" id="goods_name">
                    </div>
                    <div class="form-group">
                        <label for="goods_price" class="control-label">商品价格:</label>
                        <input type="text" class="form-control" id="goods_price">
                    </div>
                    <div class="form-group">
                        <label for="goods_number" class="control-label">商品数量:</label>
                        <input type="text" class="form-control" id="goods_number">
                    </div>
                    <div class="form-group">
                        <label for="goods_weight" class="control-label">商品重量:</label>
                        <input type="text" class="form-control" id="goods_weight">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <!-- 给button加上data-dismiss="modal"这个属性可以实现关闭弹框 -->
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="updata()" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<script src="./jquery-1.12.4.js"></script>
<script src="./bootstrap.min.js"></script>
<script>
    function filterPrice(that) {
        filterData($(that).val());
    }
    /* change事件是option的value值改变了才触发 */
    function handlePrice(that) {
        init($(that).val());
        /* 不走接口 利用全局变量goodsList进行渲染 */
        // showTable($(that).val(),goodsList)
    }
    init(0);
    let goodsList = []
    function init(flag) {
        let params = { pagenum: 1, pagesize: 10 }
        $.ajax({
            url: "http://timemeetyou.com:8889/api/private/v1/goods",
            headers: {
                /* 最新的token token过一段时间会失效 失效需要重新获取 */
                Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE2NDQ4MDQyNjIsImV4cCI6MTY0NDg5MDY2Mn0.JyAB5ngwtiJSx-Rb4_VrQ3WnfkmAKGXrTduLqsOGAlU'
            },
            data: params,
            success: function (res) {
                let { data: { goods } } = res;
                showTable(flag, goods);
                /* 第一次调用的时候把goods存到全局变量之中 */
                goodsList = goods;

            }
        })
    }


    function showTable(flag, goods) {
        let str = '';
        if (flag == 0) {
            goods.sort(function (item1, item2) {
                return item1.goods_price - item2.goods_price
            })
        }
        if (flag == 1) {
            goods.sort(function (item1, item2) {
                return item2.goods_price - item1.goods_price
            })
        }
        goods.forEach(function (r, i) {
            str += `
                        <tr>
                            <th scope="row">${i + 1}</th>
                            <td>${r.goods_name}</td>
                            <td>${r.goods_price}</td>
                            <td>${r.goods_number}</td>
                            <td>${r.goods_weight}</td>
                            <td>${r.goods_state}</td>
                            <td>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" onclick="look('${r.goods_id}')">详情</button>
                       
                        </tr>
                        `
        })
        $('tbody').html(str)
    }

    let arr=[]
    function look(id) {
        // console.log(id);
       console.log(goodsList);
        arr = goodsList.find(function (item,i) {
            // console.log(item);
            return item.goods_id == id
        })
    //  console.log(arr);
        $('#goods_name').val(arr.goods_name)
        $('#goods_price').val(arr.goods_price)
        $('#goods_number').val(arr.goods_number)
        $('#goods_weight').val(arr.goods_weight)

    }


    function filterData(flag2) {
        if (flag2 == 0) {
            Good(goodsList)
        }
        if (flag2 == 1) {
            let goods1 = goodsList.filter(function (item) {
                return item.goods_price > 500
            })
            Good(goods1)
        }
        if (flag2 == 2) {
            let goods2 = goodsList.filter(function (item) {
                return item.goods_price < 500
            })
            Good(goods2)
        }
    }
    function Good(goodL) {
        let str = '';
        goodL.forEach(function (r, i) {

            str += `
                        <tr>
                            <th scope="row">${i + 1}</th>
                            <td>${r.goods_name}</td>
                            <td>${r.goods_price}</td>
                            <td>${r.goods_number}</td>
                            <td>${r.goods_weight}</td>
                            <td>${r.goods_state}</td>
                        </tr>
                        `
        })
        $('tbody').html(str)
    }    
</script>