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(``);

};

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