用一个简单的例子讲layui的内容，后期如果有机会会慢慢补充，如果有什么不足的话希望阅者能多多包涵和建议。
注意:后台处理的不是用框架，用的是麻烦的servlet，后面补充的话尽量用ssm框架补充，不过servlet都可以实现，框架应该就更简单了，这个问题应该不用担心。
实现效果：
功能
- 搜索:模糊搜索(常规操作)
- 删除:上面的删除可以实现多行删除，下面则为单行
- 导出:导出我这里的需求是导出Excel文件，但是只能导入到默认路径
- 导入:更具路径导入(此处要设置,下文会说明)
- 分页:分页是可以的
- 借书，还书:用弹出层实现
- 表数据:有做直接更改，没用弹出层(太麻烦)
接下来对代码的讲解.
html
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<script src="layui/layui.all.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style type="text/css">
.layui-table-cell{
height:100px;
line-height: 100px;
}
</style>
<body>
<hr>
<div class="demoTable">
<label class="layui-form-label">搜索</label>
<div class="layui-inline">
<input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
<button class="layui-btn layui-btn-danger" data-type="delSelect">删除</button>
<button class="layui-btn layui-btn-warm" data-type="download" >导出</button>
<button class="layui-btn layui-btn-normal" data-type="upload">导入</button>
<input type="file" name="file" id="file">
</div>
<hr>
<table class="layui-hide" id="LAY_table_user" lay-filter="dataTable"></table>
<div id="pagePicker"></div>
</body>
</html>- style 里的内容是解决table每行高度显示问题的，可以更具自己的需求调整。
- layui的包路径需要正确，还有需要注意控件的id,name,data-type,lay-filter
js就拿一部分
操作框
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
<a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="borrowBook">借书</a>
<a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="returnBook">还书</a>
</script>table
在table中的图片是可以放大查看的，效果如下，有一点需要注意，图片的名字不能有中文(尚未解决)
layui.use(["form","laypage","layer","table","element","upload"], function(){
var table = layui.table;
var form=layui.form;
var laypage=layui.laypage;
var layer=layui.layer;
var element = layui.element;
var upload = layui.upload;
//方法级渲染
table.render({
elem: '#LAY_table_user',
url: 'servlet/BookController',
done: function(res, curr, count) { //表格数据加载完后的事件
//调用示例
layer.photos({//点击图片弹出
photos: '.layer-photos-demo',
anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
},
cols: [[
{checkbox: true, fixed: true},
{field:'bookId', title: 'id', width:150, sort: true, fixed: true},
{field:'bookName', title: '书名', width:150, sort: true,edit:true},
{field:'bookCount', title: '剩余数量', width:150, sort: true,edit:true},
{field:'bookPath', title: '图片', width:110,templet:function (d) {
var bookpath = "<%=basePath %>" +d.bookPath;
return '<div class="layer-photos-demo" style="cursor:pointer;">' +
'<img src="' + bookpath + '" width="80px" height="100px"></div>';
}
},
{field:'right', title: '操作', width:350,toolbar:"#barDemo"}
]],
id: 'testReload',
page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
//,curr: 5 //设定初始在第 5 页
groups: 1, //只显示 1 个连续页码
first: false, //不显示首页
last: false, //不显示尾页
limit:2,
limits:[1,2,3,4,5,6,7,8,9,10]
}
});页面中的button响应事件
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//这是layui所又除了表格按钮之外的按钮监听实现出，属性与button的data-type属性相对应
var $ = layui.$, active = {
//搜索按钮 key的值是搜索框的值
reload: function(){
var demoReload = $('#demoReload');
//传入搜索值
table.reload('testReload', {
where: {
key: demoReload.val()
}
});
},
//多行删除
delSelect: function(){
//获取选中数据
var checkStatus = table.checkStatus('testReload')
var data = checkStatus.data;
if(checkStatus.data.length==0){
layer.msg('请选择要删除的数据', {icon: 5});
return;
}
//询问框
layer.confirm('是否删除选中的数据？', {
btn: ['删除','取消'] //按钮
}, function(){
var ids = "";
//这里先遍历，然后到后台处理
for(var i = 0; i < data.length ;i++){
ids += data[i].bookId + ";";
}
$.ajax({
url: "servlet/BookController",
type: "GET",
data:{"ids":ids,"memthodname":"mulDeleteBook" },
dataType: "json",
success: function(data){
if(data.data){
layer.msg("删除成功", {icon: 6});
table.reload('testReload', {
where: {
key: ""
}
});
}else{
layer.msg("删除失败", {icon: 5});
}
}
});
}, function(){
layer.closeAll();
});
},
//把表格转化成Excel文件(文件上传下载这部分慎用，没有深入研究)
download:function(){
$.ajax({
url: "servlet/BookController",
data:{"memthodname":"BookExport"},
type: "GET",
dataType: "json",
success: function(data){
if(data.data){
layer.msg("导出成功", {icon: 6});
}else{
layer.msg("导出失败", {icon: 5});
}
}
});
},
upload:function(){
var filePath = $('#file').val();
if(filePath == ""){
layer.msg("请选择文件之后在导入", {icon: 5});
return;
}
//alert(filePath);
$.ajax({
url: "servlet/BookController",
data:{"memthodname":"BookImport","filePath":filePath},
type: "GET",
dataType: "json",
success: function(data){
if(data.data){
layer.msg("导入成功", {icon: 6});
table.reload('testReload', {
where: {
key: ""
}
});
}else{
layer.msg("导入失败", {icon: 5});
}
}
});
}
};table直接修改数据
//监听单元格编辑 dataTable 对应 <table> 中的 lay-filter="dataTable"
table.on('edit(dataTable)', function(obj){
var value = obj.value, //得到修改后的值
data = obj.data, //得到所在行所有键值
field = obj.field; //得到字段
//layer.msg('[ID: '+ data.userId +'] ' + field + ' 字段更改为：'+ value);
$.ajax({
url: "servlet/BookController",
type: "POST",
data:{"bookId":data.bookId,"memthodname":"edituv","field":field,"value":value},
dataType: "json",
success: function(data){
if(data.data){
//同步更新表格和缓存对应的值
layer.msg("修改成功", {icon: 6});
}else{
layer.msg("修改失败", {icon: 5});
}
}
});
});table中的按钮
借书使用的是弹出层,编辑用的是layer.prompt，编辑只监听其中的一项并做修改，没有太大的意义，如果希望编辑能够修改多个数据的话，需要自己做弹出层或者扩展layer.prompt.
table.on('tool(dataTable)', function(obj){
var data = obj.data;
if(obj.event === 'borrowBook'){
var body;
layer.open({
type: 2,
title: '' +
'<li id="icon" class="layui-icon layui-icon-release layui-anim layui-anim-scaleSpring" ' +
'style="font-size: 30px; color: #009688;" data-anim="layui-anim-scaleSpring"></li> 编辑 ',
shadeClose: true,
shade: false,
btn: ['添加'],
btnAlign: 'c',
maxmin: true, //开启最大化最小化按钮
area: ['470px', '500px'],//area: [window.screen.width / 2 + 'px', window.screen.height / 2 + 'px'], //宽高
content: "<%=basePath %>" +"Dialog.html",
success: function(layero, index){
body = layer.getChildFrame('body',index);
body.find("input#bookname").val(data.bookName);
},
yes: function(layero, index){
var userName = body.find("input#username").val();
var stuName = body.find("input#stuname").val();
var bookName = body.find("input#bookname").val();
if(userName == null){
layer.msg("用户名不能为空", {icon: 5});
return;
}
$.ajax({
url: "servlet/BookController",
type: "GET",
data:{"userName":userName,
"memthodname":"addBorrow",
"stuName":stuName,
"bookName":bookName},
dataType: "json",
success: function(data){
if(data.data){
layer.alert('借书成功!',function(){
layer.closeAll();
table.reload('testReload', {
where: {
key: ""
}
});
});
}else{
layer.msg("借书失败", {icon: 5});
}
}
});
}
});
} else if(obj.event === 'returnBook'){
}else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
console.log(data);
$.ajax({
url: "servlet/BookController",
type: "GET",
data:{"bookId":data.bookId,"memthodname":"deleteuv" },
dataType: "json",
success: function(data){
if(data.data){
obj.del();
layer.close(index);
layer.msg("删除成功", {icon: 6});
}else{
layer.msg("删除失败", {icon: 5});
}
}
});
});
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,title: '修改 ['+ data.bookName +'] 的数量'
,value: data.bookCount
}, function(value, index){
EidtUv(data,value,index,obj);
});
}
});弹出层代码
弹出层代码就一起贴了，js代码和html写在一起。
下面的图片书名是table传进去的，学生姓名是输入学号之后异步获取的，这样基本可以满足弹出层的需求了。
<!DOCTYPE html>
<html>
<head>
<title>Dialog.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<script src="layui/layui.all.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title ">
<legend>
<li id="icon"
class="layui-icon layui-icon-face-smile layui-anim layui-anim-rotate "
style="font-size: 30px; color: #1E9FFF;"
data-anim="layui-anim-rotate"></li> <span style="font-size: 8px">请输入借书信息</span>
</legend>
<br>
<div class="layui-field-box" style="width: 97%">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">姓名 :</label>
<div class="layui-input-block">
<input type="text" name="stuname" id="stuname" disabled="disabled"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">书名 :</label>
<div class="layui-input-block">
<input type="text" name="bookname" id="bookname" disabled="disabled"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户名/学号 :</label>
<div class="layui-input-block">
<input type="text" name="username" id="username" lay-verify="title"
autocomplete="off" placeholder="请输入学号或用户名" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux"></div>
</div>
<br>
<br>
</form>
</div>
</fieldset>
<script type="text/javascript">
layui.use(['layer', 'table','element','form','laydate'], function(){
var form = layui.form,
layer = layui.layer,
layedit = layui.layedit,
laydate = layui.laydate;
//日期控件
var dag=window.parent;
laydate.render({
elem: '#issueDate'
});
form.render();
});
//监听身份证信息
$(function(){
$("#username").blur(function(){
var value=$(this).val();
$.ajax({
async:true, //异步加载
data:{"userName":value,"memthodname":"findStuName"}, //参数
type:"get",
url:"servlet/BookController",
dataType:"text",
success:function(data){
var toObj = JSON.parse(data);
if(toObj.data.length <= 0){
layer.msg("没有该学号的学生", {icon: 5});
}
//转化成JSON字符串
$("#stuname").val(toObj.data);
}
});
});
});
</script>
</body>
</html>
到这里所有的前台代码就贴完了，这只是layui的一点点基础内容，对于更高大上的东西后面还要研究，如果有机会的话我会继续写。
对了，上面的代码都是包含在
layui.use(["form","laypage","layer","table","element","upload"], function(){所以你如果是全拷贝了在最后还要加上 }); 不然一个简单的错误找半天就冤枉了。
关于所有的前台传后台，因为用的是servlet，所有值都可以用request接收
如果传的是乱码，那是中文的原因对于接收到的字符串做格式转化就可以了，如：
stuName = new String(stuName.getBytes("iso-8859-1"),"utf-8");还有最重要的一点就是response的问题了，对于传到前台的数据可能回困扰新开始使用layui的cxy（本人也是），传到前台最关键的就是layui的url接收的值必须要满足几个字段
你当然可以直接可以直接传，但是那样太麻烦了，可以做一个response的类（如果你嫌创类麻烦的话，网上应该有直接设值的方法，我记得有）
我贴上我的
package com.zse.ajax;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
public class Response<T> implements Serializable{
//成功
public static final String RESULT_SUCCESS = "success";
//可以预见但是不能处理的异常, 如SQLException, IOException等等
public static final String RESULT_ERROR = "error";
private static final long serialVersionUID = -2049439550666128636L;
// 标识变量
private String result = RESULT_SUCCESS;
// 数组, 存放业务失败提示
private List<String> msg;
// 对象, 存放字段格式错误信息
private List<String> errors;
private Integer code;
private Integer count;
private T data;
public Response(){
msg = new ArrayList<String>(1);
errors = new ArrayList<String>(1);
code=0;
}
public Integer getcode() {
return code;
}
public void setcode(Integer code) {
this.code = code;
}
public Integer getCount() {
return count;
}
public void setCount(Integer count) {
this.count = count;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public List<String> getmsg() {
return msg;
}
/**
* 设置业务错误信息
* @param message
*/
public void setMessage(String message) {
this.msg.clear();
this.msg.add(message);
}
public List<String> getErrors() {
return errors;
}
/**
* 设置系统错误信息
* @param error
*/
public void setError(String error) {
this.errors.clear();
this.errors.add(error);
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
}
类似这样的类，像layui的字段你添加，然后在构造函数赋值就OK了。
Response<List<Book>> r = ResponseFactory.getDefaultSuccessResponse();
r.setData(bookList);
r.setCount(bookDao.getAllBooksCount());
response.getWriter().print(JSONSerializer.toJSON(r).toString());后台像上面那样写前台就匹配得到了。
到最后面，不要忘了导包。json的包，数据库的包，文件处理的包，这里只写前台。