layui js thymeleaf 公共工具类

layui js thymeleaf 公共工具类

其中功能包括:

  1. 普通表格渲染
  2. 树形表格渲染
  3. 普通编辑 (添加/删除/编辑)
  4. 更多编辑 (添加/编辑/更多)
  5. 上传图片

配置

  1. 普通表格/树形菜单

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, "")
    })
});
  1. 普通编辑按钮
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')
   })
});
  1. 更多编辑
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,)
   })
});
  1. 上传图片

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')
    })
})

image

image

工具类

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>

posted @   wczhw  阅读(38)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示