1、layui
1.安装
将解压的layui 文件夹拷贝到web 目录
2.引入
在jsp中插入这个依赖
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
3.使用
使用时，首先要导入模块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
</head>
<body>
<!-- 你的HTML代码 -->
<h1>hello layui</h1>
<script>
//一般直接写在一个js文件中
// layui.use 让layui 加载 layer 模块 form 模块
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
// 土司 串口 tips
layer.msg('Hello World');
layer.msg(" 一会放学")
});
</script>
</body>
</html>
4.表格
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
</head>
<body>
<!-- 创建一个空 表格-->
<table id="demo" lay-filter="test"></table>
<script>
/* 加载表格 模块*/
layui.use('table', function(){
// 获取 table 模块
var table = layui.table;
//第一个实例
table.render({
elem: '#demo' // 去挂在 id 为 demo 的table
,height: 200
,toolbar:true// 开启工具栏
,url: '/getStudentByPage' //数据接口
,page: {
limit:2//每页显示1条
,limits:[1,2,3] //可选每页条数
,first: '首页' //首页显示文字，默认显示页号
,last: '尾页'
,prev: '<em>←</em>' //上一页显示内容，默认显示 > <
,next: '<i class="layui-icon layui-icon-next"></i>'
,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
}
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'name', title: '学生名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'age', title: '年龄', width: 80, sort: true}
,{field: 'height', title: '身高', width: 80}
,{field: 'birthday', title: '生日', width: 80}
,{field:"right",title:"操作",toolbar: '#barDemo'}// 工具栏要绑定 一个模块
]]
});
//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
table.on('tool(test)', function(obj){
var data = obj.data; //获得当前行数据
//获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var layEvent = obj.event;
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
// 向服务端发送删除请求
// 此处可以发送ajax
obj.del(); //删除对应行（tr）的DOM结构
layer.close(index);// 关闭弹窗
});
} else if(layEvent === 'edit'){ //编辑
// 向服务端发送更新请求
// 同步更新缓存对应的值
obj.update({
name: '赵四',
sex:'男',
age:18});
/* $.ajax({
url: '/users/updata',
data: {
username: 'shine001',
city: '北京',
sex:'女',
score:99},
method: 'post',
success: function (result) {
if (result.status) {
table.reload('demo', {});//重新加载数据
} else {
alert(result.message)
}
layer.close(index)// 关闭串口
}
})*/
}
});
});
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>
数据
1.配置pagehelper
<!-- 配置分页-->
<!--配置分页 放在最下面-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.4</version>
</dependency>
<plugins>
<!-- 让mybatis 加载PageHelper -->
<!-- com.github.pagehelper为PageHelper类所在包名 -->
<plugin interceptor="com.github.pagehelper.PageHelper">
<!-- 使用MySQL方言的分页 -->
<property name="helperDialect" value="mysql"/><!--如果使用mysql，这里value为mysql-->
<property name="pageSizeZero" value="true"/>
</plugin>
</plugins>
处理请求
@RequestMapping("/getStudentByPage")
@ResponseBody
// 接收请求参数 page=98&limit=10 page 当前页 limit分页大小
public ResponseData getStudentByPage(int page,int limit){
// 使用分页
return studentService.findStudentByPage(page,limit);
}
@Override
public ResponseData<List<Student>> findStudentByPage(int pageIndex, int pageSize) {
// 使用分页
PageHelper.startPage(pageIndex,pageSize);
// 查询所有学生 根据分页
List<Student> studentList = studentDao.findAllStudent();
PageInfo pageInfo = new PageInfo(studentList);
// 获取总条数
int count = (int) pageInfo.getTotal();
ResponseData<List<Student>> responseData = new ResponseData<>();
responseData.setData(studentList);
responseData.setMsg("ok");
// 返回正确的数据
responseData.setCode(0);
responseData.setCount(count);
return responseData;
}
5、导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
</head>
<body>
<ul class="layui-nav layui-nav-tree" lay-filter="">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){});
</script>
</body>
</html>
6、弹框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
</head>
<body>
<script>
function msgClick() {
// 导入 layer模块
layui.use(["layer"],function(){
var layer = layui.layer;
// layer.msg("hello world!!");
layer.msg("确定吗？",{btn:["确定！","放弃！"],
yes:function(i){ // 确定按钮回调
layer.close(i);
layer.msg("yes!!!")
},
btn2:function(i){ // 放弃回调
layer.close(i);
layer.msg("no!!!")
}}
);
});
}
function alterClick() {
// 导入 layer模块
layui.use(["layer"],function(){
var layer = layui.layer;
//0-6 7种图标 0:warning 1:success 2:error 3:question 4:lock 5:哭脸 6：笑脸
layer.alert("alert弹框蓝",
{title:'alert',icon:5 },
function(){//点击“确定”按钮时的回调
layer.msg("好滴");
}
);
});
}
function confirmClick() {
// 导入 layer模块
layui.use(["layer"],function(){
var layer = layui.layer;
layer.confirm("hello world~",
{shade:false,icon:3,btn:["好滴","不行"]},
function(){
layer.msg("好滴！");
// 写 ajax
},
function(){
layer.msg("不行！")
}
);
});
}
/**
* 自定义窗
*/
function openClick() {
layui.use(["layer"],function(){
layer = layui.layer;
layer.open({
type:1,// 消息框，没有确定按钮
title:["hello","padding-left:5px"], // 标题，及标题样式
content:layui.$("#testmain"), // dom格式
offset:'rb',//可以在右下角显示
shade:false //是否遮罩
});
});
}
/**
* 更新弹框
*/
function updateForm() {
layui.use(["layer"],function(){
layer.open({
type: 1 //Page层类型
,skin: 'layui-layer-molv'
,area: ['380px', '270px']
,title: ['编辑书本信息','font-size:18px']
,btn: ['确定', '取消']
,shadeClose: true
,shade: 0 //遮罩透明度
,maxmin: true //允许全屏最小化
,content:$("#window") //弹窗路径
,success:function(layero,index){ //初始化化串口
$('#bid').val('23123');
$('#bname').val("一千零一夜");
$('#price').val(1000);
},yes:function(index,layero){
alert("确定");
layer.close(index);// 关闭窗口
}
});
});
}
</script>
<!-- 自定义 弹窗内容-->
<div id="testmain" style="display:none;padding:10px; height: 173px; width: 275px;">
hello world!
<button> 按钮</button>
</div>
<!-- 自定义窗口form-->
<div class="site-text" style="margin: 5%; display: none" id="window" target="test123">
<form class="layui-form" id="book" method="post" lay-filter="example">
<div class="layui-form-item">
<label class="layui-form-label">id</label>
<div class="layui-input-block">
<input type="text" id="id" name="id" lay-verify="title" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">name</label>
<div class="layui-input-block">
<input type="text" id="name" name="name" lay-verify="title" autocomplete="off" placeholder="请输入名字" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">sex</label>
<div class="layui-input-block">
<input type="text" id="sex" name="sex" lay-verify="title" autocomplete="off" placeholder="性别" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">age</label>
<div class="layui-input-block">
<input type="number" id="age" name="age" lay-verify="title" autocomplete="off" placeholder="年龄" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">height</label>
<div class="layui-input-block">
<input type="number" id="height" name="height" lay-verify="title" autocomplete="off" placeholder="身高" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">生日</label>
<!-- layui-input-block 输入框会占满除文字外的整行 -->
<div class="layui-input-block">
<input readonly id="birthday" type="text" name="birthday" placeholder="请选择生日日期" autocomplete="off" class="layui-input">
</div>
</div>
</form>
</div>
<button onclick="msgClick()">msg</button>
<button onclick="alterClick()">alert</button>
<button onclick="confirmClick()">confirm</button>
<button onclick="openClick()">open</button>
<button onclick="updateForm()">updateForm</button>
</body>
</html>
7、layDate
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layDate快速使用</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
</head>
<body>
<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
<input type="text" class="layui-input" id="test1">
</div>
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#test1' //指定元素
});
});
</script>
</body>
</html>
文件上传控件，返回的数据必须时json 不能时字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
</head>
<body>
<form class="layui-form layui-form-pane" method="post">
<!-- layui-form-item 一个输入项-->
<div class="layui-form-item">
<label class="layui-form-label">username</label>
<!-- layui-input-block 输入框会占满除文字外的整行 -->
<div class="layui-input-block">
<input id="birth" type="text" name="username" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传图片
</button>
</div>
</div>
</form>
<script>
layui.use(['upload','layer'], function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,url: '/uploadFile' //上传接口
,accept:'file' // file代表所有文件，默认是images代表图片
,field:'files' // 对应接收的字段
,size:100 // 文件最大100kb
,done: function(res){
//上传完毕回调
layui.layer.msg("ok");
}
,error: function(){
//请求异常回调
layui.layer.msg("error");
}
});
});
</script>
</body>
</html>
8、carousel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
</head>
<body>
<div class="layui-carousel" id="test1">
<div carousel-item style="text-align: center;line-height: 280px">
<div>条目1</div>
<div>条目2</div>
<div>条目5</div>
<div>条目5</div>
</div>
</div>
<script>
/* carousel */
layui.use(['carousel'], function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,arrow: 'always' //始终显示箭头
});
});
</script>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
