layui框架学习(35:数据表格_列参数设置)

news2024/9/20 18:11:16

  Layui中的table数据表格模块支持对表格及列进行基础参数设置以提高数据的可视化及可操作性,本文学习并记录与列相关的主要基础参数的用法及效果。
  基础参数field设置待显示到列中的数据的字段名,主要针对数据表格url属性中返回的数据集合或data属性设置的数据集合中单条记录中的字段名称,这里需注意的是后端服务中对应的属性名开头字母一般都大写,但是返回到前端时开头字母一般都变成了小写。
  基础参数title设置列标题名称

  基础参数width设置列宽,一般为数字或者百分比,如果不设置,则自动分配列宽。同时基础参数minWidth设置最小列宽,适用于列宽自动分配的情况。本参数的用法及效果如下所示:

	table.render({
		elem: '#demo'				
		,url: 'http://localhost:5098/ECData/DataTableList' 
		,page: true 
		,cols: [[ 
		  {field: 'id', title: 'ID',width:80}
		  ,{field: 'createTime', title: '创建时间',width:80}
		  ,{field: 'humidity', title: '湿度',width:'10%'}
		  ,{field: 'temperature', title: '温度',width:'10%'} 
		  ,{field: 'flameValue', title: '火焰检测值'}
		  ,{field: 'mqValue', title: '烟雾检测值'}
		]]
	  });			  

在这里插入图片描述
  基础参数type设置列的类型,主要分为normal(常规列)、checkbox(复选框列)、radio(单选框列)、numbers(序号列)、space(空列)等,默认为normal(常规列)。本参数的用法及效果如下所示:

	table.render({
		elem: '#demo'				
		,url: 'http://localhost:5098/ECData/DataTableList' 
		,page: true 
		,cols: [[ 
		  {type:'radio'}
		  ,{type:'checkbox'}
		  ,{type:'numbers'}
		  ,{type:'space'}
		  ,{field: 'id', title: 'ID',width:80}
		  ,{field: 'createTime', title: '创建时间',width:80}
		  ,{field: 'humidity', title: '湿度',width:'10%'}
		  ,{field: 'temperature', title: '温度',width:'10%'} 
		  ,{field: 'flameValue', title: '火焰检测值'}
		  ,{field: 'mqValue', title: '烟雾检测值'}
		]]
	  });			  

在这里插入图片描述

  基础参数LAY_CHECKED设置复选框列的全选状态,默认为false,为true时的效果如下所示:
在这里插入图片描述

  基础参数fixed设置固定列,可取值包括left(固定在左)、right(固定在右),如果是固定在左,该列必须放在表头最前面,反之则必须放在表头最后面。本参数的用法及效果如下所示:

	table.render({
		elem: '#demo'				
		,url: 'http://localhost:5098/ECData/DataTableList' 
		,page: true
		,width:500
		,cols: [[ 
		  {type:'radio'}
		  ,{type:'checkbox',LAY_CHECKED:true}
		  ,{type:'numbers'}
		  ,{type:'space'}
		  ,{field: 'id', title: 'ID',width:80}
		  ,{field: 'createTime', title: '创建时间',width:80}
		  ,{field: 'humidity', title: '湿度',width:'10%'}
		  ,{field: 'temperature', title: '温度',width:'10%'} 
		  ,{field: 'flameValue', title: '火焰检测值'}
		  ,{field: 'mqValue', title: '烟雾检测值',fixed:'right'}
		]]
	  });			  

在这里插入图片描述

  基础参数hide设置列为隐藏列,本参数的用法及效果如下所示:

	table.render({
		elem: '#demo'				
		,url: 'http://localhost:5098/ECData/DataTableList'
		,page: true
		,width:800
		,cols: [[ 
		  {type:'radio'}
		  ,{type:'checkbox',LAY_CHECKED:true}
		  ,{type:'numbers'}
		  ,{type:'space'}
		  ,{field: 'id', title: 'ID',width:80}
		  ,{field: 'createTime', title: '创建时间',width:80}
		  ,{field: 'humidity', title: '湿度',width:'10%',hide:true}
		  ,{field: 'temperature', title: '温度',width:'10%',hide:true} 
		  ,{field: 'flameValue', title: '火焰检测值'}
		  ,{field: 'mqValue', title: '烟雾检测值'}
		]]
	  });			

在这里插入图片描述

  基础参数sort设置列是否支持排序,默认为false,测试时发现排序仅针对当前页面数据,并不会全局排序。本参数的效果如下所示:
