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

最新推荐文章于 2024-11-17 22:19:51 发布

grootblockchain

最新推荐文章于 2024-11-17 22:19:51 发布

阅读量1.3w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： layui websocket 前端文章标签： websocket layui data 后台推送

本文链接：https://blog.youkuaiyun.com/CaptainJava/article/details/102853088

前端同时被 3 个专栏收录

10 篇文章

订阅专栏

layui

2 篇文章

订阅专栏

websocket

1 篇文章

订阅专栏

本文介绍如何利用WebSocket实现实时数据更新，通过在Layui表格中动态传值，配合前端进度条展示，实现数据的实时刷新。文章提供了一个具体的代码示例，展示了如何在不使用url的情况下，通过WebSocket接收数据并更新表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

请看代码（代码中table嵌套了element，单元格中插入进度条。如果需要看这两者作何使用的可以看上一篇博文https://blog.youkuaiyun.com/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>