layui：table不使用url使用data传值。layui+websocket后台推送数据实现表格更新。

最新推荐文章于 2024-04-09 14:30:35 发布
最新推荐文章于 2024-04-09 14:30:35 发布
阅读量1.2w 收藏 21
点赞数 4
分类专栏： layui websocket 前端 文章标签： websocket layui data 后台推送
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CaptainJava/article/details/102853088
版权
前端 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
layui
2 篇文章 0 订阅
订阅专栏
websocket
1 篇文章 0 订阅
订阅专栏

场景，再一次表格展示中需要实时更新，数据会通过后台websocket传送给前端。这样layui，table中的url就用不上了，需要使用data动态传值。

请看代码（代码中table嵌套了element，单元格中插入进度条。如果需要看这两者作何使用的可以看上一篇博文https://blog.csdn.net/CaptainJava/article/details/102852563）。

实现思路：

1、使用layui.table渲染表格，但是不实用url获取数据，而是使用空的data[]。

2、创建websocket连接连接服务器。

3、websocket服务器收到当前连接时介入时，推送一次当前数据。

4、在websocket 的onmessage中收到消息，调用table.reload，传入接收到的data数据。

5、websocket服务端当判断数据变更后推送一次数据，前台刷新表格即可。

上代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<!--    <script type="text/javascript" src="../static/js/jquery-3.4.1.js"></script>-->
    <style>
    .memberstatus-span-left {
        font-size: 25px;
    }
    .memberstatus-span-right {
        font-size: 25px;
    }
</style>
</head>
<body>

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

<script src="../static/lib/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use([ 'table','element'], function(){
        var table = layui.table;
        var layer = layui.layer;
        //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
        var element = layui.element;

        table.render({
            elem: '#test'
            // ,url:'memberStatus?search=1'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,data: []
            // ,autoSort: false //取消自动排序
            ,cols: [
                [
                // {field:'id', title: 'ID', align: 'center',sort: true}
                ,{field:'memberName', title: '人员名称', align: 'center',sort: true} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'team', title: '队伍', align: 'center', sort: true,templet: function(d){
                    if(parseInt(d.team) =='1'){
                        // return '<span style="background-color: #FF5722;">红队</span>'
                        return '<i class="layui-icon layui-icon-group" style="font-size: 30px; color: #FF5722;"></i>  '
                    }else if(parseInt(d.team)=='2') {
                        // return '<span style="background-color: #01AAED;">蓝队</span>'
                        return '<i class="layui-icon layui-icon-group" style="font-size: 30px; color: #01AAED;"></i>  '
                    }else{
                        return d.team
                    }
                }} //单元格内容水平居中
                ,{field:'deviceCode', title: '装备编号', align: 'center',sort: true} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                // ,{field:'hp', title: '血量', align: 'center',sort: true}
                ,{field:'hp', title: '血量', align: 'center',sort: true,templet: function(d){
                        //判断颜色
                        var ys = '';
                        if(30<d.hp && d.hp<100){
                            ys='layui-bg-orange'
                        }else if(0<d.hp && d.hp<=30){
                            ys='layui-bg-red'
                        }
                        return '<div class="layui-progress layui-progress-big" lay-showpercent="true"><div class="layui-progress-bar '+ys+'" lay-percent="'+d.hp+'%"></div></div><br>'
                    }}
                ,{field:'hitedNumber', title: '中弹数', align: 'center',sort: true}
                ,{field:'hitNumber', title: '击中数', align: 'center',sort: true}
                ,{field:'rePlenishBullet', title: '补弹次数', align: 'center',sort: true}
                ,{field:'reviveNum', title: '复活次数', align: 'center',sort: true}

            ]
            ]
            ,done:function (res,currentCount) {
                element.render()
            }
        });


        var websocket = null;

        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://"+window.location.host+"/websocket/memberstatus");
        } else {
            alert('Dont support websocket')
        }

        //连接发生错误的回调方法
        websocket.onerror = function () {
            console.log("error");
        };

        //连接成功建立的回调方法
        websocket.onopen = function () {
            console.log("open");
        };

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            var obj = JSON.parse(event.data);
            if(obj && "memberstatus"==obj.type){
                // console.log(obj.data)
                table.reload('test', {
                    elem: '#test'
                    ,data: JSON.parse(obj.data)
                });
            }
        };

        //连接关闭的回调方法
        websocket.onclose = function () {
            console.log("close");
        };

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        };

        //关闭连接
        function closeWebSocket() {
            websocket.close();
            window.clearInterval(intervalId);
        }

        //发送消息
        function send() {
            var message = document.getElementById('text').value;
            websocket.send(message);
        }


    });

