LayUI---数据表格

1、创建table数据表格

2、后台代码

1、创建table数据表格

创建一个table实例最简单的方式是，在页面放置一个元素 <table id="demo"></table>，然后通过 table.render() 方法指定该容器，如下：

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

以上就是简单的数据表格，使用方法如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>table表格数据</title><#--引入layui文件--><script src="${springMacroRequestContext.getContextPath()}/layui/layui.js"></script><script src="${springMacroRequestContext.getContextPath()}/layui/config.js"></script><link rel="stylesheet" href="${springMacroRequestContext.getContextPath()}/layui/css/layui.css">
</head>
<style>/*添加样式*/body{text-align: center;}input{border-color: red !important;width: 300px !important;display: inline-block !important;}
</style>
<body>//模糊查询<div>员工名称：<input class = "layui-input" type = "text" id = "key"><button class = "layui-btn layui-btn-danger" id = "search">搜索</button></div><#--数据表格--><table id="id"></table><script>layui.use(["table","jquery"],()=>{//获取table、jquery对象let table = layui.table,$ = layui.jquery//给按钮添加事件$("#search").click(()=>{//#search：按钮id//拿到输入框的值let v = $("#key").val()//#key：输入框id//刷新表单数据table.reload('empTab', {where: {v}, //设定异步数据接口的额外参数page: {curr: 1 //从第几页开始分页}});})//渲染表格数据table.render({//元素的id，对应表格idelem: "#empTab", //表格高度height: 400,//数据接口，后台访问页面路径url: "${springMacroRequestContext.getContextPath()}/employee/list", //开启分页page: true, //表头cols: [[{field: 'id', title: '员工编号'},{field: 'name', title: '员工名称'},{field: 'phone', title: '员工号码'},{field: 'deptNo', title: '员工部门'},{field: 'address', title: '员工地址'}]]});})
</script>
</body>
</html>

2、后台代码

controller：

package com.yx.layui02.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.yx.layui02.dto.PageBean;
import com.yx.layui02.dto.R;
import com.yx.layui02.model.Employee;
import com.yx.layui02.service.IEmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.List;/*** <p>* 职工表 前端控制器* </p>** @author yx* @since 2022-06-17*/
@RestController
@RequestMapping("/employee")
@SuppressWarnings("all")
public class EmployeeController {@Autowiredprivate IEmployeeService employeeService;@GetMapping("/list")public R<List<Employee>> list(PageBean pageBean, String name){Page<Employee> page = employeeService.page(Page.of(pageBean.getPage(),pageBean.getLimit()),new QueryWrapper<Employee>().like(!StringUtils.isEmpty(name),"name",name));return new R(0, "", page.getTotal(), page.getRecords());}
}

pageBean：

package com.yx.layui02.dto;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;@Data
@NoArgsConstructor
@AllArgsConstructor
@SuppressWarnings("all")
@Accessors(chain = true)
public class PageBean {private Integer page;private Integer limit;}

响应json数据：

package com.yx.layui02.dto;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;@Data
@NoArgsConstructor
@AllArgsConstructor
@SuppressWarnings("all")
@Accessors(chain = true)
public class R<T> {private Integer code;private String msg;private Long count;private T data;}

映射URL文件：

package com.yx.layui02.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
@SuppressWarnings("all")
@RequestMapping("/page")
public class RedirectController {@RequestMapping("/{path}")public String path(@PathVariable ("path") String path){return path;}@RequestMapping("/{dir}/{path}")public String path(@PathVariable("dir") String dir, @PathVariable ("path") String path){return dir+"/"+path;}}

LayUI---数据表格相关推荐

在layui中使用ajax传值给后台,浅谈layui 数据表格前后台传值的问题
1.1查询 layui.use('table', function() { var table = layui.table; table.render({ elem : '#demo', url : ...
解决Layui数据表格无数据最后列被顶出去的问题
解决Layui数据表格无数据最后列被顶出去的问题参考文章: (1)解决Layui数据表格无数据最后列被顶出去的问题 (2)https://www.cnblogs.com/Caoxdong/p/963 ...
php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
如何修改layui数据表格绑定的开关事件？
首先搭建layui 数据表格实例,由于篇幅有限,以下只展示局部关键的代码信息 tableCols = [[{field: 'id', title: 'ID', width:80,align:'cent ...
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码
一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等查看详情 {{# if (d.hotcake === '超级爆款') ...
LayUI数据表格复选框显示不居中问题
LayUI数据表格复选框显示不居中问题样式(layui.css)文件中增加: .layui-table-cell .layui-form-checkbox[lay-skin="primar ...
layui 鼠标移入变为小手_如何在 LayUI 数据表格的列元素上，鼠标悬浮，显示所有文字内容（修改源码）...
文中使用的LayUI版本:layui-v2.5.5 问题描述: 最近参与开发了问题分析: 要实现鼠标悬浮显示所有内容,一般采用的都是给对应元素上添加 title 属性,这样当鼠标悬浮在对应列的时候, ...
html表格不能横向自动展示,layui数据表格table横向滚动条不显示纵向滚动条显示不完整...
layui数据表格table横向滚动条不显示纵向滚动条显示不完整 layui数据表格table横向滚动条不显示,纵向滚动条显示不完整需要把heigh高度写死 table.render({ elem: ...

LayUI---数据表格

1、创建table数据表格

2、后台代码

LayUI---数据表格相关推荐

最新文章

热门文章