layui开关switch，用到table表格

功能：数据库中设置status，1时表示商品上架，0表示商品下架

SpringBoot，SpringMVC，MyBatis

1,表单样式如下：要额外写一个templet，通过后面的id找到所写templet

{field: 'status', title: '上下架切换',templet: "#ID-table-demo-templet-switch"},

整体如下所示：

<script>
    layui.use(['table',  'laydate'], function () {
        var table = layui.table;
​
        // 创建渲染实例
        table.render({
            elem: '#test',
            id: 'tableId',
            url: '/product/list',
            toolbar: '#toolbarDemo',
            cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: 'ID', sort: true, width: 100},
                    {field: 'categoryName', title: '分类'},
                    {field: 'name', title: '商品名'},
                    {field: 'subtitle', title: '子标题'},
                    {field: 'mainImage', title: '图片', templet:'#imageTemplet'},
                    {field: 'price', title: '价格'},
                    {field: 'stock', title: '库存'},
                    {field: 'status', title: '上下架切换',templet: "#ID-table-demo-templet-switch"},
                    {field: 'createTime', title: '创建时间', templet:"<div>{{d.createTime?layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss'):'未知'}}</div>"},
                    {field: 'updateTime', title: '更新时间'},
                    {fixed: 'right', title: '操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
                ]
            ],
            page: true
        });
      
​
    });
</script>

2，templet内容如下，拿到本行的status赋给name变量，本行id值赋给value变量。检测本行status=1吗，是就选中，否则就是0则不选中

<!--切换上下架-->
<script type="text/html" id="ID-table-demo-templet-switch">
    <input type="checkbox" name="{{d.status}}" value="{{d.id}}" title="上架|下架" lay-skin="switch"
           lay-filter="demo-templet-status" {{d.status == 1 ? "checked" : ""}} >
</script>

3，触发事件：拿到本行的id和当前状态，并将当前状态取反，得到1或者0，1-当前值这是个公式，自己试一试即可知道。

发送ajax请求到服务器更新状态

// 状态 - 开关操作
form.on('switch(demo-templet-status)', function(){
    var id = this.value;
    var status = 1 - (this.name);
    $.post(
      '/product/updateStatus',
        {'id':id,'status':status},
        function (result){
          console.log(result);
          if(result.code==0){
              mylayer.okMsg("更新成功");
              //重新渲染表格，不用刷新页面即可刷新数据
              table.reload('tableId');
          }else{
              mylayer.errorMsg("更新失败");
          }
        },
        'json'
    );
});

4，后端：就很正常的更新，数据都用SpringMVC拿过来自动封装，很方便。实体类entity中含有id和status即可，剩下的也可以补充

@RequestMapping("/updateStatus")
public Result updateStatus(Product product){
    System.out.println("ProductController.updateStatus");
    productService.updateStatus(product);
    return Result.ok("更新成功");
}

Service和mapper层不写了，有需要留言，本人经常在线，欢迎一起交流