热更新layui的table单元格信息，无需重新加载网络请求

诺离

于 2024-07-20 17:36:47 发布

阅读量43

点赞数 2

文章标签： layui windows 前端

本文链接：https://blog.csdn.net/qq85913323/article/details/140574689

版权


//定义要检测的字段，只有这些字段发生了变化才进行更新单元格
var deviceListCols = ["device_name","task_state","log_content"];
//记录原始的表格数据
var deviceListData = []

   table.render({
            elem: '#currentTableId',
            url: '/api/user/device/list',
            toolbar: '#toolbarDemo',
            height: 'full-50',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'device_name',width: 150, title: '设备名称', edit:true, templet: '#device_name'},
                {field: 'task_state',  title: '当前任务', templet: '#task_state'},
                {field: 'log_content',  title: '脚本明细',templet: '#task_params'},
                {title: '操作', width: 140, toolbar: '#listMenu', align: "center"}
            ]],
            skin: 'line',
            //保存原始的数据
            done:function(res){
                deviceListData = res.data;
            }
        });
        


   //热更新layui table单元格信息
   //注意：如果表格使用了templet模版，则保证模版id和field一致
        function updateDeviceTable(newData,rows){
            for(var i=0;i<newData.length;i++){
                for(var j=0;j<deviceListData.length;j++){
                    if(newData[i].id == deviceListData[j].id){
                        //遍历所有字段
                        var row = 0;

                        for (var keyIndex=0;keyIndex<deviceListCols.length;keyIndex++){
                            var key = deviceListCols[keyIndex];
                            //比较字段是否发生改变
                            if(newData[i][key] != deviceListData[j][key]){
                                var index = i;
                                var $td = $("div[lay-id='currentTableId']").find("tr[data-index='"+index+"']").find("td[data-field='"+key+"']").find("div");
                                var tpl = $("#"+key);
                       			//获取该字段是否是模版
                                if(tpl != undefined){
                                	//重新渲染该模版
                                    var html = laytpl(tpl.html()).render(newData[i]);
                                    $td.html(html);
                                    deviceListData[j][key] = newData[i][key];
                                }else{
                                    $td.html(newData[i][key]);  
                                    deviceListData[j][key] = newData[i][key];  
                                }
                            }
                        }
						//额外的（假设你的模版里面用了其他字段，可以在此处追加）
						//但是模版的名字需要在这里提前写好
						//所以这个函数还不算完美。
                        for(var keyIndex in rows){
                            var key = rows[keyIndex];
       
                            if(newData[i][key] != deviceListData[j][key]){
                                console.log(key,"发生变动",i,j)
                                var index = i;
                                var field = "device_name";
                                var $td = $("div[lay-id='currentTableId']").find("tr[data-index='"+index+"']").find("td[data-field='"+field+"']").find("div");
                                var tpl = $("#"+field);
                                if(tpl != undefined){
                                    var html = laytpl(tpl.html()).render(newData[i]);
                                    $td.html(html);
                                    deviceListData[j][key] = newData[i][key];
                                    console.log("重新渲染",tpl.html(),newData[i]);
                                }else{
                                    $td.html(newData[i][key]); 
                                    deviceListData[j][key] = newData[i][key];
                                }
    
                            }

                        }
                      
                
                        console.log("-------")
                    }
                }
            }
        }

setInterval(function(){
     if(globalGroupId>0){
         $.get("/api/user/device/list?group_id="+globalGroupId,function(res){
             updateDeviceTable(res.data,['is_screen','is_charging','battery']);
         });
     }
 
 },1500);