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，沒有一點瑕疵