使用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 {@Autowiredprivate UserService userService;@GetMapping(value="/userList")public ModelAndView toUserList(){ModelAndView mv = new ModelAndView("user/userList");return mv;}@GetMapping(value="/getUserList")@ResponseBodypublic Map<String,Object> getUserList(){Map<String,Object> map = new HashMap<>();PageInfo<UserDomain> page = userService.findAllUser(1,10);List<UserDomain> list = page.getList();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

使用layui模板填充页面数据相关推荐

Java实现根据Word模板填充表格数据（poi方式），以及doc和docx转PDF，最全最详细版本，解决外部引用jar在linux上报ClassNotFound的问题。
Java实现根据Word模板填充表格数据(poi方式),以及doc和docx转PDF,最全最详细版本,解决外部引用jar在linux上报ClassNotFound的问题. 适用场景: 1.固定格式的W ...
LayUI模板引擎渲染数据
前端模板引擎介绍接上节Spring boot项目开发实战--(LayUI实现前后端数据交换与定义方法渲染数据) 模板引擎能简化开发,极大提高效率,小编之前使用过JSP和Thymeleaf,以及pyt ...
怎样存储layui模板引擎后台返回的数据，在需要的时候获取
在项目中遇到一个情况,需要动态获取后台的返回数据,并在前台渲染出来,并且能够根据所点击的不同标签,随时获取对应数据.在网上看到两种方法,一种是写一个动态创建div模板的函数,并将返回值作为参数在其中展 ...
layui 实现问卷表单【页面数据渲染+答案提交】【前端完整代码】
最近有个业务需求,需要做一个问卷表单格式比较简单:问题+radio选项,问题需要分组展示,数据需要从数据库提取渲染. 细节较多效果图如下下面发一下前端完整代码(由于套用的是公司封装的layui框 ...
Java使用自定义Excel模板填充数据
Java使用自定义Excel模板填充数据上期我们说到使用POI简单的制作一个Excel,这里我们教林外一种方法,就是把Excel写好定为模板,直接填充数据. 老样子还是要添加POM依赖 <de ...
LayUi前端框架删除数据缓存问题（解决删除后刷新页面内容又会显示问题）
LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题) 参考文章: (1)LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题) (2)https://www.cn ...
SpringBoot使用EasyExcel 模板填充数据并导出，以及Excel导入解析入库
需求 1.导出Excel模板,第一个sheet为用户基本信息,默认只有表头,用户手动填写后续用来导入人员信息.第二个sheet为组织架构信息,默认从数据库查询组织信息,方便用户查询组织编码. 2.导入 ...
java如何根据模板填充数据生成word文档
java根据模板填充数据生成word文档这篇文章干什么? 思路总览 1.准备word模板 2.转换文件格式 3.编写代码补充--下载流这篇文章干什么? 使用代码将word模板内容进行替换,并 ...
利用poi向word模板填充数据
java基于POI实现向word模板填充数据在做项目的时候遇到需要将多张表单导出为word,就想到了这个方法. 注意:XWPFDocument不支持doc类型文档,做模板的时候要另存为docx. 示 ...

使用layui模板填充页面数据

使用layui模板填充页面数据相关推荐

最新文章

热门文章