表格后台传过来的时间戳和状态栏的显示问题

提问 未结
4 299
武小贱
武小贱 2017-9-13
悬赏:10飞吻
研究了半天的文档实在没看懂


后台传过来的是这种格式




但是我需要把数据显示成这样




这是我前台获取的数据方式

<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" th:href="@{/plugin/layui/css/layui.css}" media="all">
</head>
<body>


<table class="layui-table" lay-data="{ url:'/mess/message/pagelist', page:true,limit:10,limits:[10,20,30,40,50],id:'idTest'}" lay-filter="demo" >
<thead>
<tr>
<!--<th lay-data="{field:'id', width:80, sort: true, fixed: true}">编号</th>-->
<th lay-data="{field:'title', width:300}">消息标题</th>
<th lay-data="{field:'ctime', width:250}" >收取时间</th>
<th lay-data="{field:'readable', width:200}">状态</th>
<th lay-data="{field:'desc', width:150}">消息类型</th>
<th lay-data="{fixed: 'right', width:160, align:'center', toolbar: '#barDemo'}"></th>
</tr>
</thead>
</table>

<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>


<script type="text/javascript" th:src="@{/plugin/layui/layui.js}"></script>
<script>
layui.use(['table','laydate'], function(){
var table = layui.table;
var laydate = layui.laydate;
//监听表格复选框选择
table.on('checkbox(demo)', function(obj){
console.log(obj)
});
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
//layer.msg('ID:'+ data.id + ' 的查看操作');

//唯一查询,查看详情,更新状态
layui.use(['form', 'jquery', 'layer'], function () {
var layer = layui.layer;
var form = layui.form;
var $ = layui.jquery;
//iframe层
layer.open({
type: 2,
title: '查看消息',
shadeClose: false,
area: ['780px', '80%'],
content: '/mess/message/getMessById?id='+data.id
});
});







}else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
}
});

/*laydate.render({
elem: '#titleTpl'
,value: '2018-08-18' //必须遵循format参数设定的格式
});*/
});
</script>
<!--th:inline="javascript"-->
<!--<script type="text/html" id="titleTpl" >-->

<!--{{ctime}}-->
<!--</script>-->


</body>
</html>
回帖
  • SMALL
    2017-9-13
    自定义模型 直接对你数据进行处理啊 http://www.layui.com/doc/modules/table.html#templet
    0 回复
  • // 初始化转换器
    FastJsonHttpMessageConverter fastConvert = new FastJsonHttpMessageConverter();
    // 初始化一个转换器配置
    FastJsonConfig fastJsonConfig = new FastJsonConfig();
    fastJsonConfig.setSerializerFeatures(SerializerFeature.PrettyFormat, SerializerFeature.WriteDateUseDateFormat);
    // 将配置设置给转换器并添加到HttpMessageConverter转换器列表中
    fastConvert.setFastJsonConfig(fastJsonConfig);
    converters.add(fastConvert);
    0 回复
  • 在th里面追加templet: '<div>{{ getLocalTime(d.part_dv_date) }}</div>',然后在head头部追加第二步的自定义格式时间函数就可以了,如果你要格式化成你想要的时间格式,那你就修改你的getLocalTime函数
    第一:
    <th lay-data="{field:'part_dv_date', width:135, sort: true,templet: '<div>{{ getLocalTime(d.part_dv_date) }}</div>'}">日程</th>
    第二:
    <script>
    function getLocalTime(nS) {
    return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
    }
    </script>
    0 回复
  • 这有你想要的:
    http://fly.layui.com/jie/14509/
    0 回复