layui表格边框_layui怎么固定表格的表头

layui固定表格表头的方法:首先找到layui中的table.js文件;然后在变量table中加入fiexdRowHeight属性;最后添加代码为“if(Object.prototype.toString.call(...))”即可。

6559e1f06fb1e718276c1beb9ba9bd2a.png

推荐:《layUI教程》

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

9f41bcff47c9a5fb2acc74852bbb0263.png

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

902fbcdb02c97ce94fc7abbfdba0338b.png

fiexdRowHeight:是否开启固定行高,默认是false

fiexdRowHeight_rows:表格中显示条数,默认是10条

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

2、找到pullData函数:

7be5ffa195490dde5bc50945909beb18.png

51e56b6c3019c2c88886f66af66a7bdb.png

在此函数中ajax异步请求成功回调的success函数中最后添加如下代码://固定行高、表头处理

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

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

var tr_len = p_.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(p_[0].parentNode.clientWidth < document.getElementsByClassName('layui-table-main')[0].getElementsByClassName('layui-table')[0].clientWidth) {

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

}

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

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

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

}else {

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

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

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

}

}

3、应用:如图:

d5fbbda0958db35887badeb84c5ceecf.png


版权声明:本文为weixin_39618121原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>