layui table templet 显示字段外键对应名

最近练手的这个项目后台管理用到了 layui table，遇到的问题记录一下。

按照数据库读出来我的品牌这里是 id 外键值，感觉不好看，为了方便理解所以想转成对应的 品牌名字（如上图）。

需要用到 layui 表格的 templet 定制模板，ajax 对应外键 id，匹配名字。

我表格是方法级渲染，在表头对应字段定制模板；注意内容一定要被 <div> 标签包裹。

, {field: 'brandId', title: '品牌ID', width: 120,templet:'<div>{{sotitle(d.brandId)}}</div>'}

 拿到brandId,去后台brand List匹配。然后返回匹配到的brandName值。（放在 layui.use(['table','layer'], function() {...});外面）

    //将id变成内容，应用template模板
    function sotitle(brandId){
        var bId = brandId;
        var title;
        $.ajax({
            url:'/showallbrand',//你的后台请求路径
            dataType:'json',
            async: false,//同步
            success:function(data){
                    $.each(data,function (index, obj) {
                        if(obj.brandId==bId){
                            title=obj.brandName;
                            //console.log(obj.brandId,obj.brandName);
                        }
                    });
            }
        });
        return title;
    };

 返回的json对象：

[
{"brandId":1,"brandName":"小米","brandImg":"####"}
,{"brandId":2,"brandName":"华为","brandImg":"####"}
,{"brandId":3,"brandName":"联想","brandImg":"####"}
,{"brandId":4,"brandName":"魅族","brandImg":"####"}
,{"brandId":5,"brandName":"佳能","brandImg":"####"}
,{"brandId":6,"brandName":"微软","brandImg":"####"}
,{"brandId":7,"brandName":"索尼","brandImg":"####"}
]

 

出现的问题：

显示 undefined，无法填充遍历的值。

JQuery 的 ajax 是异步的，异步返回的 brandName 显示为 undefined，因为 ajax 是异步的，异步只能回调。往往没执行完就return 了，所以会一直返回 undefined。改成同步就可以了。

解决方法：加上async: false,变为同步。 

参考：https://www.cnblogs.com/terryMe/p/6130309.html