LayUI修改列表样式

Faith_ZL

2024-04-23 帮助1人

修改layui列表某一行的样式

最近在做前后端不分离的项目后端用的layui,遇见了一个棘手的要求，点击按钮，修改列表某一行的样式，调接口之后再加载原来的字，后来终于解决了这个问题，借此记录一下

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <header th:replace="header::html"></header>
</head>
<style>
    .layui-form-label {
        width: 144px;
    }
    .layui-input-block {
        margin-left: 174px;
    }
    .loading {
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        width: 50px;
        height: 50px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>
<body>

<table id="role-table" lay-filter="test"></table>
<script type="text/html" id="role-bar">
    <button class="pear-btn pear-btn-warming pear-btn-sm block-1" lay-event="putOut">发布</button>
</script>

<script src="https://blog.csdn.net/layui/layui.js"></script>
<script>
    layui.use(['table','jquery'], function(){
        var table = layui.table;
        let $ = layui.jquery;
        let serveId = JSON.parse(sessionStorage.getItem('clintId'))
        let cols = [
            [
                {title: '序号', field: 'number', align:'center', width:80,type:'numbers'},
                {title: '版本号', field: 'version', align:'center'},
                {title: '上传时间', field: 'createTime', align:'center',sort: true},
                {title: '版本描述', field: 'serviceDec', align:'center'},
                {title: '发布状态', field: 'pubStatus', align:'center',
                    templet: VoucherFount
                },
                {title: '上传人', field: 'createUser', align:'center',},
                {title: '操作', toolbar: '#role-bar', align:'center', width:80}
            ]
        ]
        //第一个实例
        var tableIns =  table.render({
            elem: '#role-table',
            url: '/api/customer/serve/version/list',
            page: true ,
            toolbar: '#role-toolbar',
            where:{serveId:serveId},
            cols: cols ,
            initSort: {
                field: 'createTime', //需要排序的字段
                type: 'desc' // 排序方式
            },
            skin: 'line',
        });
        table.on('tool(test)', function(obj){
            if(obj.event === 'remove'){
                window.remove(obj);
            } else if(obj.event === 'putOut'){
                window.putOut(obj);
            }
        });
        function VoucherFount (data) {
            pubStatus = data.pubStatus
            var templetStr = ''
            if(pubStatus === '已发布'){
                templetStr  = '<span lay-event="showNacos" class="already"  style="color: #1e9fff">'   data.pubStatus   '</span>'
            }else if(pubStatus === '未发布'){
                templetStr  = '<span class="already">'   data.pubStatus   '</span>'
            }else{
                templetStr  = `1111`
            }
            return templetStr;
        }
        window.putOut = function (obj){
            console.log(obj)
            let  tr = obj.tr
            $.ajax({
                url:'/api/customer/serve/rollback',
                method:"POST",
                data:{
                    serveId:serveId,
                    version:obj.data.version
                },
                beforeSend: function(jqXHR){
                    var rowIndex = tr.attr("data-index");
                    //获取你要修改的哪一行  data-field=‘你的data-field’
                    $(".layui-table-box tbody tr[data-index='"   rowIndex   "'] td[data-field='pubStatus']").html(`<div class="loading"></div> `);
                    //同步更新缓存对应的值（真正的更新）
                    obj.update({
                        pubStatus: pubStatus
                    });
                },
                success:function(result){
                    if(result.code === 200){
                        layer.msg(result.msg, {
                            icon : 1,
                            time : 2*1000   1
                        })
                        tableIns.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            , url: '/api/customer/serve'//后台做模糊搜索接口路径
                            , method: 'get'
                        });
                    }else {
                        tableIns.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            , url: '/api/customer/serve'//后台做模糊搜索接口路径
                            , method: 'get'
                        });
                        layer.msg(result.msg, {
                            icon : 2,
                            time : 1000
                        })
                    }
                }
            })
        }
    });
</script>
</body>
</html>

这篇好文章是转载于：学新通技术网

LayUI修改列表样式

修改layui列表某一行的样式

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