場景，再一次表格展示中需要實時更新，數據會通過後臺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>