layui框架学习(34:数据表格_基本用法)

  Layui中的数据表格模块table支持动态显示并操作表格数据,之前学习的页面元素中的表格主要是通过使用样式及属性对表格样式进行设置,而table模块支持动态显示、分页显示、排序显示、搜索等形式各样的动态操作,参考文献3中也给出了数据表格的各类应用示例,由于内容较多,计划分几篇文章学习并记录主要的使用方式。本文先记录数据表格的基本用法。
  数据表格动态加载数据需调用后台服务,本文中采用SqlSugar获取质量检测数据,并以webapi方式供前端调用,同时为支持分页加载数据,支持输入页码(page)和每页数据量(limit)参数获取指定页面的数据,table模块调用服务获取数据时会动态在url后面添加上述两个参数。
  table数据表格模块会后端返回的数据格式也有要求,默认格式如下所示(code为0时显示data数据,为其它值时显示msg信息),如果返回数据格式有差异,table模块提供parseData参数配置返回的数据格式与数据表格要求的格式之间的转换方式。

	{"code": 0,"msg": "","count": 1000,"data": [{}, {}]}

  table数据表格模块的基本使用示例及效果如下所示:

	<table id="demo" lay-filter="test"></table><script>layui.use('table', function(){var table = layui.table;table.render({elem: '#demo'				,url: 'http://localhost:5098/ECData/DataTableList' ,page: true ,cols: [[ {field: 'id', title: 'ID',},{field: 'createTime', title: '创建时间'},{field: 'humidity', title: '湿度'},{field: 'temperature', title: '温度'} ,{field: 'flameValue', title: '火焰检测值'},{field: 'mqValue', title: '烟雾检测值'}]]});			  });</script>

在这里插入图片描述
  基础参数url设置数据获取地址,table模块调用服务获取数据时会动态在url后面添加page和limit参数
  基础参数page设置是否启用分页功能,可以在其中设置laypage分页组件的所有基础参数。
  基础参数data设置数据表格的数据源,直接赋值数据,既可以展示一页数据,也能对一段已知数据进行多页展示,参考文献3中有类似示例。
  基础参数cols设置数据表格的列定义及每列的样式和操作设置,例如列宽、列名、是否支持排序等,后续文章中会详细学习及记录列相关的属性设置方式。
  table数据表格模块支持通过代码动态设置列属性,也支持通过html页面设置列信息,同时也支持转换静态表格(无需配置数据接口,在JS中指定表格元素,并简单地给表头加上自定义属性即可)。本文上面示例中展示的是动态设置列属性,通过html页面设置方式的示例如下所示(代码来自参考文献2)。
在这里插入图片描述

参考文献:
[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.mzph.cn/news/15370.shtml

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

相关文章

WPF实战学习笔记31-登录界面全局通知

UI添加消息聚合器 <md:Snackbarx:Name"LoginSnakeBar"Grid.ColumnSpan"2"Panel.ZIndex"1"MessageQueue"{md:MessageQueue}" />注册提示消息 文件&#xff1a;Mytodo.Views.LoginView.cs构造函数添加内容 //注册提示消息 aggre…

JavaScript---事件对象event

获取事件对象&#xff1a; 事件对象&#xff1a;是个对象&#xff0c;这个对象里有事件触发时的相关信息&#xff0c;在事件绑定的回调函数的第一个参数就是事件对象&#xff0c;一般命名为event、ev、e eg: 元素.addEventListener(click,function (e){}) 部分常用属性&…

IDEA好用的插件总结

IdeaVim 这个看个人喜好&#xff0c;我比较喜欢用vim&#xff0c;并且支持自定义修改按键绑定alibaba java code guidelines alibaba的java编程规范plantUML 绘制UML&#xff0c;支持语言显示plantUML integration 能够直接将代码转化为UML图&#xff0c;非常方便rainbow brack…

Git初始化

查看git版本 git --version 设置Git的配置变量 方法&#xff1a; 修改全局文件&#xff08;用户主目录下.gitconfig&#xff09;修改系统文件&#xff08;如/etc/gitconfig&#xff09; 用户姓名和邮件地址 修改用户名和邮件地址 git config --global user.name "用…

LLM系列 | 18 : 如何用LangChain进行网页问答

简介 一夕轻雷落万丝&#xff0c;霁光浮瓦碧参差。 紧接之前LangChain专题文章&#xff1a; 15:如何用LangChain做长文档问答&#xff1f;16:如何基于LangChain打造联网版ChatGPT&#xff1f;17:ChatGPT应用框架LangChain速成大法 今天这篇小作文是LangChain实践专题的第4…

细讲TCP三次握手四次挥手(四)

常见面试题 为什么TCP连接的时候是3次&#xff1f;2次不可以吗&#xff1f; 因为需要考虑连接时丢包的问题&#xff0c;如果只握手2次&#xff0c;第二次握手时如果服务端发给客户端的确认报文段丢失&#xff0c;此时服务端已经准备好了收发数(可以理解服务端已经连接成功)据…

Excel Power View教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 Excel Power View 是一种数据可视化技术&#xff0c;用于创建交互式图表、图形、地图和其他视觉效果&#xff0c;以便直观呈现数据。 Excel Power View中&#xff0c;可以快速创建各种可视化效果&#xff0c;从表格和矩阵到饼图、条形图和气泡图&#xff0c;以及多个…

Qt: 查看qmake相关参数设置

Qt开发中&#xff0c;经常会遇到qmake相关问题&#xff0c;比如同时安装了多个Qt版本的情况。比如我的情况是系统自带了Qt 5.12.8, 但是开发中遇到一些兼容性问题&#xff0c;于是又手动安装了5.9.8。 查看qmake版本&#xff0c;qmake -v, 虽然项目中已经指定了5.9.8, 但是系统…

爬虫小白-如何调试列表页链接与详情链接不一样并三种方式js逆向解决AES-ECB

目录 一、网站分析二、定位监听三、熟悉AES-ECB四、调试分析五、node运行js六、Python执行js 一、网站分析 三年前的案例&#xff0c;我的原始文章网站 &#xff0c;如图我们直接点击标题进入到详情页&#xff0c;链接会发生跳转&#xff0c;且与我们在详情看到的链接&#xf…

React 中的常见 API 和生命周期函数

目录 useStateuseEffectuseRefdangerouslySetInnerHTML生命周期函数 constructorcomponentDidMountstatic getDerivedStateFromPropsshouldComponentUpdatecomponentDidUpdatecomponentWillUnmount useState useState 是 React 的一个 Hook&#xff0c;用于在函数组件中添加…

iOS开发-格式化时间显示刚刚几分钟前几小时前等

iOS开发-格式化时间显示刚刚几分钟前几小时前等 在开发中经常遇到从服务端获取的时间戳&#xff0c;需要转换显示刚刚、几分钟前、几小时前、几天前、年月日等格式。 主要用到了NSCalendar、NSDateComponents这两个类 NSString *result nil;NSCalendarUnit components (NSC…

【后端面经】微服务构架 (1-6) | 隔离:如何确保心悦会员体验无忧?唱响隔离的鸣奏曲!

文章目录 一、前置知识1、什么是隔离?2、为什么要隔离?3、怎么进行隔离?A) 机房隔离B) 实例隔离C) 分组隔离D) 连接池隔离 与 线程池隔离E) 信号量隔离F) 第三方依赖隔离二、面试环节1、面试准备2、基本思路3、亮点方案A) 慢任务隔离B) 制作库与线上库分离三、章节总结 …

