layui动态表格动态获取数据undefined？

Posted 2021-07-11 客官不爱喝酒

layui动态表格undefined解决方案

• • 问题所在
  • 错误代码：
  • 正确代码：

问题所在

前几天在使用layui的动态表格渲染数据的时候，使用ajax请求动态获取数据的时候，出现了undefined，我一直想不通是怎么回事，但是一想到ajax是异步请求，那就是说，差不多跟多线程一样，有点那个意思，就是ajax请求的时候，是异步的，并不影响js代码向下执行，也就是说你的数据表格里面的部分数据渲染完成了，但是ajax请求的数据，还未获取回来，那么就导致数据表格在获取的时候某一列出现undefined，解决办法就是：在ajax请求完成以后再去渲染数据表格，这样的话，无论如何都不会出现undefined。

错误代码：

这样的话，先让ajax去动态获取部分的值，然后在通过用户对象里面的部门id属性和部门对象里面的id属性相等就返回该部门名称。这样的话，有可能ajax请求的数据还没有回来，但是数据表格以及渲染完成，导致所属部门这一列会出现undefined。
那么就需要把数据表格渲染的代码，放到ajax请求完成之后，这样的话，是在获取到部门值之后再去进行渲染数据表格，是无论如何也不会出现undefined这种情况的。

        //动态获取部门值
        var deptList="";
        $.ajax({
            url: "/user/getDeptList.mvc",
            type:'GET',
            dataType: "json",
            success: function (data) {
	            var result = JSON.stringify(data.result);
                 deptList=eval("("+result+")");

            }
        });

        // 首次渲染数据
        table.render({
            //指定原始 table 容器的选择器或 DOM，方法渲染方式必填
            elem: '#currentTableId',
            //默认会自动传递两个参数：?page=1&limit=30,page 代表当前页码、limit 代表每页数据量
            url: "/user/getUserList.mvc",
            page: true,
            //通过参数传到后台，本身不做逻辑
            limit: 5,
            limits:[5,10,20],
            toolbar: '#toolbarDemo',
            dataType:"json",
            // 分页查询核心代码
            parseData: function (result) { //result 即为原始返回的数据
                console.log("成功"+result.status+";=="+result.message+";"+result.count);
                return {
                    "code": result.code, //解析接口状态
                    "msg": result.message, //解析提示文本
                    "count": result.count, //解析数据长度
                    "data": result.data //解析数据列表
                };
            },
            done: function(res, curr, count){
                $("[data-filed='userId']").css('display','none')
            },
            text: {
                none: '未能找到匹配的数据'
            },
            //页面默认标题栏，不需要可删除，都是实现好的方案，比如页面打印
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            //表头,设置表头。值是一个二维数组。方法渲染方式必填
            cols: [[
                //field:设定字段名,sort:是否允许排序,templet:模板遵循 laytpl 语法,你可借助它实现逻辑处理
                {type: "checkbox", width: 50, fixed: "left"},
                {title: '序号',width: 80,templet: '#index'},
                {field: 'userId', width: 80, title: 'ID',sort:true},
                {field: 'name', width: 120, title: '用户名'},
                {field: 'password', width: 120, title: '密码'},
                {field: 'nickName', width: 100, title: '真实姓名'},
                {field: 'userType', width: 100, title: '用户身份'},
                {field: 'job', title: '所属部门', width: 100, templet:function(dept){
                        // console.log("d="+JSON.stringify(d))
                        //  JSON.stringify() 将js对象转换为 json字符串

                        console.log("deptValue="+deptList)
                        // 将用户job中的值与部门中的deptId进行比较，如果相等，就返回该部门名称
                        for(var i=0;i<deptList.length;i++){
                            if(deptList[i].deptId == dept.job){
                                return  deptList[i].deptCommunityName;
                            }
                        }
                    }},
                {field: 'display', width: 120, title: '权限状态'},
                //templet使用情况如下，非常强大的一个功能
                {field: 'status', width: 120, title: '是否可用', templet:function(d){
                        if(d.status == 0){

                            // $("[data-field='status']").css('display','none');//关键代码
                            return "禁用";
                        }else{
                            return "可用";
                        }
                    }},
                {title: '操作', minWidth: 50, toolbar: '#currentTableBar', fixed: "right", align: "center"}
            ]]
        });

