layui导入模板数据_使用layui模板填充页面数据

layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年秋，她区别于那些基于MVVM底层的 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 getUserList(){

Map map = new HashMap<>();

PageInfo page = userService.findAllUser(1,10);

List list = page.getList();

map.put("data",list);

return map;

}

}

在user文件夹下新建userList.jsp：

userList

{{# layui.each(d.list,function(index,item){ }}

{{item.userId}} | {{item.userName}} | {{item.password}} | {{item.phone}}

{{# }); }}

这里需要引入之前下载好的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