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">原 价：</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，没有一点瑕疵
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。