layui-入门

Posted 2021-02-14 cainame

1.下载layui

2.导入layui

<title>开始使用layui</title>
  <!-- 导入js样式 -->
  <link rel="stylesheet" href="layui/css/layui.css">
  <!-- 导入layui脚本 -->
  <script src="layui/layui.js"></script>

 3.写入表单

<table id="demo" lay-filter="test"></table>

 4.引入表格模块

layui.use(‘table‘, function(){
	  var table = layui.table;
	  //第一个实例
	  table.render({
	    elem: ‘#demo‘
	    ,height: 312
	    ,url: ‘findAll‘ //数据接口
	    
	    ,page: true //开启分页
	    ,cols: [[ //表头
	      {field: ‘id‘, title: ‘ID‘, width:80, sort: true, fixed: ‘left‘}
	      ,{field: ‘username‘, title: ‘用户名‘, width:80}
	      ,{field: ‘password‘, title: ‘用户密码‘, width:120, sort: true}
	      
	    ]]
	  });
	  
	});
	</script>
5.后台传入数据规范

@ResponseBody
	public Map<String,Object> lookUser(HttpSession session) {
		//data数据
		List<User> list=userService.findAll();
        //传给layui的map数据
		Map<String,Object> map=new HashMap<String,Object>();	  
		//状态码code
		map.put("code",0);
		map.put("msg","" );
		map.put("count", list.size());
		map.put("data",list);
		return map;
	}