使用jquery渲染+ajax的方法实现后台商品上下架管理

jsp页面

样式表bootstrap.min.css、bootstrap-switch.min.css

<link href="${pageContext.request.contextPath }/static/admin/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">

 

 

主要使用的插件为jquery.js、bootstrap.min.js、bootstrap-switch.min.js

<script src="${pageContext.request.contextPath }/static/admin/vendors/jquery/dist/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/static/admin/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>

 

html:

<div class="right_col" role="main">
            <button class="btn btn-info" id="addProduct">添加商品</button>
            <button class="btn btn-info" id="delProduct">批量删除</button>
            <table class="table table-bordered table-striped table-hover" id="tbodyID">
                <thead>
                <tr><th><div class=""><label><input type="checkbox" value=""></label></div></th>
                    <th>编号</th>
                    <th>商品名称</th>
                    <th>商品图片</th>
                    <th>商品价格</th>
                    <th>商品分类id</th>
                    <th>商品状态</th>
                    <th>上下架</th>
                </tr>
                </thead>
                <tbody id="tbody">

                </tbody>

            </table>

            <!-- /page content -->
            <!-- 页码  -->
            <nav aria-label="Page navigation">
                <ul class="pagination">

                </ul>
            </nav>
</div>

javascript

后台controller使用PageHelper来分页，所以

第一个函数tableData(pageNum)是通过当前页码来查询商品数据；

然后依次实现滑动开关，以及pagination分页码；

