layui前端+springboot框架--多商品规格代码

直接上效果图：

添加数据效果图：

---

上干货：

	 <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">&#xe604;</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\">&#xe60b;</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);
        }
        }