基于layui的table工具条模块
如下 ， 当我们操作过多时占用列表位置太多，会导致不美观
直接上效果
怎么做到的呢，请看代码
layui.config({
version: true,
base: 'layuiadmin/'
}).extend({
index: 'lib/index'
}).use(['index','layer','moretool'], function() {
var layer=layui.layer,
moretool=layui.moretool;
table.on('tool(LAY-user-manage)', function(obj) {
var data = obj.data;
var layEvent = obj.event;
var tr = obj.tr;
var sendData = {
};
sendData.id = data.id;
if (layEvent === 'edit') {
} else if (layEvent === 'more') {
moretool.render({
trData: obj,
lay_event: 'more',
event: [{
eventName: 'payRecords',
text: '缴费记录',
insert: '',
callback: function(e) {
var data = e.data;
console.log('e', e);
}
},
{
eventName: 'changeRecords',
text: '变更记录',
insert: '',
callback: function(e) {
var data = e.data;
console.log('e', e);
}
},
{
eventName: 'staffDatas',
text: '员工资料',
insert: '',
callback: function(e) {
var data = e.data;
console.log('e', e);
}
}
]
});
}
});
});
layui.define(['layer'], function(exports) {
var $ = layui.$,
layer = layui.layer;
var moretool = {
render: function({
trData = null,
lay_event = null,
selectTool = [
'',
'
'
],
childColor = "#FFFFFF",
childHoverColor = "#1E9FFF",
childHeight = 30,
toolWidth = 200,
space = 0,
event = [{
eventName: 'sele',
text: '查找',
insert: '',
callback: function(e) {
console.log('e', e);
}
},
{
eventName: 'add',
text: '添加',
insert: '',
callback: function(e) {
console.log('e', e);
}
},
{
eventName: 'del',
text: '删除',
insert: '',
callback: function(e) {
console.log('e', e);
}
},
{
eventName: 'check',
text: '审查',
insert: '',
callback: function(e) {
console.log('e', e);
}
},
]
} = {
}) {
if (trData == null) {
console.error("请传入工具条obj数据");
return;
} else if (lay_event == null) {
console.error("请传入工具条lay-event数据");
return;
}
for (var i = 0; i < event.length; i++) {
event[i].insert = event[i].insert || '';
selectTool.splice(1 + i, 0, '+ event[i].eventName + '">' + event[i].insert +
''+event[i].text + '
');
}
var childCount = selectTool.length - 2,
childWidth = toolWidth,
toolHeight = (childHeight * childCount) + ((childCount - 1) * space),
data = trData.data,
tr = trData.tr;
var width = $(window).width();
var height = $(window).height();
var button = tr.find('a[lay-event="' + lay_event + '"]');
var buttonPos = {
width: button.width(),
height: button.height()
};
var pos = button.offset();
var popPos = pos;
var devX = width - pos.left;
var devY = height - pos.top;
popPos.left += buttonPos.width / 2;
popPos.top += buttonPos.height / 2;
if (devX < toolWidth) {
popPos.left -= toolWidth;
}
if (devY < toolHeight) {
popPos.top -= toolHeight;
}
var eventOn = function(layero, index) {
layero.find('.child').each(function() {
var clickEvent = $(this).data('event');
for (var i = 0; i < event.length; i++) {
if (clickEvent == event[i].eventName) {
var num = i;
$(this).on('click', function() {
if (event[num].callback) {
event[num].data = data;
event[num].callback.call(this, event[num]);
}
layer.close(index);
});
}
}
});
};
var toolIndex = layer.open({
id: 'selectTool',
closeBtn: 0,
isOutAnim: false,
resize: false,
title: false,
type: 1,
shade: [0.1, '#ffffff'],
shadeClose: true,
content: selectTool.join(''),
offset: [Number(popPos.top) + 'px', Number(popPos.left) + 'px'],
success: function(layero, index) {
layero.find('.selectTool').css({
"background-color": "#ffffff",
"width": toolWidth + "px",
"height": toolHeight + "px"
});
layero.find('.child').each(function(i, item) {
$(this).css({
"background-color": childColor,
"width": childWidth + "px",
"height": childHeight + "px",
"margin-bottom": space + "px",
"text-align": "center",
"vertical-align": "middle",
"color": "#000000",
"line-height": childHeight + "px"
});
});
eventOn.call(this, layero, index);
layero.find('.child').hover(function() {
$(this).css({
"background-color": childHoverColor,
"color": "#FFFFFF"
});
}, function() {
$(this).css({
"background-color": childColor,
"color": "#000000"
});
});
}
});
}
};
exports('moretool', moretool);
});
参数可以任意调节，以达到满意的效果
