LayUI组件使用-数据表格组件
2021-09-01 本文已影响0人
让你变好的过程从来都不会很舒服
一、数据表格
数据表格组件table作为layui最核心的组件之一，可以对表格进行一些动态操作，涵盖了日常业务中的全部需求，可以支持表头固定和行固定，支持排序，支持复选框，支持分页，以及单元格编辑等一系列的功能，是一个非常重要的模块。
模块记载名称：table
二、快速使用
创建一个table的最快方式，在页面放置一个<div id="demo"></div>，然后通过table.render()方法指定该容器。
示例：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据表格</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<div id="demo">
</div>
<script type="text/javascript">
layui.use("table",function(){
var table=layui.table;
// 加载table实例
table.render({
elem:"#demo", // elem属性用来绑定容器的id属性值
url:"js/user.json", // 数据接口
cols:[[
{field:'id',title:'用户编号',sort:true,width:80},
{field:'username',title:'用户姓名',width:80},
{field:'sex',title:'性别',sort:true,width:80},
{field:'city',title:'城市',width:80},
{field:'sign',title:'签名',}
]],
});
});
</script>
</body>
</html>
json数据：
{
"code": 0,
"msg": "",
"count": 50,
"data":[{
"id":10000,
"username":"user-0",
"sex":"女",
"city":"城市0",
"sign":"签名0"
},
{
"id":10001,
"username":"user-1",
"sex":"男",
"city":"城市1",
"sign":"签名1"
},
{
"id":10002,
"username":"user-2",
"sex":"女",
"city":"城市2",
"sign":"签名2"
},
{
"id":10003,
"username":"user-3",
"sex":"女",
"city":"城市3",
"sign":"签名3"
},
{
"id":10004,
"username":"user-4",
"sex":"男",
"city":"城市4",
"sign":"签名4"
},
{
"id":10005,
"username":"user-5",
"sex":"女",
"city":"城市5",
"sign":"签名5"
}]
}
table表格的渲染方式：
table表格的渲染方式一共有三种
| 01. | 方法渲染 | 用JS方法的配置完成渲染 | （推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。 |
| 02. | 自动渲染 | HTML配置，自动渲染 | 无需写过多 JS，可专注于 HTML 表头部分 |
| 03. | 转换静态表格 | 转化一段已有的表格元素 | 无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可 |
事实上我们更推荐采用“方法级渲染”的做法，其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单，也只能由各位猿猿们自行体味了。
备注：table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作，详见目录：表格重载
