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 

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值