使用Layui制作的简单数据表格

likeeefish

已于 2022-06-18 16:28:24 修改

阅读量1.2k

点赞数

分类专栏： Project 文章标签： layui 前端

于 2022-06-18 09:01:19 首次发布

本文链接：https://blog.csdn.net/pcccy/article/details/125338831

版权

Project 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、创建

2、后台编写

3、前端编写

成果图：

1、创建

整体模板来自Layui前端框架文档，可自行参考。

先使用MybatisPlusGenerator 自动生成实体类、mapper、service、controller类。

2、后台编写

一些注解解释：

@NoArgsConstructor：无参构造方法

@AllArgsConstructor：有参构造方法

@Data：get，set方法

@Accessors(chain = true)：链式访问

@SuppressWarnings("all")：错误信息隐藏

package com.hs.layui.controller;

/**
* <p>
* 职工表前端控制器
* </p>
*
* @author wj
* @since 2022-06-17
*/
@RestController
@RequestMapping("/employee")
public class EmployeeController {

@Autowired
private IEmployeeService employeeService;

@GetMapping("/list")
public R<List<Employee>> list(PageBean pageBean,String name){
//PageBean里面封装了分页的参数
//根据分页的参数取数据库分页查询
Page<Employee> page = employeeService.page(
Page.of(pageBean.getPage(),pageBean.getLimit()),
new QueryWrapper<Employee>().like(!StringUtils.isEmpty(name),"name",name));
//page对象里面包含了数据库的数据 records，还包含了总条数total
return new R(0,"",page.getTotal(),page.getRecords());

}

}

找到layui文档

通过点击上图的路径可跳转到下图

观察可看出：返回的对象中有

{

"code"：响应，响应码为0代表成功

"msg"：提示信息

"count"：数据总数

"data"：[ { },{ }... ] 对象

}

但如果和我一样没有前三个对象 ↓

咱就可以自己建一个专门返回数据的类，如下图

data返回的是数组，so

因为需要用到分页，所以要建一个PageBean的类来存放前端分页需要的字段

3、前端编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <script src="${springMacroRequestContext.getContextPath()}/layui/layui.js"></script>
    <link rel="stylesheet" href="${springMacroRequestContext.getContextPath()}/layui/css/layui.css">
    <script src="${springMacroRequestContext.getContextPath()}/layui/config.js"></script>
</head>

<body>
<style>
    input{
        /*
        !important 最高优先级
        width:宽度  heigh：高度
         */
        border-color: black !important;
        width: 300px !important;
        /*
        块状block，行内inline，行内块状inline-block
         */
        display: inline-block !important;

    }

</style>

<div>
    <input class="layui-input" type="text" id="key" placeholder="请输入要查询的名称" />
    <button class="layui-btn layui-btn-normal" id = "search">搜索</button>
</div>

    <table id="empTable"></table>

<script>

    layui.use(['table',"jquery"],()=>{
        //获取table模块对象
        let table = layui.table
        let $ = layui.jquery

        $("#search").click(()=>{
            //拿到输入框的值
            let name = $("#key").val()
            //刷新表格的数据
            table.reload('empTable', {
               where: {
                    //设定异步数据接口的额外参数
                    name //直接把变量放进来，那么这个键的名称和变量名称保持一致
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })

        //渲染表格数据
        table.render({
            elem: '#empTable', //要被渲染的表格的id
            height: 470,
            url: '${springMacroRequestContext.getContextPath()}/employee/list', //数据接口
            page: true, //开启分页
            cols: [[ //表头
                //列的定义  列field和对象的属性要相同
                /*
                *   sort：是否可以排序
                *   fixed：文字是否固定在左侧
                */
                {field: 'id', title: '员工ID', width:130}
                ,{field: 'name', title: '员工名称'}
                ,{field: 'phone', title: '员工电话'}
                ,{field: 'deptNo', title: '员工类别', width:130}
                ,{field: 'address', title: '员工地址'}
            ]]
        });
    })

</script>

</body>
</html>

likeeefish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Layui制作的简单数据表格

目录1、创建2、后台编写3、前端编写成果图：表格和分页模板来自Layui前端框架文档。先使用MybatisPlusGenerator 自动生成实体类、mapper、service、controller类。一些注解解释：@NoArgsConstructor：无参构造方法@AllArgsConstructor：有参构造方法@Data：get，set方法@Accessors(chain = true)：链式访问@SuppressWarnings("all")：错误信息
复制链接

扫一扫

专栏目录