######【学到了】:解决:dataTable表头下拉框被tbody遮挡【右键“检查元素”就是F12.》快捷打开前端调试控制台!】

======实现效果:

========今天遇到一个问题:【dataTable:表头下拉框被tbody遮挡。】:

====》设置z-index 元素层级 无效。

====》前端同学。帮我看了下:

尝试①(学到了):父元素position=relative。子元素(也就是当前被遮挡元素)position设置为:absolute。

这样子元素 跟随 父元素 位置。

尝试②:查找dataTable 生成的dom元素。【当前元素,找不到,不断向上找 父元素的样式。

===》我对css不熟。所以,找父元素也不知道哪个属性影响。

===》#### 没关系:有个方法:

===》这样做:可以快速的测试:每个属性的影响:即使不知道属性作用!!!

今天算是学到了。】发现。去掉:

overflow属性。就显示出来了。666

====》###  没人求助时候。只能耐心的一个个父元素。一个个属性。耐心调试。。。

====》所以:解决办法如下:   

学到一个css属性》【overflow:hidden》超出部分 被隐藏。】

<script>
//    防止:dataTable表头下拉框被tbody遮挡。
    window.onload=function(){
        //console.log( $('.dataTables_scroll'))
        $('.dataTables_scroll .dataTables_scrollHead').removeAttr('style');//for 去掉overflow属性。
    }
</script>

==============》题外话:这是前端同学的处理:

我在知道 是 dataTable 生成文件影响时,第一反应 是 改动dataTable 的css或js   组件代码。

可能是 最近修改 组件为 符合 产品要求时,改习惯了。。。

=====》### 确实。dataTable 作用于 整个系统 UI。 不是独立的某一处才用到的UI组件。  所以,最好是代码动态处理,不要改组件代码。

猜你喜欢

转载自blog.csdn.net/qq_20597149/article/details/81119214
今日推荐