@ConditionalOnBean、@ConditionalOnMissingBean、@ConditionalOnClass

一、ConditionalOnBean ConditionalOnBean 是 Spring Boot 中的一个条件注解&#xff0c;用于在 Spring 容器中存在指定类型的 Bean 时才会生效。 具体解释如下&#xff1a; 当使用 ConditionalOnBean 注解在某个配置类或 Bean 的声明上时&#xff0c;Spring Boot 会检查 Sp…

以智慧监测模式守护燃气安全 ,汉威科技“传感芯”凸显智慧力

城市燃气工程作为城市基建的重要组成部分&#xff0c;与城市居民生活、工业生产紧密相关。提升城市燃气服务质量和安全水平&#xff0c;也一直是政府和民众关注的大事。然而&#xff0c;近年来居民住宅、餐饮等工商业场所燃气事故频发&#xff0c;时刻敲响的警钟也折射出我国在…

MySQL高级篇第4章(逻辑架构)

文章目录 1、逻辑架构剖析1.1 服务器处理客户端请求1.2 Connectors1.3 第一层&#xff1a;连接层1.4 第二层&#xff1a;服务层1.5 第三层&#xff1a;引擎层1.6 存储层1.7 小结 2、SQL执行流程2.1 MySQL 中的 SQL执行流程2.2 MySQL8中SQL执行原理2.3 MySQL5.7中SQL执行原理2.4…

9条建议告诉你如何正确处理PCB设计布线

一、关于PCB布线线宽 1、布线首先应满足工厂加工能力&#xff0c;首先向客户确认生产厂家&#xff0c;确认其生产能力&#xff0c;如图1所示。如客户无要求&#xff0c;线宽参考阻抗设计模板。 图1 PCB板厂线宽要求 2、阻抗模板&#xff0c;根据客户提供的板厚及层数要求&…

LeetCode208.Implement-Trie-Prefix-Tree<实现 Trie (前缀树)>

题目&#xff1a; 思路&#xff1a; tire树&#xff0c;学过&#xff0c;模板题。一种数据结构与算法的结合吧。 代码是&#xff1a; //codeclass Trie { private:bool isEnd;Trie* next[26]; public:Trie() {isEnd false;memset(next, 0, sizeof(next));}void insert(strin…

【环境配置】使用Docker搭建LAMP环境

这篇文章不是介绍DOCKER是什么&#xff0c;也不是阐述DOCKER的核心&#xff1a;镜像/容器和仓库之间的关系,它只是一篇让刚刚接触DOCKER的初学者&#xff0c;在没有完全了解DOCKER是什么之前,也能尽快的在Linux系统下面通过DOCKER来搭建一个LAMP环境&#xff0c;这是其一&#…

工作中遇到的关于配置问题

工作中遇到的问题 想记录一下 一个程序员小白每天遇到的问题 1.创建了一个Maven的web工程&#xff0c;但是启动一直是404&#xff0c;原服务器未能找到目标资源 解决办法&#xff1a; 选择deployment&#xff0c;点击加号选择war格式就OK啦 目录里面无法创建类&#xff0…

WPF实战学习笔记26-首页导航

修改UI&#xff0c;添加单击行为&#xff0c;并绑定导航命令 修改文件&#xff1a;Mytodo.Views.IndexView.xaml ,在导航梯形添加内容 <DataTemplate><BorderMargin"10"Background"{Binding Color}"CornerRadius"5"Opacity"0.9&…