Layui表格数据如何实时更新？表格 实现原理是 如何 实现的？为什么ajax写html元素 节点值，显示不更新？ · Issue #I7W4JU · Layui/layui |
您所在的位置：网站首页 › 页面数据实时刷新什么意思 › Layui表格数据如何实时更新？表格 实现原理是 如何 实现的？为什么ajax写html元素 节点值，显示不更新？ · Issue #I7W4JU · Layui/layui |
|
版本号
2.8.3 浏览器Google Chrome 版本 115.0.5790.102（正式版本） （32 位） 问题类型功能困惑 问题描述使用Layui自动渲染（有的地方叫模板渲染）做的表格，使用 定时函数setInterval(yqsqPostRequest, 10000, table)，用Ajax自己来发请求拿后端数据，实时刷新到页面上、 经 测试，后端 数据已成功拿到，测试了3种方法均无法实时刷新页面表格 中的数据，困扰 了很久？ 方法一：html中增加meta标签属性：，这种方法能页面能获取实时数据，但是页面每个设定的时间10秒，会 闪一次（刷新）。 方法 二：手动更新表格Table的缓存cache,和Html元素节点的value（或文本），之后每次html元素节点和Table缓存均能拿到最新的 后端 数据，但显示页面 表格数据无变化， 测试了未使用Layui的 节点 元素标签，使用ajax请求拿到后端 数据进行更新元素节点value（或文本），页面显示值 实时刷新，在此就 比较困扰，layui表格的实现原理到底 是 什么样的？为什么不能 用ajax+DOM操作更新数据？为 什么html元素节点 已经更新 了，而显示页面 中的不 进行 更新？ 方法三 ：使用Layui表格中的Relaod方法，reloadData方法，经测试，方法 调用 后，表格 缓存和html元素 节点会 进行 更新，但显示页面闪 一下，表格 内的 数据就啥也没有了？而用render方法时，表格缓存不会 进行更新，但页面元素节点会 进行 更新，显示页面表格内的 数据依然不会实时变化。 模拟了Layui表格缓存Cache、元素 节点和显示页面内容 之间的关系，发现1、html元素节点标签值或文本的 改变，表格显示立马 改变，但表格 缓存是否跟着 改变 未知？ 2、表格缓存值 改变 ，html元素 节点 标签 值或文本会 发生改变 求帮忙 解答1、Layui实现原理到底 是如何 实现的？表格缓存cache、html元素节点标签和页面 显示去的 表格到底是射门 样的 关系？ 2、拿到 后端 数据后，页面表格如何 实现数据的实时更新？ 粗体 粗体 业务代码 HTML,： {# yqsq页面继承自frame.html #} {% extends 'frame.html' %} {% load static %} {# 更改页面标题 #} {% block page_title %} 雨情水情 {% endblock page_title %} {% comment %} {# 更改meta标签 #} {% block page_meta_tag %} {% endblock page_meta_tag %} {% endcomment %} {# 更改yxjl.html"导航树菜单" #} {% block page_nav_tree %} 运行报表 实时液位 雨情水情 运行记录 {% endblock page_nav_tree%}} {# 更改"页面表单"} {% block page_forms %} ;;;;;;;; ;;;;;;;; ;;;;;;;; ;;;;;;;; 设施类别 {{form.fac_type}} 值守类型 {{form.fac_duty_type}} 修改 查询 新增 导出 打印 {% endblock page_forms %} {% block page_body %} 序号 设施名称 排水设施运行水位参考汇总表 泵机运行状态 通讯状态 低保护水位/污水 高警戒水位/污水 启动水位/污水 污水液位 低保护水位/雨水 高警戒水位/雨水 启动水位/雨水 雨水液位 备注 运行状态 停机状态 {% for c_id,k_val in realtime_level.items %} {{ k_val.0 }} {{ k_val.1 }} {{ k_val.2 }} {{ k_val.3 }} {{ k_val.4 }} {{ k_val.5 }} {{ k_val.6 }} {{ k_val.7 }} {{ k_val.8 }} {{ k_val.9 }} {{ k_val.10 }} {{ k_val.11 }} {{ net_status}} {% endfor %}*注意：须配置为“集水池 /雨水（主）”或“集水池 /雨水（主）”后方能实时监测 {% endblock page_body %} {% block page_footer %}此处为页脚！测试值： {{ realtime_level.7.9 }} {% endblock page_footer %} {% block javascript %} {% endblock javascript %} JavaScript： window.onload = function() { //nav导航事件监听 layui.use(['element', 'util', 'table','jquery'], function(util) { var element = layui.element; var util = layui.util; var $ = layui.$; var table = layui.table; var elem=document.getElementById("ID-table-yqsq"); console.log("===========>",elem); console.log("===========>",table); // yqsq.html页面switch定时刷新 setInterval(yqsqPostRequest, 10000, table); // 整页面重新加载 //window.location.reload(); }); } // 功能：请求后台最新数据 function yqsqPostRequest(table) { var jsonBackendData; var msg = "ceshi"; // Django中POST请求须服务器下发的token与客户端cookie内的token比较，一致才能正确请求与响应获取cookie中csrf的token设置请求头“X-CSRFToken”属性 var csrfToken = (document.cookie).split("="); if (csrfToken[1] != null) { var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : window.ActiveXObject("Microsoft.XMLHTTP"); xhr.open("POST", "./yqsq", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.setRequestHeader("X-CSRFToken", csrfToken[1]); xhr.send(msg); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status === 304 || (xhr.status >= 200 && xhr.status < 300)) { // 获得响应数据 var d = [],obj = {}; jsonBackendData = JSON.parse(xhr.responseText); // 更新表格缓存和标签 for (var k_i in jsonBackendData) { /* // 获得前端待更新的元素 var str_element_id = String(k_i); var element_tr = document.getElementById(str_element_id); // 更新表格缓存 table.cache["ID-table-yqsq"][k_i] = jsonBackendData[k_i]; // 更新元素节点内文本 element_tr.cells[0].innerHTML = jsonBackendData[k_i][0]; element_tr.cells[1].innerHTML = jsonBackendData[k_i][1]; element_tr.cells[2].innerHTML = jsonBackendData[k_i][2]; element_tr.cells[3].innerHTML = jsonBackendData[k_i][3]; element_tr.cells[4].innerHTML = jsonBackendData[k_i][4]; element_tr.cells[5].innerHTML = jsonBackendData[k_i][5]; element_tr.cells[6].innerHTML = jsonBackendData[k_i][6]; element_tr.cells[7].innerHTML = jsonBackendData[k_i][7]; element_tr.cells[8].innerHTML = jsonBackendData[k_i][8]; element_tr.cells[9].innerHTML = jsonBackendData[k_i][9]; element_tr.cells[10].innerHTML = jsonBackendData[k_i][10]; element_tr.cells[11].innerHTML = jsonBackendData[k_i][11]; */ //console.log("backend", jsonBackendData[k_i]); //console.log("table cache", table.cache["ID-table-yqsq"][k_i]); // 表格数据重新渲染和更新 //table.reloadData("ID-table-yqsq"); //table.renderData({elem: "ID-table-yqsq"}); /*, done: function(res, curr, count, origin){ console.log("re++++++",res); // 得到当前渲染的数据 console.log(curr); // 得到当前页码 console.log(count); // 得到数据总量 console.log(origin); // 回调函数所执行的来源 --- 2.8.7+ } }); */ // tabele数据格式为[{},{},{},{},{},{},...{}] // 获取table每一行的数据对象 for(var j in jsonBackendData[k_i]) { obj[j] = jsonBackendData[k_i][j]; // console.log("2loop",obj[j] ); // 数据存入数组形成规范的表格数据 } // 对象深拷贝,$.extend(true,target,obj1,..,objn)为jquery深拷贝函数 //d[k_i] = $.extend(true,d[k_i],obj); d[k_i] = Object.assign({},obj); } // ceshi document.getElementById("debug").innerHTML = jsonBackendData[7][9]; //console.log("=====table cache",table); console.log(table.render({elem: "ID-table-yqsq",data:d})); //table.reloadData("ID-table-yqsq",{data:d}); //table.reloadData("ID-table-yqsq",{data:d}); //console.log(table.reload("ID-table-yqsq",{data:d})); console.log("=====table cache",table); // 发送请求和接收响应成功，返回'ok' exeStatus = "ok" } else { // 发送请求成功，但响应失败，返回'request_ok,response_fail' exeStatus = "request_ok,response_fail"; } } else { // 发送请求失败，返回'fail' exeStatus = "fail"; } } } } 截图补充暂无 演示地址 友好承诺 我承诺将本着相互尊重、理解和友善的态度进行交流，共同维护 Layui 良好的社区氛围。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |