layui js thymeleaf 公共工具类
layui js thymeleaf 公共工具类
其中功能包括:
- 普通表格渲染
- 树形表格渲染
- 普通编辑 (添加/删除/编辑)
- 更多编辑 (添加/编辑/更多)
- 上传图片
配置
- 普通表格/树形菜单
html
<table class="layui-hide" id="table-data" lay-filter="table-data"></table>
js
layui.use(['table', 'layer', 'util', 'dropdown','upload'], function () {
var layer = layui.layer;
var table = layui.table;
layer.ready(function () {
var condition = [
{field: 'id', title: 'ID', minWidth: 150, sort: true, align: 'center'},
]
//普通表格
common.getTable(table, '/user/page', condition, "")
//树形表格
common.getTreeTable(table, '/user/page', condition, "")
})
});
- 普通编辑按钮
layui.use(['table', 'layer', 'util', 'dropdown','upload'], function () {
var layer = layui.layer;
var table = layui.table;
layer.ready(function () {
var condition = [
{field: '', title: '操作', align: 'center', toolbar: '#common-row-button'}
]
common.getTable(table, '/user/page', condition, "")
common.commonEdit(table,layer,'/user/edit','/user/delete')
})
});
- 更多编辑
layui.use(['table', 'layer', 'util', 'dropdown','upload'], function () {
var layer = layui.layer;
var table = layui.table;
var dropdown = layui.dropdown;
function moreFaction(event, obj, dataId){
//event 对应 moreButton 里的id
// obj 对应当前行数据
// dataId 对应当前行id
//下边根据event 分别处理对应的函数
}
layer.ready(function () {
var condition = [
{field: '', title: '操作', align: 'center', toolbar: '#more-row-button'}
]
var moreButton=[{
title: '查看',
id: 'detail'
},{
title: '删除',
id: 'del'
}]
common.getTable(table, '/user/page', condition, "")
common.moreCommonEdit(table,layer,dropdown,'/user/edit',moreFaction,)
})
});
- 上传图片
html
<div class="upload-content" th:url="对应后端接口回显的值"></div>
js
layui.use(['form', 'layer', 'util', 'upload'], function () {
var layer = layui.layer;
var en = layui.$
var upload = layui.upload
var util = layui.util;
layer.ready(function () {
common.uploadImage(en, upload,util,layer,'avatar')
})
})
工具类
const common = {
getTable(table, url, cols, condition) {
if (!condition || condition == '') {
condition = {
page: 1,
size: 10
}
}
var inst = table.render({
elem: '#table-data',
url: url,
method: 'post',
toolbar: '#toolbarDemo',
parseData: function (res) { // res 即为原始返回的数据
return {
"code": 0, // 解析接口状态
"msg": res.msg, // 解析提示文本
"count": res.data.total, // 解析数据长度
"data": res.data.records // 解析数据列表
};
},
where: condition,
cols: [
cols
],// 可选,请求成功后的回调函数
css: [ // 重设当前表格样式
'.layui-inline .layui-table-pageview {float: right;}'
].join(''),
page: true, // 是否显示分页
limits: [10, 20, 30, 50, 100],
limit: 10 // 每页默认显示的数量
});
},
getTreeTable(table, url, cols, condition) {
if (!condition || condition == '') {
condition = {
page: 1,
size: 10
}
}
var inst = treeTable.render({
elem: '#tree_table-data',
toolbar: '#toolbarDemo',
tree: {
// 异步加载子节点
async: {
enable: true,
url: url, // 此处为静态模拟数据,实际使用时需换成真实接口
autoParam: condition,
}
},
page: true,
limits: [10, 20, 30, 50, 100],
limit: 10 // 每页默认显示的数量
})
},
getTreeList(data) {
var list = []
tree.render({
elem: '#tree-data',
data: data,
showCheckbox: true, // 是否显示复选框
onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
id: 'demo-id-1',
isJump: true, // 是否允许点击节点时弹出新窗口跳转
click: function (obj) {
var data = obj.data; //获取当前点击的节点数据
list.push(data)
layer.msg('状态:' + obj.state + '<br>节点数据:' + JSON.stringify(data));
}
});
},
getReloadTable(condition) {
if (!condition || condition == '') {
condition = {
page: 1,
size: 10
}
}
// 执行搜索重载
table.reload('table-data', {
page: {
curr: 1 // 重新从第 1 页开始
},
where: condition // 搜索的字段
});
},
commonEdit(table, layer, htmlUrl, delUrl) {
//添加
table.on('toolbar(table-data)', function (obj) {
if (obj.event === 'add') {
layer.open({
title: '添加',
type: 2,
area: ['60%', '90%'],
content: htmlUrl
});
}
})
//删除及编辑
table.on('tool(table-data)', function (obj) { // 双击 toolDouble
var data = obj.data; // 获得当前行数据
switch (obj.event) {
case 'edit':
layer.open({
title: '编辑',
type: 2,
area: ['60%', '90%'],
content: htmlUrl + '?id=' + data.id
});
break
case 'del':
layer.confirm('确定要删除吗', function (index) {
obj.del(); // 删除对应行(tr)的DOM结构
layer.close(index);
api.delete(delUrl + '/' + data.id)
});
break
}
})
},
moreCommonEdit(table, layer, dropdown, htmlUrl, moreButton, moreFaction) {
//添加
table.on('toolbar(table-data)', function (obj) {
if (obj.event === 'add') {
layer.open({
title: '添加',
type: 2,
area: ['80%', '80%'],
content: htmlUrl
});
}
})
// 触发单元格工具事件
table.on('tool(table-data)', function (obj) { // 双击 toolDouble
var data = obj.data; // 获得当前行数据
// console.log(obj)
if (obj.event === 'edit') {
layer.open({
title: '编辑',
type: 2,
area: ['80%', '80%'],
content: htmlUrl + '?id=' + data.id
});
} else if (obj.event === 'more') {
// 更多 - 下拉菜单
dropdown.render({
elem: this, // 触发事件的 DOM 对象
show: true, // 外部事件触发即显示
data: moreButton,
click: function (menudata) {
moreFaction(menudata.id, obj, data.id);
},
align: 'right', // 右对齐弹出
style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
})
}
})
},
uploadImage(en, upload, util, layer, name, count = 10) {
var url = en('.upload-content').attr("url")
var value = url instanceof Array ? url : [url]
var uploadButton = ''
if (count > value.length) {
uploadButton = '<div class="child-upload-image upload-text layui-upload-drag" id="upload-event"><i class="layui-icon layui-icon-addition" style="width: 112px; height: 112px;"></i></div>'
}
var uploadContent = "<div id=\"upload-data\"><div class=\"layui-hide\" id=\"upload-preview\" >" + uploadButton + "</div></div>"
en('.upload-content').html(uploadContent)
if (value && value.length > 0) {
var images = ''
en('#upload-data').append(" <input type='hidden' name=" + name + " value=" + value + " id='upload-value'/> \n")
value.forEach((item, index) => {
images = images + '<div class="child-upload-image upload-image-div"><img src="' + item + '" style="width: 112px; height: 112px;" id="img' + index + '"/><div class="handle layui-hide" id="handle' + index + '"><i class="layui-icon layui-icon-delete" id="del' + index + '" style="font-size: 25px;color: #fff;" layadmin-event="delImage"></i><i class="layui-icon layui-icon-eye" id="eye' + index + '" style="font-size: 25px;color: #fff;" layadmin-event="eyeImage"></i></div></div>'
})
$('div .upload-image-div').remove();
en('#upload-preview').removeClass('layui-hide');
en('#upload-event').before(images);
en('.upload-content').removeAttr("url")
}
upload.render({
elem: '#upload-event',
url: '/file/upload/web', // 实际使用时改成您自己的上传接口即可。
method: 'POST',
done: function (res) {
value.push(res.data)
var id = value.length - 1
var addimages = '<div class="child-upload-image upload-image-div"><img src="' + res.data + '" style="width: 112px; height: 112px;" id="img' + id + '"/><div class="handle layui-hide" id="handle' + id + '"><i class="layui-icon layui-icon-delete" id="del' + id + '" style="font-size: 25px;color: #fff;" layadmin-event="delImage"></i><i class="layui-icon layui-icon-eye" id="eye' + id + '" style="font-size: 25px;color: #fff;" layadmin-event="eyeImage"></i></div></div>'
if (document.querySelector('#upload-data') === null) {
en('#upload-data').append(" <input type='hidden' name=" + name + " value=" + value + " id='upload-value'/> \n")
} else {
en('#upload-value').attr('value', value);
}
en('#upload-event').before(addimages);
en('#upload-preview').removeClass('layui-hide');
}
})
//图片绑定鼠标悬浮
en(document).on("mouseenter", ".upload-image-div", function () {
//鼠标悬浮
en(this).find('div:first').removeClass('layui-hide');
}).on("mouseleave", ".upload-image-div", function () {
//鼠标离开
en(this).find('div:first').addClass('layui-hide');
});
util.on('layadmin-event', {
delImage: function () {
var id = en(this).attr('id')
var indexNum = Number(id.replace('del', ''))
value.splice(indexNum, 1);
if (document.querySelector('#upload-data') === null) {
en('#upload-data').append(" <input type='hidden' name=" + name + " value=" + value + " id='upload-value'/> \n")
} else {
en('#upload-value').attr('value', value);
}
var images = ''
value.forEach((item, index) => {
images = images + '<div class="child-upload-image upload-image-div"><img src="' + item + '" style="width: 112px; height: 112px;" id="img' + index + '"/><div class="handle layui-hide" id="handle' + index + '"><i class="layui-icon layui-icon-delete" id="del' + index + '" style="font-size: 25px;color: #fff;" layadmin-event="delImage"></i><i class="layui-icon layui-icon-eye" id="eye' + index + '" style="font-size: 25px;color: #fff;" layadmin-event="eyeImage"></i></div></div>'
})
$('div .upload-image-div').remove();
en('#upload-event').before(images);
en('#upload-preview').removeClass('layui-hide')
},
eyeImage:function (){
var id = en(this).attr('id')
var indexNum = Number(id.replace('eye', ''))
layer.photos({
photos: {
"title": "Photos Demo",
"start": 0,
"data": [
{
"alt": "图片预览",
"pid": 5,
"src": value[indexNum],
}
]
},
footer: false // 是否显示底部栏 --- 2.8.16+
});
}
})
},
}
css 配置
html {
height: 100%;
width: 100%;
margin-top: 20px;
}
.layui-table-view {
margin: 10px;
}
.layui-inline .layui-table-pageview {
float: right !important;
}
/* 自定义样式 */
.layui-table {
border-top: none !important;
border-right: none !important;
border-left: none !important;
background-color: #ffffff !important;
}
.layui-table td, .layui-table th {
border-top: none !important;
border-right: none !important;
border-left: none !important;
}
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-mend, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin="line"], .layui-table[lay-skin="row"] {
border-top: none !important;
border-right: none !important;
border-left: none !important;
}
.layui-inline {
float: right !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.layui-btn {
border-radius: 5px;
}
/*搜索下边框*/
.search-form {
border-bottom: 10px solid #f2f2f2 !important;
}
/*表list修改*/
.layui-table-tool-self {
display: none !important;
}
.layui-table-tool {
border-bottom: none !important;
}
/*上传文件框*/
#upload-data {
display: block;
height: 30%;
}
/*上传文件框*/
#upload-preview img {
height: 10%;
width: 10%;
}
#upload-data {
display: flex;
justify-content: left;
align-items: center;
}
#upload-preview {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
/* 子div */
.child-upload-image {
flex: 0 0 auto; /* 不增长也不收缩 */
max-width: 200px; /* 每个div的最大宽度 */
margin: 3px; /* 间距 */
}
.handle {
position: absolute;
width: 112px;
height: 100%;
z-index: 100;
border-radius: 6px;
top: 0;
background: rgba(59, 60, 61, 0.6);
text-align: center;
display: flex;
justify-content: center;
align-items: center
}
.handle .icon-myself {
z-index: 999;
transition: all .3s;
cursor: pointer;
font-size: 25px;
width: 25px;
color: rgba(255, 255, 255, 0.91);
margin: 0 4px;
}
公共js 导入
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="foot">
<!-- jquery组件引用 -->
<script type="text/javascript" th:src="@{/static/js/common/jquery-3.7.1.min.js}"></script>
<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/static/js/common/request.js}"></script>
<script type="text/javascript" th:src="@{/static/wangEditor/index.js}"></script>
<script type="text/javascript" th:src="@{/static/js/common/common.js}"></script>
<script type="text/html" id="toolbarDemo">
<button type="button" class="layui-btn layui-btn-normal" lay-event="add">
<i class="layui-icon layui-icon-addition"></i>
添加
</button>
</script>
<script type="text/html" id="common-row-button">
<div class="layui-clear-space">
<a class="layui-btn layui-btn-sm layui-btn-primary layui-border-orange" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-sm layui-btn-primary layui-border-orange" lay-event="del">删除</a>
</div>
</script>
<script type="text/html" id="more-row-button">
<div class="layui-clear-space">
<a class="layui-btn layui-btn-sm layui-btn-primary layui-border-orange" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-sm layui-btn-primary layui-border-orange" lay-event="more">
更多
<i class="layui-icon layui-icon-down"></i>
</a>
</div>
</script>
</div>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析