</script>

</body>
</html>

 

grootblockchain
关注
  • 4
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Tornado+Layui（八）Tornado+Layui+WebSocket 前后端分离
qq_42142258的博客
03-11 1208
目的： 实现Tornado主动推送数据到前端 过程： 1、Layui中Websocket的 js代码 //此时的table只是为了渲染表格 table.render({ elem: '#current_time_msg' // table标签的ID , data: [] ...
java websocket即时通讯+layui实现移动端一对一聊天客服功能
lmsfv的博客
03-19 4860
java_websocket即时通讯+layui实现移动端一对一聊天客服功能
websocket实现前后台数据更新
05-31
1、前端页面 UI01.HTML 页面，采用echarts折线图、柱状图、饼图、仪表盘等显示形式，展示后台发送的数据； 2、javascript websocket.js，websocket页面使用javascript文件，定义.onopen、onmessage、onclose、onerror函数，html通过调用 openSocket(userId)函数，建立websocket链接；其中userId必须唯一； 3、后端代码 WebSocketServer.java、WebSocketConfig.java 定义后台onopen、onmessage、onclose、onerror函数及信息发送函数，提供给websoceket功能支持。
LayUI数据表格的使用指南
最新发布
2301_82242204的博客
04-09 1875
学习视频：《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！多数Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
springboot+websocket+layui制作的实时聊天室，后端开发入门样例
就很有趣的博客
08-09 2458
这里写目录标题前言效果图涉及技术springbootlayuiwebsocket实现思路websocket在springboot下的实现前端实现建立websocket连接前端对应的websocket方法代码实现后端代码建立连接时接收到消息时发送消息总代码前端代码总结 前言 复习感觉无聊的时候就想拿以前学习的东西做几个小案例，这段时间在搭一个博客网站，正好做到私信这个模块，突然想试试看看可不可以做成一个实时通信的私信功能，思路一来就一发不可收拾，开整开征。 效果图 如下图所示，可以实现文字的即时通讯，图片发送
Layui table的动态表格lay-data怎么传递参数给后端
小洪帽i的博客
11-20 4387
Layui table的动态表格lay-data怎么传递参数给后端
layui数据表格使用url传值，增加空行的方法
Roger20190612的博客
10-12 1314
网络上大部文章关于layui表格增加空行的方法都是data同步传值，设置一个空记录，然后调用reload方法，可以增加一个空行。 但是如果table是通过url异步加载数据，设置空记录再调用reload的时候，layui在后台是先调用url，取得数据，而忽略表内的现有数据，包括我们做的空记录，所以并不会新增加一行。 解决的办法是修改layui中table.js的源码，调整下图中if{} else{}的先后次序： 变更前： 变更后： 红线处增加options.data.lengt..
如何使用Spring Boot 3.X + WebSocket来实现推送消息功能
06-14
如何使用Postman来发送数据到后端Spring Boot应用程序，并使用WebSocket建立实时通信通道，以便后端应用程序可以向Postman推送消息。 学会这个方法，就能缩短你的项目开发周期，以及提高你的开发效率。如果提出您的...
SpringBoot+WebSocket+Netty实现消息推送的示例代码
08-19
主要介绍了SpringBoot+WebSocket+Netty实现消息推送的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Spring Boot 整合 Netty + WebSocket 实时消息推送
03-14
综上所述，Spring Boot与Netty的结合使用，能够构建出强大的实时消息推送系统，满足现代Web应用中对于数据实时同步的需求。通过理解并熟练掌握上述知识点，开发者可以创建出高效、可靠的通信平台。
Laravel使用swoole实现websocket主动消息推送的方法介绍
10-16
主要给大家介绍了关于Laravel使用swoole实现websocket主动消息推送的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Laravel具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Layui如何给lay-data插入按钮呢？如何通过按钮获取Id值呢？
是个非常热爱生活、乐观、奋斗、努力的逗比青年
07-06 2172
好了，写完了，如果对Layui熟悉度高的话，直接看‘精简输出部分’就好了，剩下的那些显示数据和删除或修改的逻辑就不过多的去展示出来了，主要的主题就是Layui如何给lay-data插入按钮，如何通过按钮获取Id值；大家如果觉得有什么不对的地方，望指出，愿与诸君共同学习进步！
简单使用layui完成表格
weixin_44554896的博客
05-17 743
开发工具与关键技术：Visual Studio 2015 layui 作者：孙水兵 撰写时间：2019年5月 15日 一、layui及数据表格的简介 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，而且门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心...
layui table.render后台传参问题
qq_46679991的博客
08-24 1万+
不知道大家有没有遇到这样的问题想在table.render传除了page 和 limit 的参数 只需要在where 里面 加想传的字段就可以了 layui.use('table', function(){ var userId = user.user[0].userId; var table = layui.table; table.render({ elem: '#test' ,url:'http://localhost:8181/salary/fin
layui渲染数据表格时传参
TO_Web的博客
10-09 2911
layui 表格 怎样进行传参 传参就用到了 where 字段 进行传参 table.render({ elem: '#abc', url: 'baidu.ciom', where: { type: 2, }, page: true });
Layui - 数据表格 table
weixin_42361858的博客
12-03 3820
官网文档：https://www.layui.com/doc/modules/table.html 模块： layui.use('table', function(){ var table = layui.table; }); 目录 简单表格 参数 开放方法 方法 - 事件监听 简单表格 <!-- 注意class、layui参数、方法 --> <!-- 方法渲染 --> <table class="layui-table" id="simple"&gt.
对应layui数据表格的数据接口（url）后台应该怎么写
qq_42257131的博客
01-12 1万+
前端： <table id="cutSwitchAndKnifeGateTable" class="layui-table" lay-data="{url:'/handleCutSwitchAndKnifeGateTableData'}" lay-filter="cutSwitchAndKnifeGateTableEvent"> <thead&...
动态修改layui上传组件的url进行文件上传
qq3892997的博客
04-21 902
动态修改layui上传组件的url进行文件上传
Layui文件单个上传、批量上传、多条件上传
热门推荐
慕白Lee的博客
10-31 4万+
Layui超实用技术解决方案 一、文件上传前端 <div> <div class="layui-upload" align="left"> ...
springboot+websocket+vue实现后端实时向前端推送数据
05-30
以下是一个基于 Spring Boot、WebSocket 和 Vue 实现后端实时向前端推送数据的代码示例： 1. 后端代码 ``` @Controller public class WebSocketController { private final WebSocketService webSocketService; @Autowired public WebSocketController(WebSocketService webSocketService) { this.webSocketService = webSocketService; } @GetMapping("/") public String index() { return "index"; } @Scheduled(fixedDelay = 1000) public void pushData() { webSocketService.sendAll(String.valueOf(System.currentTimeMillis())); } @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } } ``` ``` @Service public class WebSocketService { private final List<Session> sessions = new CopyOnWriteArrayList<>(); public void add(Session session) { sessions.add(session); } public void remove(Session session) { sessions.remove(session); } public void sendAll(String message) { sessions.forEach(session -> { try { session.getBasicRemote().sendText(message); } catch (IOException e) { e.printStackTrace(); } }); } } ``` 2. 前端代码 ``` <template> <div> <h1>Real-time data:</h1> <ul> <li v-for="(data, index) in dataList" :key="index">{{ data }}</li> </ul> </div> </template> <script> export default { data() { return { dataList: [] } }, mounted() { const ws = new WebSocket('ws://localhost:8080/ws'); ws.onmessage = (event) => { this.dataList.push(event.data); }; ws.onclose = () => { console.log('Connection closed'); }; } } </script> ``` 在这个示例中，我们在后端创建了一个定时任务，每秒钟向所有连接上的客户端推送当前时间戳。我们还创建了一个 WebSocketService，用于管理客户端连接和消息发送。 在前端，我们通过 Vue 的 mounted 生命周期创建了一个 WebSocket 连接，并在每次接收到服务器发来的消息时将其添加到一个数据列表中，然后在模板中通过 v-for 渲染出来。 要注意的是，我们在前端中只创建了一个 WebSocket 连接，用于接收服务器推送的数据。这是因为 WebSocket 是全双工通信，可以同时进行发送和接收操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值