欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用layui模板填充页面数据

程序员文章站 2022-05-18 17:07:41
...

        layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。（摘自：百度百科：layui）

        本篇文章讲解使用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 = 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模板填充页面数据


相关标签： layui 填充页面数据

上一篇： vue 路由传值与跳转

下一篇： Javaweb(二)制作调查问卷

推荐阅读