场景,再一次表格展示中需要实时更新,数据会通过后台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>