使用layui 渲染table数据表格的实例代码
作者:叫我虫虫就好 发布时间:2024-07-11 13:37:23
标签:layui,渲染,table
先上最终效果图:
1,引入layui的css和js文件
<link rel="stylesheet" href="lib/layui/css/layui.css" rel="external nofollow" >
<script src="lib/layui/layui.js"></script>
2,在页面放置一个table元素
<table class="layui-hide" id="test" lay-filter='test3'></table>
3,通过 table.render() 方法指定该容器
layui.use('table', function(){
var table = layui.table;
// var playerName;
// if(item != undefined) {
// playerName=item;
// }
table.render({
elem: '#test' table 容器的选择器或 DOM
,url:'http://boss.superlychee.com/rest/web/golfTourManage/getGolfTourPlayerByTourIdAndRounds'
,method:'post'
,where:{tourId:tourIds,rounds:rounds,playerName:item}
,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,cols: [[
{field:'tourPlayerId', width:80, title: 'ID1', sort: true}
,{field:'playerName', width:80, title: '姓名'}
,{field:'hole1', title: '1',edit: 'text'}
,{field:'hole2', title: '2',edit: 'text'}
,{field:'hole3', title: '3',edit: 'text'} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
,{field:'hole4', title: '4',edit: 'text'}
,{field:'hole5', title: '5',edit: 'text'}
,{field:'hole6', title: '6',edit: 'text'}
,{field:'hole7', title: '7',edit: 'text'}
,{field:'hole8', title: '8',edit: 'text'}
,{field:'hole9', title: '9',edit: 'text'}
,{field:'hole10', title: '10',edit: 'text'}
,{field:'hole11', title: '11',edit: 'text'}
,{field:'hole12', title: '12',edit: 'text'}
,{field:'hole13', title: '13',edit: 'text'}
,{field:'hole14', title: '14',edit: 'text'}
,{field:'hole15', title: '15',edit: 'text'}
,{field:'hole16', title: '16',edit: 'text'}
,{field:'hole17', title: '17',edit: 'text'}
,{field:'hole18', title: '18',edit: 'text'}
,{field:'add', title: '操作', width:177,toolbar:"#barDemo"}
]],
});
});
4,这个时候你的页面差不多就是以下这个样子了
5,正文到了,怎么把表格数据渲染进去呢?咱们上面第三部就是渲染的一中方法,叫“方法渲染”,layui官网提供的三种渲染
方法,在这里不做陈述,方法渲染的优点是:你可以脱离HTML文件,而专注于JS本身。尤其对于项目的频繁改动及发布,其便捷性会体现得更为明显,
layui的url默认是“get”请求,我这边是post请求,所以记得加上“method”属性为post,
6,容易碰到的问题,按理来说这个时候应该已经可以看到表格数据了,为什么大多数人的表格还是渲染不出来呢?一般是因为你妹配置后台数据格式
response: {
statusName: 'code' //数据状态的字段名称,默认:code
,statusCode: 200 //成功的状态码,默认:0
,msgName: 'msg' //状态信息的字段名称,默认:msg
,countName: 'count' //数据总数的字段名称,默认:count
,dataName: 'data' //数据列表的字段名称,默认:data
}
这个时候表格一般已经是出来了,记得,后台提供的数据格式,和layui提供的一样最好,这一点要切记,这一点大家可以去官网上看下,不做说明。
来源:https://blog.csdn.net/qq_40319394/article/details/79989876


猜你喜欢
- 逐步回归的基本思想是将变量逐个引入模型,每引入一个解释变量后都要进行F检验,并对已经选入的解释变量逐个进行t检验,当原来引入的解释变量由于后
- 对于python语言的True和False我们并不陌生了,在学习的过程中常会遇到这样的返回值,那么True真和False假的具体含义是什么?
- 一、通知方式有哪些?常见的通知方式有:邮件,电话,短信,微信。短信和电话:通常是收费的,较少使用;邮件:适合带文件类型的通知,较正式,存档使
- 1:在终端下:mysql -V。 以下是代码片段:[shengting@login ~]$ mysql -Vmysql Ver 14.7 D
- 试了一下,xmlDoc.save()行不同,就试着用fso做了出来。整理一下,供大家discuss。由于用js操作本地xml文件之后save
- 本文实例讲述了ES6新特性中的let和const命令。分享给大家供大家参考,具体如下:1. let 命令① 在js中是没有块级作用域的,va
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 13 - Regular ExpressionsM
- 我们在flask的学习中,会难免遇到多对多表的查询,今天我也遇到了这个问题。那么我想了好久。也没有想到一个解决的办法,试了几种方法,可能是思
- 一、selenium实战这里我们只会用到很少的selenium语法,我这里就不补充别的用法了,以实战为目的二、打开艺龙网可以直接点击这里进入
- 1.能调用方法的一定是对象,比如数值、字符串、列表、元组、字典,甚至文件也是对象,Python中一切皆为对象。 str1 = 'he
- rpc有多种调用方式,http、json-rpc、tcp一、服务端在代码中,启动了三个服务package mainimport ("
- 遇到个小白常见的问题,发现度娘里面没有记录,翻墙谷歌了下,解决问题,在此写个说明。事情起因:在jupyter notebook中导入文件时发
- XML是一项热门的技术。它之所以能够引起人们的兴趣,一个主要的原因在于它十分的简单,人们可以很容易地理解和使用它。每一个程序员都能轻易地看懂
- 我就废话不多说了,大家还是直接看代码吧!绘制曲线:import timeimport numpy as npimport matplotli
- 对图片进行resize、裁剪、旋转、翻转图片处理时常用的手段有resize、裁剪、旋转、翻转,简单介绍一下python中怎么利用PIL库和t
- eclipse 配置 python 默认头打开eclipse 点 窗口(Windows)->首选项(Preferences)Prefe
- 一、 模块1、模块的概念模块是 Python 程序架构的一个核心概念每一个以扩展名 py 结尾的 Python 源代码文件都是一个 模块模块
- 最近常有厦门的客户通过网站上的联系方式加我QQ,询问网站改版的情况。几乎每日都要针对客户网站存在的问题做一番分析,然后客户以价格等其他因素结
- 1.基本概念定义含义并发:concurrency,同一时刻只能有一条指令执行,但是多个线程的对应的指令被快速轮换地执行并行parallel,
- 查询速度慢的原因很多,常见如下几种: 1、没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2、I/O吞吐量小,形成了瓶