正确代码：

把数据表格渲染的代码放到ajax请求完成之后的函数中，这样的话，数据表格的渲染是在Ajax获取到部门的数据之后再去渲染数据表格的，就不会出现undefined的情况。

 //动态获取部门值
        var deptList="";
        $.ajax({
            url: "/user/getDeptList.mvc",
            type:'GET',
            dataType: "json",
            success: function (data) {
	            var result = JSON.stringify(data.result);
                 deptList=eval("("+result+")");
           // 首次渲染数据 放到Ajax请求完成之后，否则可能数据表格渲染的时候，Ajax请求的部门值还未获取回来，导致所属部门这列出现undefined
                table.render({
                    //指定原始 table 容器的选择器或 DOM，方法渲染方式必填
                    elem: '#currentTableId',
                    //默认会自动传递两个参数：?page=1&limit=30,page 代表当前页码、limit 代表每页数据量
                    url: "/user/getUserList.mvc",
                    page: true,
                    //通过参数传到后台，本身不做逻辑
                    limit: 5,
                    limits:[5,10,20],
                    toolbar: '#toolbarDemo',
                    dataType:"json",
                    // 分页查询核心代码
                    parseData: function (result) { //result 即为原始返回的数据
                        console.log("成功"+result.status+";=="+result.message+";"+result.count);
                        return {
                            "code": result.code, //解析接口状态
                            "msg": result.message, //解析提示文本
                            "count": result.count, //解析数据长度
                            "data": result.data //解析数据列表
                        };
                    },
                    done: function(res, curr, count){
                        $("[data-filed='userId']").css('display','none')
                    },
                    text: {
                        none: '未能找到匹配的数据'
                    },
                    //页面默认标题栏，不需要可删除，都是实现好的方案，比如页面打印
                    defaultToolbar: ['filter', 'exports', 'print', {
                        title: '提示',
                        layEvent: 'LAYTABLE_TIPS',
                        icon: 'layui-icon-tips'
                    }],
                    //表头,设置表头。值是一个二维数组。方法渲染方式必填
                    cols: [[
                        //field:设定字段名,sort:是否允许排序,templet:模板遵循 laytpl 语法,你可借助它实现逻辑处理
                        {type: "checkbox", width: 50, fixed: "left"},
                        {title: '序号',width: 80,templet: '#index'},
                        {field: 'userId', width: 80, title: 'ID',sort:true},
                        {field: 'name', width: 120, title: '用户名'},
                        {field: 'password', width: 120, title: '密码'},
                        {field: 'nickName', width: 100, title: '真实姓名'},
                        {field: 'userType', width: 100, title: '用户身份'},
                        {field: 'job', title: '所属部门', width: 100, templet:function(dept){
                                // console.log("d="+JSON.stringify(d))
                                //  JSON.stringify() 将js对象转换为 json字符串

                                console.log("deptValue="+deptList)
                                // 将用户job中的值与部门中的deptId进行比较，如果相等，就返回该部门名称
                                for(var i=0;i<deptList.length;i++){
                                    if(deptList[i].deptId == dept.job){
                                        return  deptList[i].deptCommunityName;
                                    }
                                }
                            }},
                        {field: 'display', width: 120, title: '权限状态'},
                        //templet使用情况如下，非常强大的一个功能
                        {field: 'status', width: 120, title: '是否可用', templet:function(d){
                                if(d.status == 0){

                                    // $("[data-field='status']").css('display','none');//关键代码
                                    return "禁用";
                                }else{
                                    return "可用";
                                }
                            }},
                        {title: '操作', minWidth: 50, toolbar: '#currentTableBar', fixed: "right", align: "center"}
                    ]]
                });
            }
        });

核心点就是，Ajax是异步请求，js里面的其他代码执行是不会等Ajax的，所以在使用Ajax的时候需要注意。