layui table表格使用table.resize()方法 重置表格尺寸
解决 使用layui中的table表格重置表格尺寸 问题
表格的高度共有两种写法 相对应的就有两种解决方法
第一种
当表格高度设置为固定高度时,改变表格高度使用
tableIns=table.render({
elem: '#box'
, url: 'index.php'
, cellMinWidth: 80 //最小宽度
, height: '500px'
, page: true //开启分页
, limit: 30 //页数
, limits: [30, 60, 90] //每页数
, method: 'post' //类型
, defaultToolbar: ['filter']
, toolbar: '#toolbarDemo'
});
使用官方API给的方法会报错,通过查看layui框架源代码,进行调试,解决了改变固定高度问题。
//设置表格的高度
tableIns.config.height=600;
tableIns.resize()
第二种
当表格高度设置为full-差值时,改变表格高度使用
高度将始终铺满,无论浏览器尺寸如何。这是一个特定的语法格式,其中 full 是固定的,而 差值 则是一个数值,这需要你来预估,比如:表格容器距离浏览器顶部和底部的距离“和”
tableIns=table.render({
elem: '#box'
, url: 'index.php'
, cellMinWidth: 80 //最小宽度
, height: 'full-120'
, page: true //开启分页
, limit: 30 //页数
, limits: [30, 60, 90] //每页数
, method: 'post' //类型
, defaultToolbar: ['filter']
, toolbar: '#toolbarDemo'
});
当使用full-差值的时候,我在本页面如何写都没办法解决,我从GitHub上下载了一份源码,我直接在源码调试,看看是哪里出现了问题
查看源码发现
在table.js文件中,刚开始定义table的使用,定义thisTable方法

这里面返回resize始终都为空,但是该脚本所有的resize都走该方法返回,通过调试,发现thisTable返回的resize中的that里面不存在fullHeightGap的值,所以每次调用的时候都会报错误。
通过调试需要在返回值中把that返回回去,才可以使用fullHeightGap的值。

在自己的页面脚本调用改变fullHeightGap的值就可以改变高度了
tableIns.getthat().fullHeightGap='350';
tableIns.resize()
这样就解决full-差值的问题了,但是解决这个问题需要去修改原本的代码,暂时还没找到能不修改代码就能解决的方法。
推荐大家使用第一种方式,自己写js脚本去计算高度,这样就可以实现即不改源代码也可以实现full-差值。
layui table表格使用table.resize()方法 重置表格尺寸的更多相关文章
- layui框架中关于table方法级渲染和自动化渲染之间的区别简单介绍
方法级渲染: <table class="layui-hide" id="LAY_table_user" lay-filter="user&qu ...
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
- layui之layer打开table后分页无效的解决方法
1.原代码: <body> <div id="showalladdableavms" style="display: none;width:100%&q ...
- HTML Table导出为Excel的方法
HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type" ...
- 透明、圆角、阴影效果、背景色渐变、<a></a>去外层虚线、!!!表格标签<table>
表格标签 <table> 代表表格 width:指表格的宽度 一种是像素 (浏览器缩小的时候出现滚动条) 一种是百分比(跟着浏览器的大小而大小) b ...
- 表格(table) 插件:支持当前行增行、删除。使用事件委托
最近做一个项目,需要对表格进行增行和删行. 研究了一下jquery操作dom的方法和事件委托原理,下面是我编写的例子,源码传上,欢迎高手指点. 功能: 支持在指定行下面增行: 支持删行指定行: 增行. ...
- Jquery table元素操作-创建|数据填充|重置|隐藏行
1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...
- js动态给table添加/删除tr的方法
js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...
- html table 美化-html如何用css美化表格
html用css美化表格的方法:首先创建一个HTML示例文件:然后在body中创建table表格:最后通过style标签给表格添加css样式即可. 代码 下面通过示例来看看. /*表格样式*/ tab ...
- jQuery操作Table tr td常用的方法
虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...
随机推荐
- CentOS7_K8S安装指南
https://www.cnblogs.com/liu-shuai/articles/12177298.html 不能完全按照他来装,因为他装的是15.5的,15.5 有部分组件在阿里云镜像上没有,导 ...
- GreatSQL vs MySQL性能测试来了,速围观~
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. GreatSQL是MySQL的国产分支版本,使用上与MySQL一致. 1.结论先行 无论ibp(innodb_buffer ...
- MySQL InnoDB缓存
1. 背景 对于各种用户数据.索引数据等各种数据都是需要持久化存储到磁盘,然后以"页"为单位进行读写. 相对于直接读写缓存,磁盘IO的成本相当高昂. 对于读取的页面数据,并不是使用 ...
- 跟羽夏学 Ghidra ——数据
写在前面 此系列是本人一个字一个字码出来的,包括示例和实验截图.本人非计算机专业,可能对本教程涉及的事物没有了解的足够深入,如有错误,欢迎批评指正. 如有好的建议,欢迎反馈.码字不易,如果本篇文章 ...
- k8s pod被驱逐问题分析及解决
- Nginx负载均衡设置max_fails和fail_timeout
在Nginx的负载均衡检查模块中,对于负载均衡的节点可以配置如下可选参数: max_fails=1 fail_timeout=10s 这个是Nginx在负载均衡功能中,用于判断后端节点状态,所用到两个 ...
- NSIS自定义目录选择页面制作之安装…
在nsis制作自定义界面中,目录选择页面个人感觉最为繁琐,因为该界面不仅涉及到界面控件的创建,还要涉及到控件消息传递和状态改变时的回调函数通告. 迅雷界面为例: 其中安装目录中的8盘符,在本机中并不存 ...
- 详解平衡二叉树(AVL tree)平衡操作(图+代码)
* 左左就右旋,右右就左旋 #include<bits/stdc++.h> using namespace std; typedef long long ll; const int max ...
- 如何用AR Engine环境Mesh能力实现虚实遮挡
在AR应用中,用户最不希望看到不真实的穿模现象发生,如虚拟形象部分身体陷入墙壁之中,或者未碰到墙壁却已无法移动,这种不真实的交互十分影响用户体验.那如何才能让避免虚拟物体的穿模问题呢?使用AR Eng ...
- 基于tauri打造的HTTP API客户端工具-CyberAPI
国庆长假和朋友聚会的时候,和朋友谈起最近这段时间捣鼓tauri,写了一个HTTP API客户端工具.『你写了这么多东西,其实有想过是为了啥不?』为了啥这是一个很大的命题,当初每个项目的时候都想过它应该 ...