layui单元格编辑下拉框-控制表格滚动条显示隐藏

都24年还在用layui，太难搞了，最近需要在表格内编辑，以及使用下拉框编辑，有很多博主都已经有编写好的了，但都有个问题就是滚动条会消失，本篇主要记录解决这个问题

（思路就是监听下拉框的聚焦和失焦来控制样式显示）
问题是因为加了以下样式导致的，不加的话下拉框又会被隐藏

.layui-table-body,
.layui-table-box,
.layui-table-view,
.layui-table-cell {
    overflow: visible;
}

 主要是.layui-table-body这个样式，$(".layui-table-body")打印查找一下这个样式，发现有好几个，找到主体表格的那个，我的是'div.layui-table-body.layui-table-main'，其实都行

接下来就是监听聚焦失焦了，因为下拉框都是在table里面用templet渲染的，在外面是监听不到的，要在表格done方法里执行监听，
dom操作太耗性能了，尽量减少触发操作

let $temp=null;//缓存整个表格.layui-table-body元素对象
var focusChageState=false;//聚焦失焦状态，避免同状态时再触发

var tableIns = table.render({
			elem: '#test'
			...
			, cols: [[
            //templet 提供了三种使用方式,我这里用了第一种，
            //后端是php直接模板传值，不用再jq遍历回显,需要的可以看其它博主的
			, { field: 'valShop', ..., templet:"#selectTpl"}
			]]
			, done: function (res, curr, count) {
				
                //缓存整个表格.layui-table-body元素对象
				$temp=$('div.layui-table-body.layui-table-main')
				// $temp=$('.layui-table-body')
                //监听聚焦失焦
				$(document).ready(function() {
                    //下拉框开启了模糊搜索，layui把会渲染出input框，
                    //在外层元素上加个id或类名.selectBox 好定位，避免其它input被监听
					$('.selectBox .layui-input').on('focus', function() {
						debounce(true) //聚焦触发
					}).on('blur', function() {
						debounce(false) //失焦触发
					}); 
				}); 

			}
		});

var timeout =null;//定时器
//防抖触发，避免有时失焦太快会选中无效，
//避免连续触发，避免同时打开多个下拉框连续触发
function debounce(type){
	clearTimeout (timeout)//简单的防抖，不知道为什么网上copy的防抖不生效
	timeout = setTimeout(() => {  
		focusChage(type)
    }, 200);
}

//滚动条显示和隐藏
function focusChage(type){
	console.log('执行了');
	if(type != focusChageState){//同状态时不触发，有时选中会触发两次失焦，
                                //同时打开多个下拉框时会多次触发聚焦，因为防抖掉了失焦事件
		if(type){               
			onsole.log('聚焦!');
			focusChageState=true;//记录聚焦状态
			$temp.css('overflow', 'visible');
		}else{
			console.log('失焦!');
			focusChageState=false;//纪录失焦状态
			$temp.css('overflow', '');
		}
	}
			
}

到这里就已经可以用了，就是还有问题没解决，打开下拉框不勾选，又编辑其它单元格输入框，下拉框不会关闭，暂时不管了

这里贴个 templet:"#selectTpl"下拉框部分，因为是php模板传值，参考就行了，其它的就还得是遍历回显，可以看其他参考的博主，

如果是在表格done方法里遍历回显，设置下拉框value值后还是不回显时，最后加上form.render();//刷新一下表单

//templet 提供了三种使用方式,这里用id模板绑定
<script type="text/html" id="selectTpl">
 <div class="layui-form-item selectBox" style="text-align: left;">
  <select .... data-select="{{d.id}}" lay-search>
		<option value=""></option>
		{volist name=":vae_get_config('shop_novel')" id="v"}
          <option value="{$key}" {{ d.valShop== '{$key}' ? 'selected' : '' }}>{$v}</option>
		{/volist}
   </select>
 </div>
</script>
//{{d.id}},{{d.valShop}},是layui 使用templet可以把整行数据{{d}}传过来，方便大家使用自己的数据
//把id存起来方便选中时使用form.on获取，var selectId = data.elem.getAttribute('data-select');

参考链接：https://zhuanlan.zhihu.com/p/709438254

                  https://blog.csdn.net/qq_51110402