layui 数据表格排序操作后表格样式渲染失败

最新推荐文章于 2024-02-02 09:18:14 发布

原创最新推荐文章于 2024-02-02 09:18:14 发布 · 722 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #css

layui 专栏收录该内容

46 篇文章

订阅专栏

该段代码主要展示了如何使用layui库进行表格数据的排序操作，包括升序和降序排列。同时，它详细定义了表格的列格式，如操作列、上报状态列，并根据不同的上报状态赋予背景颜色。在排序后，代码会重新渲染表格样式，确保颜色设定生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，展示问题

开始
在这里插入图片描述
排序操作后

在这里插入图片描述

2，解决


 function hstable(data) {
 //设置初始排序
        var datasw=data? data.commonPage.result.resultlist : []
        var table = layui.table;
        var initSort=(tableLeft&&tableLeft.initSort)?tableLeft.initSort:{"field":"cyDate","type":"desc"};
        console.log(initSort);
        if(initSort.type === 'asc'){ //升序
            datasw = layui.sort(datasw, initSort.field)
        } else if(initSort.type === 'desc'){ //降序
            datasw = layui.sort(datasw, initSort.field, true)
        }
        
        var ins1=table.render({
            elem: '#hstable',
            id: 'hstable',
            height: "full-130",
            initSort:initSort,
            size: 'sm' ,
            filter:{
                items:['colum','data','condition','editCondition'],
                bottom:false
            },
            page:false,
            limit:data?data.commonPage.pageSize:15,
            limits:[15,30,60,80,160,300,600,1000,2000,5000,10000,20000,50000],
            cols: [[
                {type: 'checkbox' },
                {field: 'operate', title: '操作', width: 206, align: 'center', halign: 'center', filter: true, templet: function (d) {
                        return '<a style="color: #409EFF;" lay-event="filldata">填报</a>';
                    }
                },
                {field: 'reportstatus', title: '上报状态', width: 100, align: 'left', halign: 'center', sort: true, filter: true,
                    templet: function (row) {
                        if (row.reportstatus == "0") {
                            return  '<span style="color: #ffffff;" class="daish_background">待审核</span>'
                        } else if (row.reportstatus == "1") {
                            return  '<span style="color: #ffffff;" class="dsb_background">审核完成</span>'
                        } else if (row.reportstatus == "2") {
                            // 显示上报退回
                            return  '<span style="color: #ffffff;" class="ybh_background">已驳回</span>'
                        } else if (row.reportstatus == "3") {
                            return  '<span style="color: #ffffff;" class="sbwc_background">上报完成</span>'
                        } else if (row.reportstatus == "4") {
                            return  '<span style="color: #ffffff;" class="lsbc_background">临时保存</span>'
                        } else {
                            return  '<span style="color: #ffffff;" class="wtb_background">未填报</span>'
                        }
                    }},
            ]],
            data: datasw,
            // data: data? data : [],
            done: function (res, curr, count) {
                layui.soulTable.render(this)
                tableLeft=this;
                doneCallback(data) // 回调函数
                $(".daish_background").parent().parent().css("background","#ffb400");
                $(".dsb_background").parent().parent().css("background","#2983ff");
                $(".ybh_background").parent().parent().css("background","#f86846");
                $(".sbwc_background").parent().parent().css("background","#41bfc0");
                $(".lsbc_background").parent().parent().css("background","#a8a8a8");
                $(".sbth_background").parent().parent().css("background","#e45cd3");
                $(".wtb_background").parent().parent().css("background","#cddc39");

                $(".dl_sbremindyellow").parent().parent().parent().css("background","#fffdf2");
                $(".dl_sbremindred").parent().parent().parent().css("background","#fff0f0");
                $(".dl_authfail").parent().parent().parent().css("background","#f40c0775");

            }
        });

        //触发排序事件后，再次渲染表格样式
        table.on('sort(hstable)', function(obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            $(".daish_background").parent().parent().css("background", "#ffb400");
            $(".dsb_background").parent().parent().css("background", "#2983ff");
            $(".ybh_background").parent().parent().css("background", "#f86846");
            $(".sbwc_background").parent().parent().css("background", "#41bfc0");
            $(".lsbc_background").parent().parent().css("background", "#a8a8a8");
            $(".sbth_background").parent().parent().css("background", "#e45cd3");
            $(".wtb_background").parent().parent().css("background", "#cddc39");

            $(".dl_sbremindyellow").parent().parent().parent().css("background", "#fffdf2");
            $(".dl_sbremindred").parent().parent().parent().css("background", "#fff0f0");
            $(".dl_authfail").parent().parent().parent().css("background", "#f40c0775");
          
        });
    }