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
layui导入模板数据_使用layui模板填充页面数据相关推荐
- 小程序模板报价_小程序模板价格_小程序模板使用多少钱
小程序模板报价_小程序模板价格_小程序模板使用多少钱? 分享一个☞ 微信小程序模板平台,超60个行业的小程序模板免费使用. 在这个平台,小程序模板是免费使用的.收费部分是这个平台提供的小程序功能,档次 ...
- Java_Hive自定义函数_UDF函数清洗数据_清洗出全国的省份数据
Java_Hive_UDF函数清洗数据_清洗出全国的省份数据 最近用Hadoop搞数据清洗,需要根据原始的地区数据清洗出对应的省份数据,当然我这里主要清洗的是内陆地区的数据,原始数据中不包含港澳台地区 ...
- 使用layui模板填充页面数据
layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 AP ...
- layui模块显示收缩_修改layui的后台模板的左侧导航栏可以伸缩的方法
原生的左侧导航栏代码: 所有商品 列表一 列表二 列表三 超链接 解决方案 列表一 列表二 超链接 云市场 发布商品 自己修改的: 生源追踪 生源列表 学校信息 工做计划 学员管理 学员列表 考勤管理 ...
- java安卓开发模板软件_用Java模板创建你的Hello, Harmony!
2020年度华为开发者大会"HDC Together"于9月10日至9月12日在东莞松山湖成功举办.作为一名开发者,我有幸参加这一年一度的盛会,并且亲身体验了 Harmony OS ...
- python导入sas数据集_运用import过程进行SAS数据导入完全实用教程
运用import过程进行SAS数据导入完全实用教程 1 单个规范格式文件导入. 对单个文件进行导入是我们遇到最多的情况,主要有以下几种: 1.1 对指定分隔符('|',' ','!','ab'等)数据 ...
- 网站模板_企业网站模板平台_企业网站模板套用教程
分享一个网站模板平台,超60个行业的网站模板免费使用,页面内容丰富样式,多样的网站模板,可以同时制作电脑网站和手机网站,还有更多自适应模板可以选择. 企业网站模板平台 企业网站模板平台的存在,就是为了 ...
- 机器学习 处理不平衡数据_在机器学习中处理不平衡数据
机器学习 处理不平衡数据 As an ML engineer or data scientist, sometimes you inevitably find yourself in a situat ...
- kettle分批处理大表数据_采用Kettle分页处理大数据量抽取任务
需求: 将Oracle数据库中某张表历史数据导入MySQL的一张表里面. 源表(Oracle):table1 目标表(MySQL):table2 数据量:20,000,000 思路: 由于服务器内存资 ...
- python 处理大量数据_如何用python处理大量数据
一般来说,用pandas处理小于100兆的数据,性能不是问题.当用pandas来处理100兆至几个G的数据时,将会比较耗时,同时会导致程序因内存不足而运行失败. 当然,像Spark这类的工具能够胜任处 ...
最新文章
- 别学前端了!前端程序员:凭啥??网友:来钱太快你会飘!
- 【转】OGRE资源相关分析
- 高并发资金交易系统设计方案—百亿双十一、微信红包背后的技术架构
- java培训每日总结,这是一份1000多字的Java培训总结,字字珠玑
- stat,查看文件属性
- python:argsort(返回元素排序后的索引值)
- GD32F303修改外部25M晶振
- Java如何实现代理服务器?
- 如果让你来制作一个访问量很高的大型网站,你会如何来管理所有CSS文件、JS与图片?
- stm32(十八)TFT-LCD
- ubuntu20.04安装并运行ORB_SLAM3(一路顺风版)
- 秒杀竞拍屡创网络神话:馅饼还是美丽陷阱
- appstore上架助手
- Blast中文手册(2)
- 菜鸟的数学建模之路(二):线性与非线性回归
- Easy Excel 使用总结
- npm 安装 node-sass 失败问题分析及解决方案
- python基础(持续更新)
- 城市大脑与智慧城市前沿趋势
- 2021年茶艺师(初级)考试及茶艺师(初级)报名考试