layui数据表格的使用

矫情吗；* 2021-12-10 03:35 455阅读 0赞

代码清单

welcom.html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>layui数据表格</title>
    		<link rel="stylesheet" href="css/layui.css">
    		<script src="layui.js"></script>
    	</head>
    	<body>
    		<table class="layui-hide" id="test"></table>
    		<script type="text/javascript"  >
    		layui.use('table', function(){
    		  var table = layui.table;		  
    		  table.render({
    			elem: '#test'
    			,url:'getList'
    			,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    			,cols: [
    				[
    			  {field:'id', width:80, title: 'ID', sort: true}
    			  ,{field:'name', width:80, title: '用户名'}
    			  ,{field:'realName', width:80, title: '姓名'}
    			  ,{field:'phone', width:80, title: '手机'}
    			  ,{field:'mail', width:80, title: '邮件'}
    			  ,{field:'createDate', width:80, title: '创建日期'}
    			  ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    			]
    				]
    		  ,page: true
    		  
    		  });
    		});
    		
    		</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>

实体类User

package com.example.bean;
    public class User {
    	private int id;
    	private String name;
    	private String realName;
    	private String phone;
    	private String mail;
    	private String createDate;
    	public int getId() {
    		return id;
    	}
    	public void setId(int id) {
    		this.id = id;
    	}
    	public String getName() {
    		return name;
    	}
    	public void setName(String name) {
    		this.name = name;
    	}
    	public String getRealName() {
    		return realName;
    	}
    	public void setRealName(String realName) {
    		this.realName = realName;
    	}
    	public String getPhone() {
    		return phone;
    	}
    	public void setPhone(String phone) {
    		this.phone = phone;
    	}
    	public String getMail() {
    		return mail;
    	}
    	public void setMail(String mail) {
    		this.mail = mail;
    	}
    	public String getCreateDate() {
    		return createDate;
    	}
    	public void setCreateDate(String createDate) {
    		this.createDate = createDate;
    	}
    	@Override
    	public String toString() {
    		// TODO Auto-generated method stub
    		return "User [name="+name+",realName="+realName+",phone="+phone+""
    		+ ",mail="+mail+"。]";
    	}
    }

UserController

package com.example.controller;
    import java.util.List;
    import javax.annotation.Resource;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import com.alibaba.fastjson.JSON;
    import com.alibaba.fastjson.JSONObject;
    import com.example.bean.User;
    import com.example.service.UserService;
    @RestController
    public class UserController {
    	@Resource
    	private UserService userService;			
    	private static final Logger logger = LoggerFactory.getLogger(UserController.class.getName());
    	@RequestMapping("/getList")
    	public String getList(){		
    		List<User> list=userService.getList();
    		String s = JSON.toJSONString(list);
    		logger.info(s);
    		JSONObject obj=new JSONObject();
            //前台通过key值获得对应的value值
            obj.put("code", 0);
            obj.put("msg", "");
            obj.put("count",1000);
            obj.put("data",list);
            return obj.toJSONString();
    	}		
    }

运行结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70][]

源文件地址：https://pan.baidu.com/s/18zPIyxGxycPZaXd6dRzAlg 提取码: fnf4

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70]: /images/20211209/51171279f4fe4ce4be3c528ebdeb43a2.png