【TP5.1】商品列表加载

author：咔咔

wechat：fangkangfk

业务场景：

渲染商品列表，跟用户列表和用户组是一样的，在写这篇博客是想把前台ajax那边在解释一下，所以如果有掌握的就可以不用看这篇文章

在前台把静态文件给了咱们之后，不管什么，先看一下给我们的参数都是什么

开始创建我们的控制器

创建我们需要的模型

这里有一个注意点，我在注释里边写了，注意看

创建我们的sercvice

页面ajax

这里没有使用es6的写法，感兴趣的可以看看，这里主要就是数据拼接

 //查询用户列表
  // 页面加载的时候执行这个js
  function LoadingInfo(page_index) {
    var start_date = $("#startDate").val();
    var end_date = $("#endDate").val();
    var state = $("#state").val();
    var goods_name = $("#goods_name").val();
    var category_id_1 = $("#category_id_1").val();
    var category_id_2 = $("#category_id_2").val();
    var category_id_3 = $("#category_id_3").val();
    $.ajax({
      type: "post",
      url: "{:URL('admin/goods/goodslist')}",
      data: {
        "page_index": page_index,
        "page_size": $("#showNumber").val(),
        "start_date": start_date,
        "end_date": end_date,
        "state": state,
        "goods_name": goods_name,
        "category_id_1": category_id_1,
        "category_id_2": category_id_2,
        "category_id_3": category_id_3
      },
      success: function(data) {
        console.log(data);
        var html = '';
        if (data["data"].length > 0) {
          for (var i = 0; i < data["data"].length; i++) {
            html += '<tr class="tr-title" style=" width: 1502px;"><td class="td-' + data["data"][i]["goods_id"] + '"><label><input value="' +
              data["data"][i]["goods_id"] +
              '" tj="" name="sub" data-state="' + data["data"][i]["state"] + '" type="checkbox"></label></td>';
            html += '<td colspan="7" style="width: 97%;"><div style="display: inline-block; width: 100%;" class="pro-code"><span>商家编码' + '：' +
              data["data"][i]["code"] + '</span>';
            html += '<span class="pro-code" style="margin-left:10px;">创建时间：' + data["data"][i]["create_time"];
            html += '<span  class="div-flag-style" style="display: inline-block;margin:0 20px 0 40px;position:relative"> <i class="icon-qrcode"style="background: none; color: #555; font-size: 20px; margin-right: 0;"></i>';
            html += '<div class="QRcode" style="display: none; position: absolute;width:110px;top:28px;left:15px"id="qrcode"><p><img src="__ROOT__/' + data["data"][i]["QRcode"] +
              '" style="width:110px;"></p></div></span>';
            html += '</span></div></td></tr>';
            html += '<tr><td colspan="2" style="background: white;"><div><a class="a-pro-view-img" href="http://tp.23673.com/goods/goodsinfo?goodsid=' + data["data"][i]["goods_id"] +
              '" target="_blank"><img class="thumbnail-img"src="__ROOT__/' + data["data"][i]['album']["pic_cover_micro"] + '">';
            html += '<div class="div-pro-view-name"><span style="color: #13A5D5;" class="thumbnail-name title=' + data["data"][i]["goods_name"] + '"><a target="_blank" style="word-break:break-all;" href="http://tp.23673.com/goods/goodsinfo?goodsid=' +
              data["data"][i]["goods_id"] + '">' +
              data["data"][i]["goods_name"] +
              '</a></span><br/>';
            html += '</div></td>';
            html += '<td style="background: white;"><div class="priceaddactive"><span class="price-lable">原&nbsp;&nbsp;&nbsp;价：</span><span class="price-numble" style="color: #666;"id="moreChangePrice' + data["data"][i]["goods_id"] + '"  >' +
              data["data"][i]["price"] +
              '</span></div>';
            html += '<div><span class="price-lable" >销售价：</span><span class="price-numble"id="moreChangePrice' + data["data"][i]["goods_id"] + '" style="color:red;">' +
              data["data"][i]["promotion_price"] +
              '</span>';
            html += '</td>';
            html += '<td style="background: white;"><div class="cell"><span class="pro-stock" style="color: #666;"id="moreChangeStock' + data["data"][i]["goods_id"] + '">' +
              data["data"][i]["stock"] +
              '</span></div></td>';
            html += '<td style="background: white;"><div class="cell"><span class="pro-stock" style="color: #666;"id="moreChangeStock' + data["data"][i]["goods_id"] + '">' +
              data["data"][i]["real_sales"] +
              '</span></div></td>';
            if (data["data"][i]["state"] == 1) {
              html += '<td style="background: white;"><a href="javascript:void(0)" onclick="modifyGoodsOnline(' + data["data"][i]["goods_id"] + ',\'offline\')">已上架</a></td>';
            } else {
              html += '<td style="background: white;"><a href="javascript:void(0)" onclick="modifyGoodsOnline(' + data["data"][i]["goods_id"] + ',\'online\')" style="color:#999;">已下架</a></td>';
            }
            html += '<td style="background: white;"><div class="cell"><input class="input-mini" goods_id="' +
              data["data"][i]["goods_id"] +
              '" style="width:30px;text-align:center;" value="' +
              data["data"][i]["sort"] +
              '" onchange="changeSort(this)"' +
              'type="number"></div></td>';
            html += '<td style="background: white;"><div ><div class="bs-docs-example tooltip-demo"style="text-align: center;">';
            html += '<a href="javascript:;" data-placement="bottom" data-original-title="编辑"><span class="edit" style="display: inline-block; width: 19%;" onclick="updateGoodsDetail(' +
              data["data"][i]["goods_id"] +
              ')"><i class="icon-edit" style="width: initial;"></i>编辑</span></a>';
            html += '<a href="javascript:;" data-placement="bottom" data-original-title="复制"><span class="edit" style="display: inline-block; width: 19%;" onclick="copyGoodsDetail(' +
              data["data"][i]["goods_id"] +
              ')"><i class="icon-edit" style="width: initial;"></i>复制</span></a>';
            html += '<a href="javascript:void(0)" data-placement="bottom"onclick="deleteGoods(' +
              data["data"][i]["goods_id"] +
              ')" data-original-title="删除"><span class="del" style="display: inline-block; width: 19%;"><i class="icon-trash" style="width: initial;"></i>删除</span></a></div></div></td></tr>';
          }
        } else {
          html += '<tr align="center"><th colspan="8" style="text-align: center;font-weight: normal;color: #999;">暂无符合条件的数据记录</th></tr>';
        }
        $("#productTbody").html(html);
        initPageData(data["page_count"], data['data'].length, data['total_count']);
        $("#pageNumber").html(pagenumShow(jumpNumber, $("#page_count").val(), 5));
        code();
      }
    });
  }

测试：

一切ok，没有一点瑕疵