小工具      在线工具  汉语词典  css  js  c++  java

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

前端开发,layui,javascript,前端 额外说明

收录于:157天前

方法渲染

初始化 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列表即可。

异步数据
  • 控制器返回数据

Return 如果返回的数据如下所示,则更改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中的渲染数据必须是标准数据类型。

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

-

先不管美观哈 !
. . .

相关推荐

额外说明

软件管理

软件管理 1. 获取程序包的途径 系统发行版的光盘或官方的服务器 http://mirrors.aliyun.com http://mirrors.sohu.com http://mirrors.163.com 项目官方站点 第三方组织 Fedora-E

额外说明

Python 第十一节 第一课

[toc] 模块 ( module ) 1. 模块化 ( module ) 程序设计理念 1.1 模块和包概念的进化史     "变量引起质变" 是哲学中一个重要的理论. 量变为什么引起质变呢? 本质上理解, 随着数量的增加, 管理方式会发生本质的变化.

额外说明

java简单模拟实现数据库连接池

为什么要使用数据库连接池 这个问题在一开始学习线程池或者整合ssm框架的时候经常会问自己这个问题,只知道这样使用可以在一定程度上优化程序的性能,提升系统的资源利用率,至于为什么这样使用一直没有搞明白。 从原理上讲,池化是一种思想,设想把所有的资源集中在一

额外说明

[Vue3 博物馆管理系统] 使用Vue3、Element-plus tabs组件构建选项卡功能

系列文章目录 第一章 定制上中下(顶部菜单、底部区域、中间主区域显示)三层结构首页 第二章 使用Vue3、Element-plus菜单组件构建菜单 第三章 使用Vue3、Element-plus走马灯组件构建轮播图 第四章 使用Vue3、Element-

额外说明

【Go 基础篇】探索Go语言中Map的神奇操作

嗨,Go语言的学习者们!在编程世界中,Map是一个强大而又有趣的工具,它可以帮助我们高效地存储和操作键值对数据。Map就像是一本字典,可以让我们根据关键字(键)快速找到对应的信息(值)。在本文中,我们将探索Go语言中Map的各种操作,包括增加、查找、删除

额外说明

【软考 系统架构设计师】项目管理④ 软件质量管理

>>回到总目录<< 为了不辜负已经订阅了专栏的同学们的信任,所以本专栏不会有任何的优惠活动。 另外,当订阅人数每次达到 2 n ( n > 2 ) 2^n(n>2) 2

额外说明

什么是MDD,DDD,TDD?

前沿 随着软件行业的飞速发展,从软件的管理、开发、测试运维等各个角度、环节都很着许多针对新业务场景产生的新技术。而在对于MDD,DDD,TDD这几个长得相似的几个名词相信也是十分常见的,以下做个总结。 一、关于MDD 简述 MDD(模型驱动开发)代表了一

额外说明

Windows系统丢失shellstyle.dll文件导致程序异常问题

其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库,这时你可以下载这个shellstyle.dll

ads via 小工具