KDS之layui表格列表按钮插件

class ButtonSpecialEffects {
    
    setNum = 1;

    constructor(Config,metho){
      
        this.Config = Config;

        this.Config.event = this.Config.event?this.Config.event:'mouseover';
       
        var forselectdom = setInterval(() => {

            try {
             
                if(!this.Config.page.includes(window.location.pathname) ){
                    throw Error('this.Config.page.indexOf(window.location.href)')
                }
                var Dom = document.querySelector('.layui-card-body').children[2];
        
                if(Dom.className == 'layui-form layui-border-box layui-table-view'){
        
                    var tbodyChildNodes=  Dom.querySelectorAll('.layui-table-box>.layui-table-body>table>tbody>tr');

                    if(tbodyChildNodes.length>0){

                        this.ButtomBoxDom = tbodyChildNodes
        
                        clearInterval(forselectdom)

                        metho(this,tbodyChildNodes);
                    }

                }
                
            } catch (error) {    
                error.tips = '当前页面不支持ButtonSpecialEffects'; 
                if(error.message.indexOf('page')){
                    error.tips = '当前页面不支持ButtonSpecialEffects,启用page未配置';
                }
                console.dir(error);
                console.warn(error);
                return  clearInterval(forselectdom);
            }
           
        }, 10);

    };
    set ButtomBoxDom(value){
        this._ButtomBoxDom = value
    };
    hide(type = 1){
        var _ButtomBoxDom = $(this._ButtomBoxDom);
        console.log(1111111111111111);
        if(type == 1){

            _ButtomBoxDom.each(function(index,elem){
                $(elem).children( ":last-child" ).find('div').attr('botton-key','key')
                $(elem).children( ":last-child" ).find('div').hide()
                $(elem).children( ":last-child" ).append(`<div kdsbutton-move="show" class="layui-table-cell laytable-cell-1-0-13" style=""> <a class="layui-btn layui-btn-danger layui-btn-xs" kdsbutton-index="`+index+`" ><i class="layui-icon layui-icon-slider"></i></a> </div>`);
            })
        }else{
            _ButtomBoxDom.each(function(index,elem){
                $(elem).children( ":last-child" ).find('div:first-child').hide()
            })
        }
      
    };
    into(isright){

        try {
            var that = this,
            listwidthobj = this.Config.listwidth;
            this.hide();
            this.addstyle();    
            if(listwidthobj){
                this.setTablewidth(listwidthobj);
            } 
            $('.layui-card-body').on(this.Config.event,'div[kdsbutton-move]',function(e){
               var othis =  $(this),
               prevDom = othis.prev('div'),
               clientX = e.clientX;
               prevDom[0].style = `visibility:hidden`;
               var  prevHeight =  prevDom.height();

               that.autoPosition(e.clientY,prevHeight);      

               that.hide(2);

               prevDom.css({
                top:that.clientY-(prevHeight/2),
                left:clientX-80,
                display:'flex',
                visibility:''
            })
               prevDom.show();
            })
            $('.layui-card-body').on('mouseleave','*[botton-key]',function(){
                var othis = $(this);
                    othis.hide()
             })

             //右键弹出
             if(isright === true){
                 that.rightclickshow();
             }
            
        } catch (error) {
            console.warn(error);
        }
    };
    rightclickshow(){
        var that = this;
        $('.layui-table-body .layui-table tbody').on('contextmenu','tr',function(e){
            var othis = $(this),
            index = othis.attr('data-index'),
            prevDom = $(this).children( ":last-child" ).find('div:first-child'),
            clientX = e.clientX;
  
            prevDom[0].style = `visibility:hidden`;
            var  prevHeight =  prevDom.height();

            that.autoPosition(e.clientY,prevHeight);      

            that.hide(2);

            prevDom.css({
             top:that.clientY-(prevHeight/2),
             left:clientX-80,
             display:'flex',
             visibility:''
         })
            prevDom.show();
            return false;
         })
    };
    autoPosition(clientY,prevHeight){
        if(clientY<100 && clientY>0){
            this.clientY = 200;
            return;
        }

        if(clientY>450 && clientY>0){
            this.clientY =    450-(prevHeight/6);
            return;
        }
            this.clientY = clientY;
    }
    addstyle(){
        $('body').append(`<style>

        .layui-table-view td.layui-table-col-special>.layui-table-cell:nth-child(1){
                position: fixed;
                height: auto;
                top: 0;
                width: 130px;
                overflow: inherit;
                display: flex;
                flex-direction: column;
                z-index: 9999999;
                border-radius: 5px;
                opacity: 0;
                padding-bottom: 8px;
                background-color: #fff;
                box-shadow: 1px 2px 10px 1px #3c3c3c;
                animation:mymove .3s infinite ;
                /*Safari 和 Chrome:*/
                -webkit-animation:mymove .3s infinite ;
                animation-iteration-count:1;
                animation-fill-mode:forwards
            }
            .layui-table-col-special>.layui-table-cell:nth-child(1)>a{
                margin-left: 0px;
                margin-top:15px;
            }
            .layui-table-col-special>.layui-table-cell::after{
                clear: both;
                content: '';
            }
            @keyframes mymove{
                from {opacity: 0;}
                to {opacity: 1;}
            }
            .addvisibility{
                visibility:hidden
            }
            .layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even){
                background-color:#eaeaea;
            }
        
                         </style>`);
    
    };

    setTablewidth(obj){

        if(obj.page != undefined &&  !obj.page.includes(window.location.pathname)){
            return false;
        }
       var TableWidthStyleDom = $('.layui-table-page').next();
       TableWidthStyleDom.replaceWith(obj.str);
    }

}

调用方法：
在layui的laypage.js文件内创建对象，表格每次重载时都执行

点击查看代码

   u.prototype.render = function(e) {
        var n = this,
        i = n.config,
        r = n.type(),
        u = n.view();
        2 === r ? i.elem && (i.elem.innerHTML = u) : 3 === r ? i.elem.html(u) : a[t](i.elem) && (a[t](i.elem).innerHTML = u),
        i.jump && i.jump(i, e);
        var s = a[t]("layui-laypage-" + i.index);
        n.jump(s),
        i.hash && !e && (location.hash = "!" + i.hash + "=" + i.curr),
        n.skip(s)
    };