业务场景：
渲染商品列表，跟用户列表和用户组是一样的，在写这篇博客是想把前台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">原 价：</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，没有一点瑕疵
