直接上效果图:
添加数据效果图:
上干货:
<div class="row cl">
<label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>商品规格:</label>
<table class="layui-table text-c" id="table" style="width: 80%;">
<thead>
<tr class="text-c">
<td>序号</td>
<td>规格名称</td>
<td>价格</td>
<td>库存</td>
<td>操作</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- <p onclick="add()">+</p>-->
<a title="添加规格" href="javascript:;"
th:onclick="'javascript:add()'"
class="ml-5" style="text-decoration:none;margin-left: 145px;"><i class="Hui-iconfont"></i></a>
</div>
<!--请在下方写此页面业务相关的脚本-->
<link rel="stylesheet" type="text/css" th:href="@{/xadmin/lib/formSelect/formSelects-v4.css}" href="static/xadmin/lib/formSelect/formSelects-v4.css"/>
<link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}" href="/layui/css/layui.css" />
<script type="text/javascript" th:src="@{/xadmin/lib/formselect/formSelects-v4.js}" src="static/xadmin/lib/formselect/formSelects-v4.js"></script>
<!--商品规格-->
<script>
var table = document.getElementById("table") ;
//表格行数
var index = table.rows.length-1 ;
if(index>=1){
$("#goodsPrice").hide();
$("#goodsNum").hide();
}
function add(){
var tab = document.getElementById("table") ;
//表格行数
var row = tab.rows.length-1 ;
row++;
if(row==1){
$("#goodsPrice").hide();
$("#goodsNum").hide();
}
var $li = $(
"<tr class=\"text-c\" id="+row+" style=\"background: #fff;\"><td>"+row+"</td><td><input class=\"input-text\" style='width: 100%;height: 100%;border: none;outline: none;' type='text' name='stardardName' required></td>"+
"<td><input class=\"input-text\" type='text' name='stardardPrices' style='width: 100%;height: 100%;border: none;outline: none;' required></td>"+
"<td><input class=\"input-text\" type='text' name='stardardNums' style='width: 100%;height: 100%;border: none;outline: none;' required></td>"+
"<td><span style='cursor: pointer;' id='span"+row+"' onclick='sub("+row+")'><i class=\"Hui-iconfont\"></i></span></td></tr>"
);
$("tbody").append($li);
}
function sub(id){
var tab = document.getElementById("table") ;
//表格行数
var row = tab.rows.length-1 ;
$("#"+id).remove();
$("#span"+id).remove();
row--;
if(row==0){
$("#goodsPrice").show();
$("#goodsNum").show();
}
var row1 = tab.rows.length-1 ;
for(var i=1;i<=row1;i++){
tab.rows[i].cells[0].innerHTML=i;
}
}
</script>
//商品多规格实体类 在数据库中建对应的规格表
@Data
@EqualsAndHashCode()
@Accessors(chain = true)
public class GoodsStardard {
//规格id
private Long id;
//商品id
private Long goodsId;
//多个规格
private String stardardName;
private String stardardPrices;
private String stardardNums;
//单个规格
private BigDecimal stardardPrice;
private Integer stardardNum;
}
然后在Controller中进行增删改查操作即可
@PostMapping("add")//添加为例
@ResponseBody
@NoRepeatSubmit
public AjaxResult add(Goods goods, String lunbotu, GoodsStardard goodsStardard) {
goods.setCreatetime(LocalDateTime.now());
goods.setUpdatetime(LocalDateTime.now());
goods.setStatus(0);//默认待上架
goods.setExamineStatus(0);//默认审核中
Boolean flag1 = goodsService.addGoods(goods,goodsStardard);
long goodsId = goods.getId();
boolean flag= goodsService.add(goodsId,lunbotu);
if (flag1) {
return toAjax(flag);
} else {
return toAjax(false);
}
}