layui表格取消横向滚动条_layui表格固定表头统一处理方案

实现效果:表头和底部分页固定，鼠标滚动只会滚顶body中数据。效果如下：

1、找到layui中的table.js文件，在变量table中加入属性，如图红框中内容：

fiexdRowHeight：是否开启固定行高，默认是false

fiexdRowHeight_rows：表格中显示条数，默认是10条

以上两个参数都可以通过自己传入参数值

2、找到pullData函数：

在此函数中ajax异步请求成功回调的success函数中最后添加如下代码：

//固定行高、表头处理

if(Object.prototype.toString.call(options.fiexdRowHeight).slice(8, -1) === 'Boolean' && options.fiexdRowHeight) {

var div_ = $("[lay-id='" + options.id + "']")

var tr_len = div_.find(ELEM_MAIN).find("tr").length

if(tr_len > 10){

if(Object.prototype.toString.call(options.fiexdRowHeight_rows).slice(8, -1) !== 'Number') {

options.fiexdRowHeight_rows = 10

}

var height_main = (options.fiexdRowHeight_rows * 39) + 'px'

var height_fixed = (options.fiexdRowHeight_rows * 39) + 'px'

//如果出现横向滚动条时

if(div_[0].parentNode.clientWidth < document.getElementsByClassName('layui-table-main')[0].getElementsByClassName('layui-table')[0].clientWidth) {

height_main = ((options.fiexdRowHeight_rows * 39) + 18) + 'px'

}

div_.find(ELEM_MAIN).css("height", height_main);

div_.find(ELEM_FIXL).find(ELEM_BODY).css("height", height_fixed);

div_.find(ELEM_FIXR).find(ELEM_BODY).css("height", height_fixed);

}else {

div_.find(ELEM_MAIN).css("height", "auto");

div_.find(ELEM_FIXL).find(ELEM_BODY).css("height", "auto");

div_.find(ELEM_FIXR).find(ELEM_BODY).css("height", "auto");

}

3、应用：如图：

layui表格取消横向滚动条_layui表格固定表头统一处理方案相关推荐

layui表格取消横向滚动条_layui滑动条如何隐藏
layui滑动条隐藏的方法:首先打开相应代码文件:然后通过"content: ['/home/index/echartTest?role=2&wd='+host,'no']" ...
layui表头宽度和表格一致_layui表格固定表头统一处理方案
实现效果:表头和底部分页固定,鼠标滚动只会滚顶body中数据.效果如下: 1.找到layui中的table.js文件,在变量table中加入属性,如图红框中内容: fiexdRowHeight:是否开 ...
html表格不能横向自动展示,layui数据表格table横向滚动条不显示纵向滚动条显示不完整...
layui数据表格table横向滚动条不显示纵向滚动条显示不完整 layui数据表格table横向滚动条不显示,纵向滚动条显示不完整需要把heigh高度写死 table.render({ elem: ...
layui表格添加链接列_Layui表格之多列合并展示
前言: 当我们在使用Layui的时候,有时表格中的列比较多,展示出来肯定是有问题的,这样就不得不舍弃一些列不展示,不展示是一种解决方案,但是更好的解决方案应该是合并展示. 实现效果: 实现代码参考: ...
layui table 全选过滤_layui表格(表单)的全选功能
最近在使用layui这个框架,其中有用到表格的全选功能,下面记录下我的使用.html文件需要引用的是layui.js和layui.css,但是上面两个文件又会引入其他文件.,如图所示, 所以建议从la ...
elementplus中表格组件使用固定列时出现滚动条粘性布局固定表头
效果图如上, 因为项目经理希望竖向滚动条永远在最外面,所以通过粘性布局实现表头固定: 由于列数过多,固定多选框列和操作列时发现出现了滚动条,看官网上的例子也有,通过检查元素发现是固定列的阴影(使用伪元 ...
layui清空表单数据_Layui表格初始化
然后加载和初始化layui的table模块,elem指定原始表格元素选择器(推荐id选择器),url是连接的数据接口. cols是表头的内容,field设定字段名,是表格数据列的唯一标识,字段名要和数 ...
element表格取消全选_ElementUi 表格取消全选框，用文字表示
Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图一. 添加添加复选框列二.给方法(这个方法主要就是给表格所需要的列添加类名.)具体可以看ElementUi的表格 ...
【ElementUI】 table表格尾部的合计行，固定表头却不显示合计行
背景按照官网要求不固定表头,添加show-summary就可以显示合计行问题但是给table加了一个固定高度之后,就不显示了, 打开控制台可以看到这个合计是存在的那么需要做两步,合计即可出现 ...
layui根据name获取对象_layui表格行合并；解决侧边固定栏合并
实现效果图: 适配分页:全选: 后台嵌套数据: 获取数据后:渲染前操作: ,done:function(res){if(res.data){for(var i = 0;i<res.data.le ...

layui表格取消横向滚动条_layui表格固定表头统一处理方案

layui表格取消横向滚动条_layui表格固定表头统一处理方案相关推荐

最新文章

热门文章