SpringBoot+layUI实现表格的某一列数据刷新功能案例分享网站首页 技术交流

SpringBoot+layUI实现表格的某一列数据刷新功能案例分享

Java Fans 2024-06-28 12:01:02

简介SpringBoot+layUI实现表格的某一列数据刷新功能案例分享

在这里插入图片描述

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。
?个人主页：Java Fans的博客
?个人信条：不迁怒，不贰过。小知识，大智慧。
?当前专栏：Java案例分享专栏
✨特色专栏：国学周更-心性养成之路
?本文内容：如何入门Python——学习Python的指南针

文章目录

我们经常遇到一组数据中的某个字段他们是互斥的，只能选择一个，也就是数据库更改了某一列的所有数据，layui前端表格怎么刷新这一列；如下图所示的业务逻辑，同一个设备，不同用户使用时只有一个用户的设备状态是在线的，其它的均为离线。

在这里插入图片描述
下面我就将针对这个业务分享前后端的实现步骤分享给大家！

一、框架环境

提示：使用了Java语言编写，SpringBoot+layui框架搭建的项目。

二、后端代码片段

关于切换 在线离线 状态的后端重要业务逻辑是：

1、通过用户 id 获取设备编号 deviceId
2、通过 deviceId 获取所有设备用户，并将设备状态改为0—离线
3、再将当前用户 id 对应的设备用户的设备状态改为1—在线
4、最后获取该设备下的所有设备状态，并将数据返回至前端处理

代码分享：

1、Controller 层

    @Autowired
    private OtheruserService otherService;

    @ApiOperation("更新用户状态")
    @PostMapping("state")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "id",value = "用户id",dataType = "Integer",required = true),
            @ApiImplicitParam(name = "deviceState",value = "设备状态,设备是否离线",dataType = "Integer",required = true)
    })
    public ResponseResult  updateUserState(Integer id,Integer deviceState){
        return otherService.updateState(id,deviceState);
    }

2、ServiceImpl 层

    @Autowired(required = false)
    private OtheruserMapper otheruserMapper;
  
    @Override
    public ResponseResult updateState(Integer id, Integer deviceState) {
        //1、通过id获取设备编号deviceId
        Otheruser otheruser = otheruserMapper.selectById(id);

        //2、通过deviceId获取所有设备用户，并将设备状态改为0离线
        LambdaQueryWrapper<Otheruser> lambda = new QueryWrapper<Otheruser>().lambda();
        lambda.eq(Otheruser::getDeviceId,otheruser.getDeviceId());
        List<Otheruser> otherusers = otheruserMapper.selectList(lambda);
        for (Otheruser otheruser1 : otherusers) {
            otheruser1.setDeviceState(0);
            otheruserMapper.updateById(otheruser1);
        }

        //3、再将id对应的设备用户的设备状态改为1在线
        otheruser.setDeviceState(1);
        otheruserMapper.updateById(otheruser);

        //4、获取该设备下的所有设备状态，并返回至前端
        otherusers = otheruserMapper.selectList(lambda);
        List<Integer> states = otherusers.stream().map(other -> other.getDeviceState()).collect(Collectors.toList());


        return new ResponseResult(CodeMsg.SUCCESS,null,states);
    }

三、前端代码片段

1、创建表和设备状态按钮

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <!--        设备状态开关按钮-->
        <script type="text/html" id="stateSwitch">
            <input type="checkbox" name="deviceState" lay-filter="stateSwitch" lay-skin="switch" lay-text="在线|离线"
                   value="{{d.id}}" {{d.deviceState==1?'checked':''}}>
        </script>

2、引入layui.js文件

<script src="/dist/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

3、获取数据并渲染表格

        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            table = layui.table;

        table.render({
            elem: '#currentTableId',
            url: '/other/all?userName='+localStorage.getItem("name"),
            toolbar: '#toolbarDemo',
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', title: 'ID', width: 100, sort: true, hide: true},
                {field: 'name', title: '用户名', width: 100},
                {field: 'age', title: '年龄(周岁)', width: 100},
                {field: 'height', title: '身高(cm)', width: 100},
                {field: 'weight', title: '体重(kg)', width: 100},
                {field: 'maxTem', title: '体温最大值(℃)', width: 130},
                {field: 'minTem', title: '体温最小值(℃)', width: 130},
                {field: 'tel', title: '联系方式', Width: 100},
                {field: 'userName', title: '主用户名', hide: true},
                {field: 'deviceId', title: '设备编号', width: 100},
                {field: 'deviceState',  title: '设备状态',templet:'#stateSwitch'},
                {field: 'createTime', title: '创建时间'},
                {field: 'updateTime', title: '修改时间'},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [5, 10, 15, 20, 25, 50],
            limit: 5,
            page: true,
            skin: 'line'
        });

4、监听设备状态按钮

        // 监听设备状态按钮
        form.on('switch(stateSwitch)',function (data) {
            let  otherId = data.value  // value = d.id
            let deviceState = data.elem.checked == true ? 1:0
            //发送ajax请求 更新用户状态   用户id
            $.post("/other/state",{id:otherId,deviceState:deviceState},function (res) {
                layer.msg(res.msg)
                
                //1、找到该列数据所在的元素，可以使用layui的table模块提供的方法获取表格中的某一列数据
                var data = table.cache.currentTableId;
                var columnData = data.map(function(item) {
                    return item.deviceState;
                });
                
                //2、更新该列数据的值，可以使用JavaScript的相关方法来修改元素的值
                columnData.forEach(function(item, index) {
                    columnData[index] = res.data[index];
                });
                
                //3、更新表格这一列的数据，可以使用layui的table模块提供的方法更新表格数据
                table.reload("currentTableId",{
                    data: data.map(function(item, index) {
                        item.deviceState = columnData[index];
                        return item;
                    })
                });
            })
        })