基于layui的table工具条模块（弹出更多按钮）

基于layui的table工具条模块

如下 ， 当我们操作过多时占用列表位置太多，会导致不美观

直接上效果

怎么做到的呢，请看代码

//外部使用方法
//首先在use引用 
            layui.config({
				version: true,
				base: 'layuiadmin/' //静态资源所在路径
			}).extend({
				index: 'lib/index' //主入口模块
			}).use(['index','layer','moretool'], function() {
			var layer=layui.layer,
			moretool=layui.moretool;

           //table的渲染就不给出来了

            //监听工具条 
				table.on('tool(LAY-user-manage)', function(obj) { //注：tool 是工具条事件名
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
					var sendData = {};
					sendData.id = data.id;
					if (layEvent === 'edit') { //查看
				    //do something
					} else if (layEvent === 'more') {//重点 ，更多按钮的代码
						/**
                        使用方法2019.11.27
						moretool.render(option);
						option={
								trData : null, //必传参数
								lay_event : null, //必传参数
								childColor : "#FFFFFF",//选项颜色，可选
								childHoverColor : "#1E9FFF",//选项经过颜色，可选
								childHeight : 30,//选项高度，可选
								toolWidth : 200, //工具总宽度，可选
								space : 0, //孩子边缘间距
								event : [{   //插入点击选项，不填则为默认示例
										eventName: 'sele',//事件名称
										text: '查找',//显示文字
										insert: '',//在显示文字前插入，可插入dom,可选
										callback: function(e) { //事件回调函数
										    var data=e.data;//当前行数据
											console.log('e', e);
										}
									}
								]
						}
						*/
						//选择tool工具
						moretool.render({
							trData: obj, //传入行数据,必传
							lay_event: 'more', //传入按钮点击事件,必传
							event: [{
									eventName: 'payRecords',
									text: '缴费记录',
									insert: '<i class="layui-icon">&#xe60a;</i>',
									callback: function(e) {
										var data = e.data; //当前行数据
										console.log('e', e);
									}
								},
								{
									eventName: 'changeRecords',
									text: '变更记录',
									insert: '<i class="layui-icon">&#xe642;</i>',
									callback: function(e) {
										var data = e.data; //当前行数据
										console.log('e', e);
									}
								},
								{
									eventName: 'staffDatas',
									text: '员工资料',
									insert: '<i class="layui-icon">&#xe612;</i>',
									callback: function(e) {
										var data = e.data; //当前行数据
										console.log('e', e);
									}
								}
							]
						});

					} 
				});
            });   

/*

==================================以下是模块文件================================
// 文件名：moretool.js 放在扩展模块文件夹里 modules/
 moretool.render(option);

option = {
	trData: null, //必传参数，工具条回调参数obj
	lay_event: null, //必传参数，工具条按钮事件名string
	childColor: "#FFFFFF", //选项颜色，可选
	childHoverColor: "#1E9FFF", //选项经过颜色，可选
	childHeight: 30, //选项高度，可选
	toolWidth: 200, //工具总宽度，可选
	space: 0, //孩子边缘间距
	event: [{ //插入点击选项，不填则为默认示例
		eventName: 'sele', //事件名称
		text: '查找', //显示文字
		insert: '', //在显示文字前插入，可插入dom
		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 = [
				'<div class="selectTool">',
				// '<div class="child" data-event="sele">查找</div>',
				// '<div class="child" data-event="add">添加</div>',
				// '<div class="child" data-event="del">删除</div>',
				// '<div class="child" data-event="check">审查</div>',
				'</div>'
			],
			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, '<div class="child" data-event="' + event[i].eventName + '">' + event[i].insert +
					'<span style="user-select:none">'+event[i].text + '</span></div>');
			}

			var childCount = selectTool.length - 2, //孩子个数
				childWidth = toolWidth,
				toolHeight = (childHeight * childCount) + ((childCount - 1) * space), //总高度
				data = trData.data, //行数据
				tr = trData.tr; //行dom
			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; //偏差X
			var devY = height - pos.top; //偏差Y
			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,
				// anim: 1,
				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);
});

参数可以任意调节，以达到满意的效果