使⽤layui模板填充页⾯数据
layui，是⼀款采⽤⾃⾝模块规范编写的前端 UI 框架，遵循原⽣ HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即⽤。其外在极简，却⼜不失饱满的内在，体积轻盈，组件丰盈，从核⼼代码到 API 的每⼀处细节都经过精⼼雕琢，⾮常适合界⾯的快速开发。layui ⾸个版本发布于2016年秋，她区别于那些基
于底层的 UI 框架，却并⾮逆道⽽⾏，⽽是信奉返璞归真之道。准确地说，她更多是为服务端程序员量⾝定做，你⽆需涉⾜各种前端⼯具的复杂配置，只需⾯对浏览器本⾝，让⼀切你所需要的元素与交互，从这⾥信⼿拈来。（摘⾃：百度百科：layui）
本篇⽂章讲解使⽤layui模板来填充前台数据，⾸先在layui官⽹下载layui库，下载之后会得到名为layui的⽂件夹，其⽬录结构如图：
写⼀个UserController，其中有如下两个⽅法：
/
**
* @author haozz
* @date 2018/5/29 15:29
* @description
*/
前端页面模板
@Controller
@RequestMapping(value = "/user")
public class UserCtrl {
@Autowired
private UserService userService;
@GetMapping(value="/userList")
public ModelAndView toUserList(){
ModelAndView mv = new ModelAndView("user/userList");
return mv;
}
@GetMapping(value="/getUserList")
@ResponseBody
public Map<String,Object> getUserList(){
Map<String,Object> map = new HashMap<>();
PageInfo<UserDomain> page = userService.findAllUser(1,10);
List<UserDomain> list = List();
map.put("data",list);
return map;
}
}
在user⽂件夹下新建userList.jsp：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>userList</title>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/layui/layui.js"></script>
<script src="../../js/user/userList.js"></script>
</head>
<body>
<div>
<table id="userList">
</table>
</div>
<script id="userListTemp" type="text/html">
{{# layui.each(d.list,function(index,item){ }}
<tr>
<td>{{item.userId}}</td>
<td> | {{item.userName}}</td>
<td> | {{item.password}}</td>
<td> | {{item.phone}}</td>
</tr>
{{# }); }}
</script>
</body>
</html>
这⾥需要引⼊之前下载好的layui库、jQuery，以及新建的userList.js：
$(function(){
$.ajax({
url:'/user/getUserList',
type:'get',
cache:false,
dataType:'json',//返回的数据类型
success: function(data){
debugger;
var users = data.data;
initUserList(users||[]);
},
error:function(){
alert("error");
}
})
})
function initUserList(list){
layui.use('laytpl', function(){
var temp= userListTemp.innerHTML;
layui.laytpl(temp).render({list:list},function(html){
userList.innerHTML += html;
});
});
};
这⾥的代码很简单，就是ajax⽅法向UserController获取⼀个UserList。在initUserList⽅法中，我们使
⽤了layui中的laytpl元素，⾸先获取了userList.jsp中已经定义的名为userListTemp的模板，然后以userList为⼊參，将该模板的内容遍历，之后赋给页⾯上id值为userList的元素。
页⾯访问：localhost:8080/user/userList

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。