先记载一下网络上搜索到的结果:
第一种:通过 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: '暂无相关数据' //默认:无数据。
}
});
最新回复