先记载一下网络上搜索到的结果:
第一种:通过 templet 模板实现

{field: 'status', title: '状态', width: '20%',templet:'#status'}
 
<script type="text/html" id="status">
    {{#  if(d.status=='0'){ }}
       有效
    {{#  }else{ }}
        无效
    {{# } }}
</script>

第二种:通过 done 回调进行遍历

// 方法级渲染
        table.render({
            id: 'demoList',
            elem: '#demoList'
            , url: 'showDemoList'
            , cols: [[
                {checkbox: true, fixed: true, width: '10%'}
                , {field: 'id', title: '编号', width: '15%', sort: true}
                , {field: 'pipe_id', title: '机构ID', width: '15%'}
                , {field: 'bank_id', title: '银行ID', width: '10%'}
                , {field: 'pipe_cost', title: '成本', width: '10%'}
                , {field: 'status', title: '状态', width: '20%'}
                , {field: 'remark', title: '操作', width: '20%', toolbar: '#toolBar'}
            ]],
            done: function (res, curr, count) {
                // 如果是异步请求数据方式,res即为你接口返回的信息。
                // 如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
                $("[data-field='status']").children().each(function () {
                    if ($(this).text() == '0') {
                        $(this).text('有效');
                    } else if ($(this).text() == '1') {
                        $(this).text('无效');
                    }
                });
            }
            , page: true
            , height: 'full-83'
        });

第三种:fsLayuiPlugin数据表格动态转义,演示地址——https://fslayui.itcto.cn/

上面第一、二种对我来说,目前还是比较现实的,但是还是达不到我的要求,因为表格中的数据代码值不固定,有时候多,有时候少,另外,代码值对应的代码名称也可能会发生变化啊,所以需要根据显示的代码值与后台代码值进行比对,比对成功就显示代码名称,下面是对第二种进行改造之后的代码,仅作为一个记录而已。毕竟对layui不熟,代码也许还存在许多问题。

table.render({
                    elem: '#user-table',
                    url:'http://192.168.23.254:801/ctl_systemuser.fsp?proc=getuser&token='+sessionsdata.data[0].token,
                    page: {
                        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局,每页记录数,总记录数,上一页,当前页,下一页,跳转到指定页
                        //,curr: 5 //设定初始在第 5 页
                        ,groups: 1 //只显示 1 个连续页码
                        ,first: false //不显示首页
                        ,last: false //不显示尾页
                    },
                    cols: cols,
                    even: true,
                    toolbar: '#user-toolbar',
                    defaultToolbar: [{
                        title: '刷新',
                        layEvent: 'refresh',
                        icon: 'layui-icon-refresh',
                    }, 'filter', 'print', 'exports']
                    //下面开始进行分页显示
                    ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据,res为从url中get到的数据
                        var result;
                        result=res.data.slice(0,this.limit);
                        //console.log(res);
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.total, //解析数据长度
                            //"count": count, //解析数据长度
                            "data": result //解析数据列表
                        };
                    }
                    ,done:function(res,curr,count){
                        
                        //如果是异步请求数据方式,res即为你接口返回的信息。
                        //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
                        //console.log(res,curr,count);
                        //先将用户角色信息保存到本地
                        $.ajax({
                                url: 'http://192.168.23.254:801/ctl_public.fsp?proc=getuserrole',
                                success: function (data) {
                                    var userrole=data;
                                    //console.log(userrole);
                                    //下面将后台返回的角色信息存到本地
                                    layui.sessionData('userrole',{
                                        key:'data',
                                        value:[userrole]
                                            }
                                        );
                                    //上面给userrole json字符串又加了一层data,所以下面userrolejson对象取第一层的data
                                    var userrolejson=JSON.parse(layui.sessionData('userrole').data);
                                    //console.log(userrolejson);
                                     //console.log(index,item);
                                    //userrolejson为多层对象,下面只需要用到最里层的data
                                        $.each(userrolejson.data,function (index,item) {
                                            $("[data-field = 'user_roleid']").children().each(function (res) {
                                       //console.log(index,item.role_id,item.role_name,);
                                               if ($(this).text() == item.role_id) {
                                                   // console.log($(this).text(),item.role_name);
                                                   $(this).text(item.role_name);
                                                   
                                                } 
                                        });
                                             })
                                            
                                }
                        });
                    }
                    ,text: {
                        none: '暂无相关数据' //默认:无数据。
                        }
                });

发表评论