layui中table基本操作及时间的格式化

最新推荐文章于 2022-03-25 15:41:40 发布

lihaile_admin

最新推荐文章于 2022-03-25 15:41:40 发布

阅读量679

点赞数

本文链接：https://blog.csdn.net/qq_51659104/article/details/113415815

版权

layui table基本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
</head>
<body>


<table id="demo" lay-filter="test"></table>
<script>
    // 必须要导入 table模块 layui.use('table',...)
    /**
     * 默认的数据格式
     * {
  "code": 0,   0为正常  1为异常
  "msg": "",   当code为1就会显示msg的值
  "count": 1000,  用于分页,数据的计数==>数据总条数   如每页10条 共10页  总数据为100 ==>count=100
  "data": [{}, {}]    展示数据的对象   data==>List<T>
}
     */
    layui.use(["table","laytpl"],function(){
        var table = layui.table;
        table.render({
            elem: '#demo',
            id: 'demo',
            url:'/emp/getEmpList',
            page:true,
            height: 312,
        cols: [[ //表头
            {field: 'empno', title: 'ID', sort: true, fixed: 'left'}
            ,{field: 'ename', title: '用户名'}
            ,{field: 'job', title: '性别', sort: true}
            ,{field: 'mgr', title: '城市'}
            ,{field: 'hireDate', title: '评分',templet : "<div>{{layui.util.toDateString(d.sbj_start, 'yyyy-MM-dd HH:mm:ss')}}</div>", width: 80, sort: true}
            ,{field:"right",title:"操作",toolbar: '#barDemo'}
        ]],
        page:{limit:4//每页显示1条
        ,limits:[4,6,8] //可选每页条数
        ,first: '首页' //首页显示文字，默认显示页号
        ,last: '尾页'
        ,prev: '<em>←</em>' //上一页显示内容，默认显示 > <
        ,next: '<i class="layui-icon layui-icon-next"></i>'
        ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
        }
    })
        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    // 向服务端发送删除请求
                    // 此处可以发送ajax
                    // obj.del(); //删除对应行（tr）的DOM结构
                    $.post("/emp/deleteEmp/"+data.empno,function (result) {
                        if (result){
                            layer.msg("OK");
                            table.reload('demo',{});
                        } else {
                            layer.msg("NO")
                        }
                    })
                    layer.close(index);

                });
            } else if(layEvent === 'edit'){ //编辑
                // 向服务端发送更新请求
                // 同步更新缓存对应的值
                //这是静态修改
                // obj.update({
                //     username: 'shine001',
                //     city: '北京',
                //     sex:'女',
                //     score:99});
                table.reload();
            }
        });
    });
</script>
<!-- 如下script可以定义在页面的任何位置 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>

返回的数据类型

package com.qf.emp.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class TableResult<T> {
    private Integer code=0;   //0为正常   1为异常
    private String msg="";    //当code为1就会显示msg的值
    private Integer count;    //用于分页  数据的总条数
    private List<T> data;     //展示数据的对象

    public static <T> TableResult<T> getSuccess(Integer count,List<T> data){
        return new TableResult<>(0,"",count,data);
    }

    public static <T> TableResult<T> getSuccessWithMsg(String msg,Integer count,List<T> data){
        return new TableResult<>(0,"",count,data);
    }

    public static <T> TableResult<T> getFail(String msg){
        return new TableResult<>(1,msg,null,null);
    }

    public static <T> TableResult<T> getFailWithData(String msg,Integer count,List<T> data){
        return new TableResult<>(1,msg,count,data);
    }
}

Controller部分代码

 @Autowired
    private EmpService empService;

    @RequestMapping("/getEmpList")
    @ResponseBody
    public TableResult getEmpList(@RequestParam(defaultValue = "1") Integer page,@RequestParam(defaultValue = "5") Integer limit){
        PageHelper.startPage(page,limit);
        List<Emp> empList = empService.getEmpList();
        PageInfo<Emp> pageInfo=new PageInfo<>(empList);
        return TableResult.getSuccess((int) pageInfo.getTotal(),pageInfo.getList());
    }

lihaile_admin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui中table基本操作及时间的格式化

layui table基本操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/layui/css/layui.css"> <script src="/layui/layui.js"></scr
复制链接

扫一扫