问题所在
前几天在使用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的时候需要注意。