layui修改列表样式

最新推荐文章于 2024-08-02 17:26:44 发布

Faith_ZL

最新推荐文章于 2024-08-02 17:26:44 发布

阅读量1.3k

点赞数 1

文章标签： layui css3 javascript

本文链接：https://blog.csdn.net/qq_43575827/article/details/125371176

版权

1

修改layui列表某一行的样式

修改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="/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>