解决 使用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()方法 重置表格尺寸的更多相关文章

  1. layui框架中关于table方法级渲染和自动化渲染之间的区别简单介绍

    方法级渲染: <table class="layui-hide" id="LAY_table_user" lay-filter="user&qu ...

  2. 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; ...

  3. layui之layer打开table后分页无效的解决方法

    1.原代码: <body> <div id="showalladdableavms" style="display: none;width:100%&q ...

  4. HTML Table导出为Excel的方法

    HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type" ...

  5. 透明、圆角、阴影效果、背景色渐变、<a></a>去外层虚线、!!!表格标签<table>

    表格标签 <table> 代表表格 width:指表格的宽度           一种是像素 (浏览器缩小的时候出现滚动条)           一种是百分比(跟着浏览器的大小而大小) b ...

  6. 表格(table) 插件:支持当前行增行、删除。使用事件委托

    最近做一个项目,需要对表格进行增行和删行. 研究了一下jquery操作dom的方法和事件委托原理,下面是我编写的例子,源码传上,欢迎高手指点. 功能: 支持在指定行下面增行: 支持删行指定行: 增行. ...

  7. Jquery table元素操作-创建|数据填充|重置|隐藏行

    1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...

  8. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

  9. html table 美化-html如何用css美化表格

    html用css美化表格的方法:首先创建一个HTML示例文件:然后在body中创建table表格:最后通过style标签给表格添加css样式即可. 代码 下面通过示例来看看. /*表格样式*/ tab ...

  10. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

随机推荐

  1. kingbaseES R3 集群配置 SSL

    ​ 案例说明: 本测试是在非生产环境下,在官方没有明确声明支持KingbaseCluster使用ssl的前提下,建议只能在测试环境使用,避免生产环境下直接使用. 数据库版本: TEST=# selec ...

  2. springboot拦截器总结

    Springboot 拦截器总结 拦截器大体分为两类 : handlerInterceptor 和 methodInterceptor 而methodInterceptor 又有XML 配置方法 和A ...

  3. logstash客户端传送symantec日志到elasticsearch

    一.安装相应版本的logstash wget https://artifacts.elastic.co/downloads/beats/logstash/logstash-7.5.2-x86_64.r ...

  4. 手把手教你用Java获取IP归属地

    前几个月微信公众号上线了IP归属地的功能,后续知乎.抖音等平台纷纷添加了该功能.如果是国内的用户精确到省份,国外用户精确到国家.本文就使用Java实现获取IP归属地. ! 主要讲解几个步骤: Java ...

  5. Lua CallbackHell优化

    概述 在异步操作中,常常要使用回调.但是,回调的嵌套常常会导致逻辑混乱,一步错步步错,难以维护.在Lua中,可以使用协程进行优化. 问题分析 模拟一个回合制游戏攻击过程 local function ...

  6. nginx反向代理单独的java项目配置示例

    # jar包封装成docker镜像启动 docker run -d -v /var/log/xxx:/var/log/xxx --restart=always --network host --nam ...

  7. tomcat的catalina.out日志按自定义时间格式进行分割

    默认情况下,tomcat的catalina.out日志文件是没有像其它日志一样,按日期进行分割,而是全部输出全部写入到一个catalina.out,这样日积月累就会造成.out日志越来越大,给管理造成 ...

  8. 使用filebeat过滤掉部分字段

    host,agent,ecs三个字段也是不让drop的 processors: - drop_fields: fields: ["log","input",&q ...

  9. MyCLI :一个支持自动补全和语法高亮的 MySQL/MariaDB 客户端

    MyCLI 是一个易于使用的命令行客户端,可用于受欢迎的数据库管理系统 MySQL.MariaDB 和 Percona,支持自动补全和语法高亮.它是使用 prompt_toolkit 库写的,需要 P ...

  10. 矩阵顺时针打印(C++)(? 为什么不能AC,9度1391)

    #include <iostream> #include <fstream> using namespace std; int a[1000][1000]; void prin ...