ajax修改弹出框数据

之前遇到一个问题，耗费了很长时间，觉得可以当做一类问题的典型，就整理了一下，发了出来

先看一下效果

一个商品多个规格

点击之后，弹出列表，有多个规格

每个规格的库存，可以即时的修改，虽然，点击跳到一个新的页面也能完成此功能，但是用户体验明显不如这个好。

修改之后，弹出库存修改提示。

主要包括两个点，一个是ajax访问规格接口，返回数据之后，拼接成字符串，放到弹出框内，一个是鼠标的失去焦点事件处理

html代码

<td><a href="javascript:void(0)" class="layui-btn layui-btn-normal  layui-btn-mini seeSpecs" data_id="{$vo.id}" onclick="sku_info($(this).attr('data_id'))" >查看规格</a></td></td>

遮罩层代码
//遮罩层是上面的表头是写在html里面的,下面的数字和tr,td,数据是拼接之后,js加载的
//商品规格弹框,写在哪里都行,只要是html标签里面,位置无所谓
<!-- 商品规格的弹框 -->
<div class="specs-cont">
    <div class="specs">
        <i class="fa fa-window-close closeicon" id="closeSpecs"></i>
        <table id="table-result" width="100%" align="center" border="1" >
            <tr>
                <th>ID</th>
                <th>商品名称</th>
                <th>促销价</th>
                <th>商品原价</th>
                <th>进货价</th>
                <th>利润</th>
                <th>库存</th>
                <th>限购</th>
                <th>积分</th>
            </tr>
            <tbody id="tbody-result">
            </tbody>
        </table>
    </div>
    
</div>

js代码(弹出框,访问后台接口,获取数据,拼接字符串,js加载数据)

//动态ajax加载弹框数据
  function sku_info(id)
  { 
    var data ={
            id:id,
        };
    //var tbody = $('#tbody-result');
    var tbody = window.document.getElementById("tbody-result");
    $.ajax({
        url: "/admin/goods/sku_info",
        type: 'post',
        dataType: 'json',
        data:data,
        success: function (msg) {
            console.log(msg);
                if (msg.status == 200) {
                    var str = "";
                    var data = msg.data;
                    console.log(data)
                    for (i in data) {
                        str += "<tr>" +
                            "<td align='center'>" + data[i].id + "</td>" +
                            "<td align='center'>" + data[i].skuname + "</td>" +
                            "<td align='center'>" + data[i].sale_price + "</td>" +
                            "<td align='center'>" + data[i].origin_price + "</td>" +
                            "<td align='center'>" + data[i].buying_price + "</td>" +
                            "<td align='center'>" + data[i].profit + "</td>" +
                            "<td align='center'><input class='profit_num'  onblur='change_stock("+data[i].id+","+"$(this).val())' value='" + data[i].stock + "'/></td>" +
                            "<td align='center'>" + data[i].limit_buying + "</td>" +
                            "<td align='center'>" + data[i].integral + "</td>" +
                            "</tr>";
                            console.log(str)
                    }
                    tbody.innerHTML = str;
                }
            },
            error: function () {
                alert("查询失败")
            }
    });
  }

需要给库存字段修改成input框,然后绑定好失去焦点的事件,传值访问后台接口

function change_stock(id,stock)
  {
    console.log(id)
    console.log(stock)
    var data ={
            id:id,
            stock:stock,
        };
    $.ajax({
        url: "/admin/goods/change_stock",
        type: 'post',
        dataType: 'json',
        data:data,
        success: function(resp){
            if(resp.status == 200){
                    $('#tip_msg').html(resp.msg);
                    $('#subtip').show().delay(3000).hide(0);
                    window.location.reload();
                }else{
                    $('#tip_msg').html(resp.msg);
                    $('#subtip').show().delay(3000).hide(0);
                }
        }
    });
  }

下面还是提示遮罩层部分,上面的一篇博客有记载

最后是PHP代码

//加载商品sku列表控制器
//查看商品规格
    public function sku_info()
    {   
        $id = input('post.id');
        $SkuModel = new GoodsSkus();
        
        $sku = $SkuModel -> getGoodSkusByGoodId($id);

        show(200,'success',$sku);
    }
//sku商品模型
/**
     * 获取某个商品的所有单品规格
     */
    public function getGoodSkusByGoodId($goods_id)
    {
        return $this
            -> where('goods_id',$goods_id)
            -> where('deleted_at',null)
            -> field('id,product_no,name as skuname,sale_price,origin_price,buying_price,profit,stock,limit_buying,integral')
            -> order('sort_index','desc')
            -> select();
    }

//修改库存控制器
//修改商品表的库存
    public function change_stock()
    {
        $id = input('post.id');
        $stock = input('post.stock');

        $result = (new GoodsSkus())->change_stock($id,$stock);
        if($result)
        {
            show(200,'库存修改成功!');
        }else{
            show(400,'库存修改失败!');
        }
    }
//修改库存模型
//修改商品的库存的函数
    public function change_stock($id,$stock)
    {   
        $value['stock'] = $stock;
        return $this
            ->where('id',$id)
            ->update($value);
    }

看起来很简介的功能,就一个页面,但是对于后端程序员来说,也比较费劲,好不容易弄出来了,整理一下,纪念一下。