LayUI表格渲染实现前后端交互

news2024/11/26 4:56:51

方法渲染

初始化 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。

首先满足：

  1. 带有 class="layui-table"的 标签；
  2. 对标签设置属性lay-data="" 用于配置一些基础参数；
  3. 在 <th> 标签中设置属性lay-data=""用于配置表头信息。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.3/layui.js"></script>
		<link src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.3/css/layui.min.css"></link>
	</head>
	<body>
		<table class="layui-table" id="demo" lay-filter="test">   <!-- lay-data="{height:315, url:'/demo/table/user/', page:true, -->
		<script>
		layui.use(['layer', 'form','table'], function(){
		  var layer = layui.layer,
		  form = layui.form,
		  table = layui.table;
		  
		  layer.msg('Hello World');
		  			
		    //第一个实例
			table.render({
			  elem: '#demo'
			  ,height: 312
	//			  ,url: '../../demo/table/user' //数据接口
	//			  ,page: true //开启分页
			  ,cols: [[ //表头
				{field: 'id', title: 'ID', width:80, sort: true}
				,{field: 'username', title: '用户名', width:80}
				,{field: 'sex', title: '性别', width:80, sort: true}
				,{field: 'city', title: '城市', width:80} 
				,{field: 'sign', title: '签名', width: 177}
				,{field: 'experience', title: '积分', width: 80, sort: true}
				,{field: 'score', title: '评分', width: 80, sort: true}
				,{field: 'classify', title: '职业', width: 80}
				,{field: 'wealth', title: '财富', width: 135, sort: true}
			  ]],
			  //data : obj.data
			});
		
		
		});
		</script> 
	</body>
</html>

初始化一个表格：

在这里插入图片描述

同步数据

  • 定义数据
let obj = {"code":0,"msg":"","count":1000,"data":[{"id":10000,"username":"user-0","sex":"man","city":"beiji","sign":"0","experience":90,"logins":24,"wealth":82830700,"classify":"111","score":57},
{"id":10001,"username":"user1","sex":"woman","city":"diqu","sign":"222","experience":884,"logins":58,"wealth":64928690,"classify":"xsissd","score":27},
{"id":10002,"username":"user-2","sex":"man","city":"shhdd","sign":"sdsds","experience":650,"logins":77,"wealth":6298078,"classify":"s1111","score":31},
{"id":10003,"username":"user3","sex":"ffffdsd","city":"lddsk","sign":"sdnskj","experience":362,"logins":157,"wealth":37117017,"classify":"dsdsd","score":68},
{"id":10004,"username":"user-4","sex":"man","city":"fdff","sign":"fdfdf","experience":807,"logins":51,"wealth":76263262,"classify":"fdfd","score":6},
{"id":10005,"username":"user-5","sex":"fdfdf","city":"fdfdf","sign":"fdfdf","experience":173,"logins":68,"wealth":60344147,"classify":"fdfdfd","score":87},
{"id":10006,"username":"user-6","sex":"fdfdf","city":"fdfdf","sign":"fdaaa","experience":982,"logins":37,"wealth":57768166,"classify":"2121sds","score":34}]}

  • 初始化数据定义在初始化表格之前（js单线程）：

  • 配置cols的field为返回数据响应的字段。

  • 初始化时添加data属性，对应[{},{},{}....]

//第一个实例
table.render({
  elem: '#demo'
  ,height: 312
  ,cols: [[ //表头
	{field: 'id', title: 'ID', width:80, sort: true}
	,{field: 'username', title: '用户名', width:80}
	,{field: 'sex', title: '性别', width:80, sort: true}
	,{field: 'city', title: '城市', width:80} 
	,{field: 'sign', title: '签名', width: 177}
	,{field: 'experience', title: '积分', width: 80, sort: true}
	,{field: 'score', title: '评分', width: 80, sort: true}
	,{field: 'classify', title: '职业', width: 80}
	,{field: 'wealth', title: '财富', width: 135, sort: true}
  ]],
  data : obj.data
});

在这里插入图片描述
data对应list列表即可。

异步数据

  • 控制器返回数据

返回如果返回数据是下面所示，更改url后可以直接渲染。

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

//修改url为控制器地址
,url: 'http://localhost:8080/test/datalist' //数据接口

示例：

后台返回不规范数据：

在这里插入图片描述
修改url地址：

