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 层

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

2、ServiceImpl 层

@Autowired(required =false)privateOtheruserMapper otheruserMapper;@OverridepublicResponseResultupdateState(Integer id,Integer deviceState){//1、通过id获取设备编号deviceIdOtheruser otheruser = otheruserMapper.selectById(id);//2、通过deviceId获取所有设备用户，并将设备状态改为0离线LambdaQueryWrapper<Otheruser> lambda =newQueryWrapper<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());returnnewResponseResult(CodeMsg.SUCCESS,null,states);}

三、前端代码片段

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

<tableclass="layui-hide"id="currentTableId"lay-filter="currentTableFilter"></table><!--        设备状态开关按钮--><scripttype="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文件

<scriptsrc="/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;})});})})

四、总结

  需要注意的是，在修改表格的列数据时，应该遵循良好的编程习惯，避免出现意外的错误或安全漏洞。同时，应该考虑到表格的性能和用户体验，尽可能地减少不必要的渲染和操作。

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。