layui js thymeleaf 公共工具类
其中功能包括：
- 普通表格渲染
- 树形表格渲染
- 普通编辑 （添加/删除/编辑）
- 更多编辑 （添加/编辑/更多）
- 上传图片
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, name, count) {
if (!count) {
count = 1;
}
var urls = en('.upload-content').attr("url")
var value = [...[urls]]
var uploadContent =
" <div id=\"upload-data\"> \n" +
" <div class=\"layui-hide\" id=\"upload-preview\" >\n" +
" </div> \n" +
" </div>"
en('.upload-content').html(uploadContent)
var images = ''
if (value && value.length > 0) {
if (value.length == 1) {
en('#upload-data').append(" <input type='hidden' name=" + name + " value=" + value[0] + " id='upload-value'/> \n")
images = images + '<div class="child-upload-image"><img src="' + value[0] + '" style="width: 112px; height: 112px;"></div>'
} else {
en('#upload-data').append(" <input type='hidden' name=" + name + " value=" + value + " id='upload-value'/> \n")
value.forEach((item) => {
images = images + '<div class="child-upload-image"><img src="' + item + '" style="width: 112px; height: 112px;"></div>'
})
}
if (count > value.length) {
images = images + '<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>'
}
en('#upload-preview').html('');
en('#upload-preview').append(images);
en('#upload-preview').removeClass('layui-hide')
en('.upload-content').removeAttr("url")
}
upload.render({
elem: '#upload-event',
url: '/file/upload/web', // 实际使用时改成您自己的上传接口即可。
method: 'POST',
done: function (res) {
var addimages = '<div class="child-upload-image"><img src="' + res.data + '" style="width: 112px; height: 112px;"></div>'
value.push(res.data)
if (document.querySelector('.upload-text') !== null) {
en('div .upload-text').remove()
}
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);
}
if (count > value.length) {
addimages = addimages + '<div class="child-upload-image upload-text layui-upload-drag" id="upload-event"><i class="layui-icon layui-icon-addition"></i></div>'
}
en('#upload-preview').append(addimages);
en('#upload-preview').removeClass('layui-hide');
}
})
},
}
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; /* 间距 */
}