$(function () {
        //渲染表格数据
        function tableData(pageNum){
            var str = '';
            var data = {pageNum:pageNum};
            $.getJSON('${pageContext.request.contextPath}/productAdmin',data,function (json) {
                totalPage = json.pages;
                $(json.list).each(function (i,obj){
                    if(obj.pstate == 1){
                        str += '<tr>\n' +
                            '                        <td><div class=""><label><input name="checkPrint" type="checkbox" value="'+obj.pid+'"></label></div></td>\n' +
                            '                        <td>'+obj.pid+'</td>\n' +
                            '                        <td>'+obj.pname+'</td>\n' +
                            '                        <td><img src="'+obj.pimg+'" style="height: 50px"></td>\n' +
                            '                        <td>'+obj.pprice+'</td>\n' +
                            '                        <td>'+obj.pcid+'</td>\n' +
                            '                        <td class="pstate">'+obj.pstate+'</td>\n' +
                            '                        <td>\n' +
                            '                            <div class="bootstrap-switch" id="mySwitch">\n' +
                            '                                    <input name="switchInput" class="checkbox" type="checkbox"  checked value="'+obj.pid+'"/>\n' +
                            '                            </div>\n' +
                            '                        </td>\n' +
                            '                    </tr>'
                    }else{
                        str += '<tr>\n' +
                            '                        <td><div class=""><label><input name="checkPrint" type="checkbox" value="'+obj.pid+'"></label></div></td>\n' +
                            '                        <td>'+obj.pid+'</td>\n' +
                            '                        <td>'+obj.pname+'</td>\n' +
                            '                        <td><img src="'+obj.pimg+'" style="height: 50px"></td>\n' +
                            '                        <td>'+obj.pprice+'</td>\n' +
                            '                        <td>'+obj.pcid+'</td>\n' +
                            '                        <td class="pstate">'+obj.pstate+'</td>\n' +
                            '                        <td>\n' +
                            '                            <div class="bootstrap-switch" id="mySwitch">\n' +
                            '                                    <input name="switchInput" class="checkbox" type="checkbox"  value="'+obj.pid+'"/>\n' +
                            '                            </div>\n' +
                            '                        </td>\n' +
                            '                    </tr>'
                    }
                    $("#tbody").html(str);
                    //页码
                    $(".pagination").html('');
                    var liStr = '<li><a id="previousPage" href="#">«</a></li>';
                    for(var i = 1; i <= json.pages; i++){
                        liStr += '<li><a id="'+i+'active" href="#">'+i+'</a></li>';
                    }
                    liStr += '<li><a id="nextPage" href="#">»</a></li>';
                    $(".pagination").append(liStr);


                    //滑动开关
                    $('input[name="switchInput"]').bootstrapSwitch({
                        onText: '上架',
                        offText: '下架',
                        onColor: 'success',
                        offColor: 'danger',
                        size: 'mini',
                        handleWidth: '35',
                        onSwitchChange: function (event, state) {
                            var productId = event.target.defaultValue;
                            if(state == true){
                                $.ajax({
                                    url:'${pageContext.request.contextPath}/updatePState?pid='+productId,
                                    dataType:'json',
                                    success:function (res) {
                                        if (res.state == 200) {
                                            alert("上架");
                                            //alert("pstate="+$(event.target).closest("tr").find("td:eq(6)").text());
                                            $(event.target).closest("tr").find("td:eq(6)").text(1);
                                        }
                                    }
                                });
                            }else{
                                $.ajax({
                                    url:'${pageContext.request.contextPath}/updatePState?pid='+productId,
                                    dataType:'json',
                                    success:function (res) {
                                        if (res.state == 200) {
                                            alert("下架");
                                            //alert("pstate="+$(event.target).closest("tr").find("td:eq(6)").text());
                                            $(event.target).closest("tr").find("td:eq(6)").text(0);
                                        }
                                    }
                                });
                            }
                        }
                    });

                });
            });
        }

        //初始化
        var curPage = 1;
        var totalPage = 1;
        tableData(curPage);
        var str = '';
        var data = {pageNum:curPage};
        $.ajaxSettings.async = false;
        $.getJSON('${pageContext.request.contextPath}/productAdmin',data,function (json) {
            totalPage = json.pages;
        });
        console.log(totalPage);

        //按页码翻页
        $(document).on("click",".pagination li a",function () {
            var flag = $(this).html();
            //alert($(this).attr("id"));
            var identity = $(this).attr("id");
            if(identity == "previousPage"){
                if(curPage > 1){
                    curPage -= 1;
                    tableData(curPage);
                    console.log("curPage="+curPage);
                }else{
                    tableData(curPage);
                    console.log("curPage="+curPage);
                }
            }else if(identity == "nextPage"){
                if(curPage < totalPage){
                    curPage += 1;
                    tableData(curPage);
                    console.log("curPage="+curPage);
                }else{
                    tableData(curPage);
                    console.log("curPage="+curPage);
                }
            }else {
                console.log("当前点击页码=" + flag);
                var pageSelected = parseInt(flag);
                curPage = pageSelected;
                tableData(pageSelected);
            }
        });


    });

controller

商品分页数据、根据商品id改变商品状态以实现上下架

    @RequestMapping("productAdmin")
    @ResponseBody
    public Object productAdmin(@RequestParam(value = "pageNum",defaultValue = "1")Integer pageNum){
        PageHelper.startPage(pageNum,5);
        List<Product> products = productService.findAllProducts();
        PageInfo pageInfo = new PageInfo(products);
        return pageInfo;
    }
    //上下架
    @RequestMapping("updatePState")
    @ResponseBody
    public ReturnMsg updatePState(@RequestParam(value="pid")Integer pid){
        ReturnMsg returnMsg = new ReturnMsg();
        //首先根据pid查出对应商品
        Product p = productService.findProductByPid(pid);
        //如果商品为上架状态
        if(p.getPstate() == 1){
            //改为下架状态
            p.setPstate(0);
        }else {
            //否则改为上架状态
            p.setPstate(1);
        }
        int a = productService.updateProduct(p);
        System.out.println("是否修改成功？——"+a);
        if(a == 1){
            returnMsg.setState(200);
            returnMsg.setMsg("修改成功");
        }else{
            returnMsg.setState(500);
            returnMsg.setMsg("修改失败");
        }
        return returnMsg;
    }

实现效果图

学而思~