layui table 表格 多个操作按钮使用记录

在开发中有时候 table 表格的操作按钮是不固定的，可以有多个，三两个还好，如果操作的按钮过多的时候就不美观了，这时候我们就想把一下按钮添加到一个按钮列表中，在正常的情况下就隐藏起来，点击的时候弹出这个按钮列表， 如： 我们想要实现这种效果

当我们点击更多的时候弹出一个按钮列表， 在网上找了好久都没有找到layui有中自带这个功能，所有得自己写了

思路

刚开始的时候我觉得可以点击更多的时候写一个弹窗的方法，在弹窗中展示按钮，但是做的差不多的时候发现，这弹窗不太行，不符合原型图上的设计，于是又找其他的方法，最终找到了 layer.tips方法
layer.tips是提示方法，它可以在点击的地方进行弹窗提示，跟原型图上的差不多了， 于是将普通弹窗改为了 layer.tips

    //监听工具条
    table.on('tool(data_table)', function(obj){
    	//当点击table 表格中的更多按钮的时候触发这个事件
        if(obj.event === 'more'){
			var html = "<input value = 'aaaa'>"
 			layer.tips(html, this,{tips: [1, '#ffffff'],area: ['130px', '150px'], time: 0})
 	} 
 }

用layer.tips又有个问题，这是提示弹窗，一般提示的弹窗会有个在 几秒后 自动关闭 或者设置为不关闭，这样不太符合我们的要求，我们想要自己关闭这个弹窗,由于这个弹窗右上角是没有关闭图标的，所以我们想设置成点击其他地方就自动关闭这个弹窗，这时候可以写一个监听鼠标点击事件进行监听

    //监听工具条
    table.on('tool(data_table)', function(obj){
    	//当点击table 表格中的更多按钮的时候触发这个事件
        if(obj.event === 'more'){
			var html = "<input value = 'aaaa'>"
			// 获取弹窗index
 			tips_index = layer.tips(html, this,{tips: [1, '#ffffff'],area: ['130px', '150px'], time: 0})
 	} 
 }
 	//定义tips 弹窗index
 	var tips_index = ""
 	//监听鼠标点击事件
   window.addEventListener('click', function() {
   		//关闭弹窗
        layer.close(tips_index)
    }, false);

当监听到鼠标点击的时候关闭layer.tips弹窗
这时候又有个问题了，这个监听鼠标点击事件在 js 事件等级是最低的，就是说，我点击更多后展示弹窗，展示完弹窗后再执行其他的关联到这个点击事件的其他操作，执行完所有更这个点击事件相关的逻辑才到鼠标监听事件，这就出现了一种情况， 我点完更多，刚弹窗又被鼠标监听给关闭了，这就很麻烦了，问题在鼠标监听上，我可以再弄一个变量用来逻辑判断啊， 上面 tips.index是弹窗的索引， 也就是说它是一个整数，我点击更多的时候它会将这个索引赋值给全局变量 tips_index,这时候我再赋值一个控制关闭弹窗的变量一个小于这个索引值的数，然后改一下监听事件，每次监听点击就给这个控制关闭弹窗的变量+1， 如果相等就不关闭，如果不相等就关闭这个弹窗不就行了吗

    //监听工具条
    table.on('tool(data_table)', function(obj){
    	//当点击table 表格中的更多按钮的时候触发这个事件
        if(obj.event === 'more'){
			var html = "<input value = 'aaaa'>"
			// 获取弹窗index
 			tips_index = layer.tips(html, this,{tips: [1, '#ffffff'],area: ['130px', '150px'], time: 0})
 			close_tips = tips_index-1
 	} 
 }
 	//定义tips 弹窗index
 	var tips_index = ""
 	var close_tips = ""
 	//监听鼠标点击事件
   window.addEventListener('click', function() {
   		//关闭弹窗
   		close_tips += 1
   		if (close_tips != tips_index){
   		        layer.close(tips_index)
   		}
    }, false);

终于完了，看下效果