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

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

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>

 


相关文章
|
JavaScript Java 数据格式
Layui数据表格(table)前后台交互
Layui数据表格(table)前后台交互
839 0
|
前端开发 JavaScript 安全
前端框架Layui实现动态选项卡&iframe使用(附源码)
前端框架Layui实现动态选项卡&iframe使用(附源码)
2389 0
|
容器
layui下拉多选框xm-select.js插件的使用
layui下拉多选框xm-select.js插件的使用
1390 0
|
前端开发 网络安全 数据库
使用layui弹框实现添加时,当添加成功之后如何进行关闭当前窗口刷新父页面的数据
使用layui弹框实现添加时,当添加成功之后如何进行关闭当前窗口刷新父页面的数据
|
JavaScript
Layui数据表格嵌套文件上传按钮
Layui数据表格嵌套文件上传按钮
451 0
LayUI upload上传组件上传文件的两种方式
LayUI upload上传组件上传文件的两种方式
1264 0
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
3381 0
|
数据格式
Layui中table数据表格使用方法渲染 返回的数据不符合规范,正确的成功状态码应为:“code“: 0异常处理
Layui中table数据表格使用方法渲染 返回的数据不符合规范,正确的成功状态码应为:“code“: 0异常处理
1783 0
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
3632 1
|
SQL 存储
如何在 SQL Server 中使用 `OUTPUT` 子句
【8月更文挑战第10天】
641 7
如何在 SQL Server 中使用 `OUTPUT` 子句