<script>
layui.use(['layer', 'form','table'], function(){
var layer = layui.layer,
  form = layui.form,
  table = layui.table;
  layer.msg('Hello World');
   //第一个实例
	table.render({
	  elem: '#demo'
	  ,height: 312
	  ,url: 'http://localhost:8080/test/datalist' //数据接口
	  ,cols: [[ //表头
		{field: 'id', title: 'ID', width:80, sort: true}
		,{field: 'username', title: '用户名', width:80}
		,{field: 'sex', title: '性别', width:80, sort: true}
		,{field: 'city', title: '城市', width:80} 
		,{field: 'sign', title: '签名', width: 177}
		,{field: 'experience', title: '积分', width: 80, sort: true}
		,{field: 'score', title: '评分', width: 80, sort: true}
		,{field: 'classify', title: '职业', width: 80}
		,{field: 'wealth', title: '财富', width: 135, sort: true}
	  ]]
	})
});
</script>

在这里插入图片描述

code只能为0，返回的数据也不规范无法自动渲染所以报错。

除了上面的不规范数据外还有如下这种，返回数据结果一致，但是字段不对应的情况，如下：

在这里插入图片描述

 {
    "code1": 0,
    "msg1": "hello",
    "count1": 10,
    "rankObjList": [
        {
            "id": 1,
            "username": "user",
            "sex": "男",
            "city": "Beijing",
            "sign": "签名",
            "experience": 90,
            "score": 90,
            "classify": "职业",
            "wealth": "财富"
        }
    ]
}

这样的数据就需要通过parseData: function(res){}函数转化转化一下。

,parseData: function(res){ //res 即为原始返回的数据
  return {
   "code": res.code1, //解析接口状态
   "msg": res.msg1, //解析提示文本
   "count": res.count1, //解析数据长度
    "data":  res.rankObjList//解析数据列表
  }
}

转化为标准的规范的数据格式。

<script>
layui.use(['layer', 'form','table'], function(){
	var layer = layui.layer,
	  form = layui.form,
	  table = layui.table;
	  layer.msg('Hello World');
	  
	
    //第一个实例
	table.render({
	  elem: '#demo'
	  ,height: 312
	  ,url: 'http://localhost:8080/test/datalist' //数据接口
//			  ,page: true //开启分页
	  ,cols: [[ //表头
		{field: 'id', title: 'ID', width:80, sort: true}
		,{field: 'username', title: '用户名', width:80}
		,{field: 'sex', title: '性别', width:80, sort: true}
		,{field: 'city', title: '城市', width:80} 
		,{field: 'sign', title: '签名', width: 177}
		,{field: 'experience', title: '积分', width: 80, sort: true}
		,{field: 'score', title: '评分', width: 80, sort: true}
		,{field: 'classify', title: '职业', width: 80}
		,{field: 'wealth', title: '财富', width: 135, sort: true}
	  ]]
	  
	     ,parseData: function(res){ //res 即为原始返回的数据
	       return {
	        "code": res.code, //解析接口状态
	        "msg": res.msg, //解析提示文本
	        "count": res.count, //解析数据长度
	         "data":  res.rankObjList//解析数据列表
	       }
		 }

	})


});
</script>

成功渲染：
在这里插入图片描述

自动渲染

自动渲染发生在html中如需过多的js，直接在html中配合相应的参数，地址即可：

<table class="layui-table" lay-data="{height:315, url:'http://localhost:8080/test/datalist', page:true, id:'demo'}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
      <th lay-data="{field:'username', width:80}">用户名</th>
      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'sign'}">签名</th>
      <th lay-data="{field:'experience', sort: true}">积分</th>
      <th lay-data="{field:'score', sort: true}">评分</th>
      <th lay-data="{field:'classify'}">职业</th>
      <th lay-data="{field:'wealth', sort: true}">财富</th>
    </tr>
  </thead>
</table>

 <script>
	layui.use(['layer', 'form','table'], function(){
		var layer = layui.layer,
		  form = layui.form,
		  table = layui.table;
		  layer.msg('Hello World');
		  		
	    //第一个实例
		table.render({
		  elem: '#demo'
		})	
	});
</script>

需要注意的html中渲染数据必须是标准数据类型。

返回标准数据类型：
在这里插入图片描述
成功渲染：
在这里插入图片描述

😀

先不管美观哈 ！

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

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

相关文章

索引-性能分析-explain

索引-性能分析-explain

explain 执行计划 explain 执行计划各字段含义 1&#xff09;id 就是代表 sql 的执行顺序或者表的执行顺序&#xff1b;id相同从上往下执行&#xff0c;id不同&#xff0c;id值越大越先执行&#xff1b;&#xff08;注&#xff1a;有子查询时就会出现sql执行顺序&#xff09;…
阅读更多...
【物联网】mqtt初体验

