layui根据数据状态判断显示内容

该代码段展示了如何使用table.render方法来创建一个数据表格,包括从服务器获取数据、自定义数据解析、根据状态显示不同颜色标记以及根据状态设置不同的行操作工具。表格支持排序、过滤、导出和打印功能,并且根据用户类型限制某些操作。
摘要由CSDN通过智能技术生成

1、数据表格中有以下两种方式 ,根据状态判断和自定义函数模板函数

table.render({
elem: '#list'
, url: '/money/queryAllByPage'
, parseData: function (res) { //res 即为原始返回的数据
return {
"code": res.status, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.obj.total,
"data": res.obj.list //解析数据列表
};
}
, toolbar: '#barTable' //开启头部工具栏,并为其绑定左侧模板
, defaultToolbar: ['filter', 'exports', 'print']
, title: '用户数据表'
, cols: [
[
{field: 'id', title: 'ID', fixed: 'left', sort: true,width:80}
, {field: 'accout', title: '下单账户'}
, {field: 'moneyNum', title: '兑换金额'}
, {field: 'pointNum', title: '积分数量'}
, {field: 'createDt',sort: true, title: '下单时间',templet : "#NOTICE_DATE_TIME"}
, {field: 'status', title: '状态',templet: function(d){
if(d.status==0){
return '<span style="color: #009688;">待通过</span>'
}else if(d.status==2){
return '<span style="color: #1E9FFF;">已驳回</span>'
}else if(d.status==1){
return '<span style="color: #FF5722;">已通过</span>'
}else if(d.status==3){
return '<span style="color: #FF5722;">已撤销</span>'
}
}}
, {fixed: 'right', title: '操作', toolbar: '#barRow',width:220}
]
]
, page: true
});
<script type="text/html" id="NOTICE_DATE_TIME">
    {{#  if(d.createDt !=null){ }}
    <div>{{layui.util.toDateString(d.createDt, 'yyyy/MM/dd HH:mm:ss')}}</div>
    {{#  } else {}}
    <div>{{}}</div>
    {{#  } }}
</script>

2、据行数据属性显示不同的行工具

<!--用于绑定表格行的工具列-->
<script type="text/html" id="barRow">
    {{#  if(d.status== 0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="agree" th:if="${session.user.type eq 1}">通过</a>
    <a class="layui-btn layui-bg-blue layui-btn-xs" lay-event="disagree" th:if="${session.user.type eq 1}">驳回</a>
    {{#  } }}
    {{#  if(d.status== 1){ }}
    <a class="layui-btn layui-bg-blue layui-btn-xs" lay-event="disagree" th:if="${session.user.type eq 1}">驳回</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" >删除</a>
    {{#  } }}
</script>

 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序三两行

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值