layui table 重新设置表格的高度

news2024/11/25 3:08:25

在layui的table模块中,如果使用table.render({})渲染了一个表格实例时,确定了height配置,后续用table.resize(id)方法重置表格尺寸时,表格的高度是不会变化的(如果我的理解没有错的话)。

有时我们希望根据页面元素的变化,调整表格的高度,但不希望重新渲染一个新的表格,也不希望直接操作DOM元素的高度(代码会比较臃肿)。

所以我增加了一个调整高度的方法,使用了table模块会自动调整高度。

事先声明:我的项目中的layui是模块化的,并非构建后的layui.js,所以是在table.js增加了方法代码。如果你使用的是构建后的layui.js,需要自己去定位方法应该处于js的哪个位置。

以下是添加方法的过程:

(1)在table.js中,搜索“table.resize = function(id)”,找到resize方法的位置。

(2)以下是代码源码,可以添加到上图的位置,与resize方法平行

// 重置设置表格的高度配置
  table.resetHeight = function(id,height){
    // 若指定表格唯一 id,则只执行该 id 对应的表格实例
    if(id){
      var config = getThisTableConfig(id); // 获取当前实例配置项
      if(!config) return;

      //如果带有计算符号,则将高度计算得到结果(目前只支持+-)
      if(/^[+-]\d+$/.test(height)) {
        // 提取操作符号和数字  
        const sign = height.charAt(0); // 获取第一个字符作为符号  
        const number = parseInt(height.slice(1), 10); // 从第二个字符开始到字符串结束,转换为整数  

        // 根据符号更新高度值  
        if (sign === '+') {
           config.height += number;
        } else if (sign === '-') {
           config.height -= number;
        }
      }
      else {
        //如果是具体的值,则直接赋值
        config.height = height;
      }
      getThisTable(id).resize();
    }
  };

(3)在使用的时候,只需要调用table.resetHeight(yourTableId,newHeight)即可。

有两种使用方法:

1、table.resetHeight(yourTableId,300)

2、table.resetHeight(yourTableId,"+20")或table.resetHeight(yourTableId,"-20")

第一种方法是指定一个具体高度。

第二种方法则是在原高度的基础上的变化值,如增加20像素,或者减去20像素。我只添加了“加减”两种情况,如果需要其他计算方式,也可以自行拓展方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1967712.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ChatGPT在办公与科研中有怎样的应用?又是如何做论文撰写、数据分析、机器学习、深度学习及AI绘图

2022年11月30日,可能将成为一个改变人类历史的日子——美国人工智能开发机构OpenAI推出了聊天机器人ChatGPT-3.5,将人工智能的发展推向了一个新的高度。2023年11月7日,OpenAI首届开发者大会被称为“科技界的春晚”,吸引了全球广大…

8.1 字符串中等 43 Multiply Strings 38 Count and Say

43 Multiply Strings【默写】 那个难点我就没想先解决,原本想法是先想其他思路,但也没想出。本来只想chat一下使用longlong数据类型直接stoi()得不得行,然后就看到了答案,直接一个默写的大动作。但这道题确实考察的是还原乘法&…

C++(入门2)

承接上C(入门1):CSDN 引用:(类似指针但不同于指针,后续会将两则不同) 概念 引⽤不是新定义⼀个变量,⽽是给已存在变量取了⼀个别名,编译器不会为引⽤变量开辟内存空间…

c语言第六天笔记

分支结构 分支结构:又被称之为选择结构 概念 选择结构:根据条件成立与否,选择相应的操作。 条件构建 关系表达式:含有关系运算符的表达式(>,,) 逻辑表达式:含有逻辑运算符的表达式&…

网络安全相关工作必须要有证书吗?

在当今数字化时代,网络安全已成为至关重要的领域。然而,对于从事网络安全相关工作的人员来说,证书是否是必不可少的呢? 一、网络安全证书的重要性 网络安全证书在一定程度上能够证明从业者具备相关的知识和技能。例如,CISP 作为国…

基于LLM开发AI应用竟如此简单

一、什么是LLM 随着人工智能技术的不断发展,越来越多的企业和机构开始将其应用于各个领域。其中,基于语言模型的人工智能技术(LLM)在自然语言处理、文本生成等方面表现出色,被广泛应用于各种场景中。 LLM是一种基于大…

你们要的“轮子”来了!67 个仓颉语言三方库正式公开!

01 Cangjie-TPC社区简介 Cangjie-TPC(Third Party Components)用于汇集基于仓颉编程语言开发的开源三方库,帮助开发者方便、快捷、高质量构建仓颉程序。 Cangjie-TPC社区联合软通动力、宝兰德、普元、上汽以及社区开发者共同完成第一批常用…