【物联网】mqtt初体验

文章目录安装EMQXjava集成添加依赖mqtt配置参数发布组件订阅组件测试接口接口测试最近在了解物联网云平台方面的知识&#xff0c;解除了mqtt协议&#xff0c;只看书籍难免有些枯燥&#xff0c;所以直接试验一下&#xff0c;便于巩固理论知识。 broker服务器操作系统&#xff1a…
阅读更多...
Illegal char ＜:＞ at index 4

Illegal char ＜:＞ at index 4

一、现象Java11环境下项目启动时报错&#xff1a;java.nio.file.InvalidPathException: Illegal char <:> at index 4但项目能正常启动、运行。二、解决办法方法1方法2项目路径\.idea\workspace.xml中的PropertiesComponent节点下新增配置&#xff1a;<property name&…
阅读更多...
NoSQL(非关系型数据库)与SQL(关系型数据库)的差别

NoSQL(非关系型数据库)与SQL(关系型数据库)的差别

目录 NoSQL(非关系型数据库)与SQL(关系型数据库)的差别 1.数据结构&#xff1a;结构化与非结构化 2.数据关联&#xff1a;关联性与非关联性 3.查询方式&#xff1a;SQL查询与非SQL查询 4.事务特性&#xff1a;ACID与BASE 分析ACID与BASE的含义&#xff1a; 5.存储方式&am…
阅读更多...
16- 梯度提升分类树GBDT (梯度下降优化) (算法)

16- 梯度提升分类树GBDT (梯度下降优化) (算法)

梯度提升算法 from sklearn.ensemble import GradientBoostingClassifier clf GradientBoostingClassifier(subsample0.8,learning_rate 0.005) clf.fit(X_train,y_train) 1、交叉熵 1.1、信息熵 构建好一颗树&#xff0c;数据变的有顺序了&#xff08;构建前&#xff0c…
阅读更多...
jvm对象创建与内存解析

jvm对象创建与内存解析

1.类加载检查虚拟机遇到一条new指令时&#xff0c;首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用&#xff0c;并且检查这个符号引用代表的类是否已被加载、解析和初始化过。如果没有&#xff0c;那必须先执行相应的类加载过程。new指令对应到语言层面上讲…
阅读更多...
【node.js】node.js的安装和配置

【node.js】node.js的安装和配置

文章目录前言下载和安装Path环境变量测试推荐插件总结前言 Node.js是一个在服务器端可以解析和执行JavaScript代码的运行环境&#xff0c;也可以说是一个运行时平台&#xff0c;仍然使用JavaScript作为开发语言&#xff0c;但是提供了一些功能性的API。 下载和安装 Node.js的官…
阅读更多...
linux篇【14】：网络https协议

linux篇【14】：网络https协议

目录 一.HTTPS介绍 1.HTTPS 定义 2.HTTP与HTTPS &#xff08;1&#xff09;端口不同&#xff0c;是两套服务 &#xff08;2&#xff09;HTTP效率更高&#xff0c;HTTPS更安全 3.加密&#xff0c;解密&#xff0c;密钥 概念 4.为什么要加密&#xff1f; 5.常见的加密方式…
阅读更多...
裸辞5个月，面试了37家公司，终于找到理想工作了

裸辞5个月，面试了37家公司，终于找到理想工作了

上半年裁员&#xff0c;下半年裸辞&#xff0c;有不少人高呼裸辞后躺平真的好快乐&#xff01;但也有很多人&#xff0c;裸辞后的生活五味杂陈。 面试37次终于找到心仪工作 因为工作压力大、领导PUA等各种原因&#xff0c;今年2月下旬我从一家互联网小厂裸辞&#xff0c;没想…
阅读更多...
linux高级命令之用户相关操作

linux高级命令之用户相关操作

用户相关操作学习目标能够知道创建用户的命令1. 创建用户命令说明useradd创建(添加)用户useradd命令选项:选项说明-m自动创建用户主目录,主目录的名字就是用户名-g指定用户所属的用户组&#xff0c;默认不指定会自动创建一个同名的用户组创建用户效果图:查看所有用户信息的文件…
阅读更多...
nginx-host绕过实例复现

nginx-host绕过实例复现

绕过Nginx Host限制第一种处理方法Nginx在处理Host的时候&#xff0c;会将Host用冒号分割成hostname和port&#xff0c;port部分被丢弃。所以&#xff0c;我们可以设置Host的值为2023.mhz.pw:xxx"example.com&#xff0c;这样就能访问到目标Server块&#xff1a;第二种处理…
阅读更多...
SpringBoot的定时任务实现--SpringTask