在这里插入图片描述

  基础参数unresize设置是否禁止调整列宽,默认根据列类型(type)来决定是否禁用,如复选框列,会自动禁用,而其它普通列,默认允许拖拽列宽。
  基础参数edit设置列包含的单元格的编辑方式,包括text(单行输入框)、textarea(多行输入框)两种方式。本参数的效果如下所示:
在这里插入图片描述

  基础参数align设置列内容的对齐方式,包括left、center、right,默认值为left。
  基础参数colspan和rowspan设置单元格所占列数和行数,一般用于多级表头。

  以上为数据表格模块中列相关的主要基础参数,还有其它几个参数未涉及(还未搞清楚用法),后续还会继续学习数据表格模块的用法。

参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/

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

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

相关文章

如何使用fiddler进行抓包

首先需要下载fiddler,推荐使用bing搜索引擎搜索(百度搜狗一般搜这种工具展示的前几个全都是广告),直接搜索fiddler,搜出来第一个fiddler官网 然后直接点击download下载 进入下载页面后,正确填写一个邮箱&a…

【LeetCode|编译原理】剑指 Offer 20. 表示数值的字符串

文章目录 题目链接标签步骤实现代码&#xff08;C&#xff09; 题目链接 剑指 Offer 20. 表示数值的字符串 标签 有限状态自动机(FA) 步骤 Step1. 去除字符串左、右空格&#xff1b; string strip(string str) {int start -1;for (int i 0; i < str.length(); i) {i…

一个CSS渐变下划线效果的实用技巧

下划线它只用到了CSS的渐变背景、背景大小调整、位置设置、鼠标hover 过渡等基本属性和技巧。 分析与实现 我们先看一下基本的结构。 <h2 class"title"><span>你好啊&#xff0c;嘴巴嘟嘟</span></h2>然后我们给span 元素添加一个线性渐变…

如何在Windows11中备份指定文件夹?

在现代的信息化时代&#xff0c;无论工作场所还是日常生活&#xff0c;文件的使用频率已经越来越高。对于那些经常操作特定文件夹的用户&#xff0c;他们可能会经常进行文件的修改、新增以及删除操作。为了防止文件丢失导致的困扰&#xff0c;定期备份指定文件夹显得尤为关键。…

java医院电子病历系统源码:云端SaaS服务 前后端分离模式开发和部署

电子病历系统是什么&#xff1f; 电子病历是指医务人员在医疗活动过程中,使用医疗机构信息系统生成的文字、符号、图表、图形、数据、影像等数字化信息,并能实现存储、管理、传输和重现的医疗记录,是病历的一种记录形式。 医院通过电子病历以电子化方式记录患者就诊的信息&…

晋级榜单揭晓!华秋第九届硬创大赛-华南分赛区路演成功举办

7月21日&#xff0c;第十五届深创赛福田预选赛区暨华秋第九届硬创大赛华南分赛区决赛路演活动在深圳华强科创广场成功举办。活动由深圳华秋电子有限公司&#xff08;以下简称 华秋 &#xff09;、深圳市福田区新一代信息技术产业链党委、深圳新一代产业园、微纳研究院、华强科创…

关于运发的知识点123(个人笔记 持续更新)

前言&#xff1a;作为一个物联网的小辣鸡&#xff0c;硬件设计水平不能说没有&#xff0c;只能说一点点。 正好要做新项目&#xff0c;自己学着去处理信号&#xff0c;滤波&#xff0c;在这里做一点笔记。 参考书一&#xff1a;杨建国老师《新概念模拟电路》.pdf 参考书二&…

如何卸载华为手机内置app

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> 最近自用的华为手机的存储空间快满了&#xff0c;想把手机内置的app清理一下。然后到网上搜索解决方案&#xff0c;大致弄明白了步骤。主要是通过华为手机…

23款奔驰GLE450豪华型升级AMG直瀑式中网,战斗感立马提升了一个档次

奔驰GLE450豪华型升级AMG竖杠中网前进气格栅&#xff0c;AMG中网竖杠格栅&#xff0c;镀铬饰条呈圆弧状&#xff0c;色泽均衡&#xff0c;质感顺滑&#xff0c;极富冲击力。AMG专属字标&#xff0c;与中网卡扣装配紧密&#xff0c;凸显AMG的身份象征&#xff0c;点睛之笔又不显…

HC32F448-小华MCU

