• 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-差值。

     

  • 相关阅读:
    Navicat访问宝塔中的MySQL
    《深入浅出OCR》第三章:OCR文字检测
    防火墙ssh详解讲解
    【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit
    Myblockly模块简介
    Java编程中,使用时间戳机制实现增量更新的示例
    Polar bear fishing Privacy Policy
    正则表达式 (Regex) 2022教程
    SpringCloud的新闻资讯项目06 --- kafka及异步通知文章上下架
    图论-图的深度优先遍历-Java
  • 原文地址:https://www.cnblogs.com/lhjy1/p/16914132.html