用一个简单的例子讲layui的内容,后期如果有机会会慢慢补充,如果有什么不足的话希望阅者能多多包涵和建议。
注意:后台处理的不是用框架,用的是麻烦的servlet,后面补充的话尽量用ssm框架补充,不过servlet都可以实现,框架应该就更简单了,这个问题应该不用担心。
实现效果:
功能
接下来对代码的讲解.
html
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta charset="utf-8">
<title>layuititle>
<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>
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>
js就拿一部分
操作框
在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 '' +
'
'" width="80px" height="100px">';
}
},
{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]
}
});
$('.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});
}
}
});
}
};
//监听单元格编辑 dataTable 对应