快速设置 terminator 透明背景

看图,按步骤设置后⭐重启一个终端则为透明效果 效果展示:

vscode+platformio开发小技巧

使用vscodeplatformio开发,具体安装配置文章很多,这里分享一些方便使用的小技巧,让使用体验在不增加学习成本的情况下更加丝滑。 1、配置依赖库 在使用vscode开发前,arduino环境遗留了一些库文件,这些第三方库可以通…

(20240801)矿山固废基胶凝材料及混凝土中文期刊整理

一、篇名:固废 级别:EI + 篇名:固废混凝土/水泥/胶砂/胶凝材料 级别:EI

Flat Ads资讯:Meta、Google、TikTok 7月产品政策速递

Flat Ads拥有全球媒介采买(MediaBuy)业务,为方便广告主及时了解大媒体最新政策,Flat Ads将整理大媒体产品更新月报,欢迎大家关注我们及时了解最新行业动向。 一、Meta 1、Reels 应用推广现可突出显示应用评分、点评和下载量 为了不断优化 Instagram 上的广告体验和广告表现,…

攻防世界之《这个按钮做什么》题解

下载解压后,发现只有一个文件。 放入exeinfope软件里看看 根据activity猜测可能是安卓软件,修改文件后缀为.apk 然后用模拟器打开这个软件并会自动安装。 打开软件界面如下: 看得出来只有一个密码输入框,应该找到对应的密码就会…

【游戏引擎之路】登神长阶(八)——Python之旅行,休息一下,去看看新世界

5月20日-6月4日:攻克2D物理引擎。 6月4日-6月13日:攻克《3D数学基础》。 6月13日-6月20日:攻克《3D图形教程》。 6月21日-6月22日:攻克《Raycasting游戏教程》。 6月23日-7月1日:攻克《Windows游戏编程大师技巧》。 7月…

数据结构(其二)--线性表(其二)

目录 5.栈 5.1 栈的基本操作 5.2 各种栈 (1).顺序栈 i.普通顺序栈 ii.共享栈 iii.关于销毁 (2).链栈 6.队列 6.1 队列的基本操作 6.2 各种队列 (1).循环队列 i.代码 ii.另外一种写法 (…

滴滴官宣潘展乐为滴滴网约车“快”乐大使

近日,滴滴宣布邀请游泳运动员潘展乐成为滴滴出行网约车“快”乐大使,同时开展打车确定性体验攻坚计划,上线3分钟无车赔活动,为司机发放高温补贴、流水加速卡等多重奖励,共同为用户提供更快、更便捷的出行体验。 作为男…

机器学习-29-多变量异常检测在区域供热系统中的应用(实战)

参考多变量异常检测:工业数据分析中的异常检测技术 1 多变量异常检测 在工业数据分析需求中,异常检测是数据分析和监控(如系统操作错误、异常情况、潜在和实际故障等)的关键技术。与传统的单变量异常检测(逐一检查每个变量/指标)不同,多变量异常检测考虑了多个变量之间…

小程序准备上线,软件开发公司需要提供哪些资料给甲方?

🏆本文收录于《CSDN问答解惑-专业版》专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收…

基于N32L406的EasyLogger日志库移植教程

首先感谢作者 https://github.com/armink/EasyLogger EasyLogger 简介 EasyLogger是一款超轻量级(ROM<1.6K, RAM<0.3K)、高性能的 C/C 日志库&#xff0c;非常适合对资源敏感的软件项目&#xff0c;例如&#xff1a; IoT 产品、可穿戴设备、智能家居等等。相比 log4c…

掌握录屏软件的快捷录制技巧!2024最新推荐这四款屏幕录制软件~

你是否曾希望捕捉电脑屏幕上的精彩瞬间&#xff1f;无论是游戏剪辑、教学视频还是会议记录&#xff0c;屏幕录制已成为我们数字生活中不可或缺的一部分。 面对屏幕录制的挑战&#xff0c;选择一款合适的录屏软件至关重要。市场上的录屏软件种类繁多&#xff0c;从专业级到用户…

应用地址信息获取新技巧:Xinstall来助力

在移动互联网时代&#xff0c;应用获取用户地址信息的需求越来越普遍。无论是为了提供个性化服务&#xff0c;还是进行精准营销&#xff0c;地址信息都扮演着至关重要的角色。然而&#xff0c;如何合规、准确地获取这一信息&#xff0c;却是许多开发者面临的挑战。今天&#xf…