SpringBoot的定时任务实现--SpringTask

SpringTask是Spring自带的功能。实现起来比较简单。 使用SpringTask实现定时任务有两种方式&#xff1a; 1.注解方式 基于注解 Scheduled Scheduled(cron "*/1 * * * * ?")public void up(){System.out.println("定时任务开启&#xff1a;"System.cu…
阅读更多...
想做好项目经理，一定要知道这10句话

想做好项目经理，一定要知道这10句话

早上好&#xff0c;我是老原。有句话说过&#xff1a;“你是怎么过好一天的&#xff0c;就是怎么过好一生的。”这句话&#xff0c;我刚毕业那会没什么感觉&#xff0c;但工作越久&#xff0c;体会越深。你会发现优秀的人有些特质和习惯千篇一律&#xff0c;而普通人&#xff0…
阅读更多...
深圳80后男子朋友圈晒情人节，一天收三个不同女子巧克力红包

深圳80后男子朋友圈晒情人节，一天收三个不同女子巧克力红包

每年情人节到来的时候&#xff0c;对于广大男同胞来说&#xff0c;都是倍受煎熬的日子&#xff0c;因为不论你怎么去做&#xff0c;都不会落到好处。如果你还没有对象&#xff0c;这个情人节就尴尬了&#xff0c;眼看着别人出入成双成对&#xff0c;自己却落得个孤家寡人。 如果…
阅读更多...
微信Android架构历史——模块化架构重构实践

微信Android架构历史——模块化架构重构实践

微信Android诞生之初&#xff0c;用的是常见的分层结构设计。这种架构简单、清晰并一直沿袭至今。这是微信架构的v1.x时代。 图1-架构演进 到了微信架构的v2.x时代&#xff0c;随着业务的快速发展&#xff0c;消息通知不及时和Android 2.3版本之前webview内存泄露问题开始突显…
阅读更多...
java基于springboot+vue微信小程序的医疗监督反馈小程序

java基于springboot+vue微信小程序的医疗监督反馈小程序

医疗监督反馈行业是一个传统的行业。根据当前发展现状,网络信息时代的全面普及,医疗监督反馈行业也在发生着变化,单就下单这一方面,利用手机下单正在逐步进入人们的生活。 传统的下单方式,不仅会耗费大量的人力、时间,有时候还会出错。小程序系统伴随智能手机为我们提供了新的方…
阅读更多...
【贝叶斯方法】无论您是数据统计分析初学者，还是有一定基础

【贝叶斯方法】无论您是数据统计分析初学者，还是有一定基础

包括回归及结构方程模型概述及数据探索&#xff1b;R和Rstudio简介及入门和作图基础&#xff1b;R语言数据清洗-tidyverse包&#xff1b;贝叶斯回归与混合效应模型&#xff1b;贝叶斯空间自相关、时间自相关及系统发育相关数据分析&#xff1b;贝叶斯非线性数据分析;贝叶斯结构…
阅读更多...
API数据是什么？举例说明，它是电商平台发展的领航者

API数据是什么？举例说明，它是电商平台发展的领航者

API接口&#xff1a; API接口是什么&#xff1f; API全称是&#xff1a;Application Programming Interface&#xff0c;即&#xff1a;应用程序接口。开发人员可以使用这些API接口进行编程开发&#xff0c;而又无需访问源码&#xff0c;或理解内部工作机制的细节。 比较常见…
阅读更多...
外包公司“混”了2年，我只认真做了5件事，如今顺利拿到腾讯Offer。

外包公司“混”了2年，我只认真做了5件事，如今顺利拿到腾讯Offer。

前言 是的&#xff0c;我一家外包公司工作了整整两年时间&#xff0c;在入职这家公司前&#xff0c;也就是两年前&#xff0c;我就开始规划了我自己的人生&#xff0c;所以在两年时间里&#xff0c;我并未懈怠。 现如今&#xff0c;我已经跳槽到了腾讯&#xff0c;顺利拿下 o…
阅读更多...
项目（今日指数之登录功能）

项目（今日指数之登录功能）

今日目标1. 完善基于前后端分用户验证码登录功能; 2. 理解验证码生成流程,并使用postman测试; 3. 理解并实现国内大盘数据展示功能; 4. 理解并实现国内板块数据展示功能; 5. 理解后端接口调试和前后端联调的概念;1.验证码登录功能1.1 验证码功能分析1&#xff09;前后端分离架构…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023