由于要开发和学习使用低成本MCU&#xff0c;这里记录下小华半导体HC32F448的手册参数 芯片官网&#xff08;HC32F448MCTI-LQFP80&#xff09; 小华半导体有限公司 (xhsc.com.cn) HC32F448 系列MCU是32位的ARM Cortex-M4微控制器。最高工作频率 200MHz&#xff0c;最大 256KB 的…

中小学分班查询系统0成本制作方法公布了,人人可用

传统的学生分班查询平台通常需要进行专业的技术开发&#xff0c;以实现学生查询和查看分班信息的功能。这个过程涉及到软件开发、数据库设计、系统集成等多个环节&#xff0c;需要有一支专业的技术团队来完成。 然而&#xff0c;这样的技术开发和维护过程需要耗费大量的经济成…

微信小程序+web数据库的开发实践

前言 生活中使用微信小程序的场景越来越多&#xff0c;它实现了用户对于应用“触手可及、用完即走”的理想需求。微信小程序的开发难度也低于APP的开发制作&#xff0c;使用它会更便利、低成本、高经济效益。 但是要完成一个小程序涉及到的技术栈比较多&#xff0c;要开发的模…

RTT(RT-Thread)线程管理(1.2W字详细讲解)

目录 RTT线程管理 线程管理特点 线程工作机制 线程控制块 线程属性 线程状态之间切换 线程相关操作 创建和删除线程 创建线程 删除线程 动态创建线程实例 启动线程 初始化和脱离线程 初始化线程 脱离线程 静态创建线程实例 线程辅助函数 获得当前线程 让出处…

redisson分布式锁学习

什么是分布式锁? 当有多个线程并发访问同一共享数据时,如果多个线程同时都去修改这个共享数据,且修改操作不是原子操作,就很有可能出现线程安全问题&#xff0c;而产生线程安全问题的根本原因是缺乏对共享数据访问的同步和互斥。 为了解决这个问题&#xff0c;通常我们的做法…

pgsql 查看某个表建立了那些索引sql

执行以下sql&#xff1a; SELECTns.nspname as schema_name,tab.relname as table_name,cls.relname as index_name,am.amname as index_type,idx.indisprimary as is_primary,idx.indisunique as is_unique FROMpg_index idx INNER JOIN pg_class cls ON cls.oididx.indexrel…

系统集成|第八章(笔记)

目录 第八章 进度管理8.1 主要过程8.1.1 规划进度管理8.1.2 定义活动8.1.3 排列活动顺序8.1.4 估算活动资源8.1.5 估算活动持续时间8.1.6 制定进度计划8.1.7 控制进度 8.2 注意与问题 上篇&#xff1a;第七章、范围管理 第八章 进度管理 8.1 主要过程 包括&#xff1a; 规划进…

0day用友-NC-Cloud远程代码执行漏洞(全版本通杀)

漏洞描述 用友NC Cloud大型企业数字化平台,深度应用新一代数字智能技术,完全基于云原生架构,打造开放、互联、融合、智能的一体化云平台,聚焦数智化管理、数智化经营、数智化商业等三大企业数智化转型战略方向,提供涵盖数字营销、财务共享、全球司库、智能制造、敏捷供应…

强化学习QLearning 进行迷宫游戏和代码

强化学习是机器学习里面的一个分支。它强调基于环境而探索行动、学习&#xff0c;以取得最大化的预期收益。其灵感来源于心理学中的行为主义理论&#xff0c;既有机体如何在环境给予的奖励或者惩罚的刺激下&#xff0c;逐步形成对刺激的预期&#xff0c;产生能够最大利益的习惯…

计算机视觉实验:图像增强应用实践

本次实验主要从基于统计、函数映射的图像增强方法和基于滤波的图像增强方法两种方法中对一些图像增强的算法进行实现。主要的编程语言为python&#xff0c;调用了python自带的PIL图像库用于读取图像&#xff0c;利用numpy进行图像运算&#xff0c;最后使用opencv第三方库进行对…

奇富科技联合哈银消金获《亚洲银行家》中国最佳信贷项目奖

7月28日&#xff0c;全球金融领域最具含金量的奖项之一《亚洲银行家》颁布2023年度奖项&#xff0c;奇富科技荣获“中国最佳信贷项目”殊荣。值得关注的是&#xff0c;该奖项由奇富科技与哈银消金联合获得&#xff0c;双方联合获奖&#xff0c;是主办方对奇富科技全面赋能金融机…