博客

公司有个需求，需要异步更新表格数据，尝试使用表格刷新功能，但是会有闪一下的现象，我自己看都难受，别提交付给客户了，大家可以自行试一下。

function reload_table_data(){
    //获取当前页
    var recodePage = $(".layui-laypage-skip .layui-input").val();
    //获取当前页条数
    var recodeLimit = $(".layui-laypage-limits").find("option:selected").val();
    console.log("当前页", recodePage)
    console.log("当前条数", recodeLimit)
    layui.table.reload("devices_table_table", {
        page: {
            curr: recodePage
        }
    })
}

解决方案如下：

第一步：定义表格时，给表格需要更新的列加上一个标签。

{
    title: '门禁状态',
    field: 'door_status',
    align: 'center',
    minWidth: 50,
    templet: function (d){
        res = ""
        switch (parseInt(d.door_status)) {
            case 1:
                res = "<span data-door='"+ d.id +"' style=\"color: #00B83F\">开启</span>"
                break
            case 2:
                res = "<span data-door='"+ d.id +"' style=\"color: gray\">关闭</span>"
                break
            case 3:
                res = "<span data-door='"+ d.id +"' style=\"color: #FF0022\">异常</span>"
                break
            default:
                res = "<span data-door='"+ d.id +"' style=\"color: #FF0022\">其他</span>"
        }
        return res
    }
},

第二步：然后动态更新标签内内容即可。

function doorStatusDisplay(device){
    var device_obj = $("span[data-door="+ device.id +"]")
    switch (parseInt(device.status)) {
        case 1:
            device_obj.css("color", "#00B83F").html("开启")
            break
        case 2:
            device_obj.css("color", "gray").html("关闭")
            break
        case 3:
            device_obj.css("color", "#FF0022").html("异常")
            break
        default:
            device_obj.css("color", "#FF0022").html("其他")
        }
}


$.ajax({
    type: 'get',
    url: GET_DEVICES,
    data: {page: recodePage, limit: recodeLimit, keyword: keyword},
    beforeSend: null,
    success: function (res) {
        if (res.code) {
            return;
        }
        res.data.devices.forEach(item => {
            doorStatusDisplay(item)
        })
    },
})

关键步骤是给需要修改的列添加上自定义标签，然后通过标签获取到元素，实现动态更新。至于获取数据，你们可以ajax轮询更新数据或者用websocket，按照自己需求来。