《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：
1.23 数据表格table
注意：根据使用上的经验，建议不要把数据表格做为服务端分页的”前端复杂界面设计”的解决方案。当对数据表格进行自定义定制时，由于Layui框架中table模块可定制性不良的原因，也就是过度封装，有可能在复杂界面的实现上并不是太方便，还得自己添加javascript和css代码，建议使用普通table表格结合自写代码来实现分页，这样的高度可定制性能解决全部的界面设计及业务需求。当前端界面不需要自定义定制时，比如不需要更改对齐属性，不需要对td中的内容进行复杂的逻辑处理等情况，并且想快速实现分页效果时，数据表格还是首选的解决方案，完全可以胜任此类简单性的工作。
table模块是layui 2.0版本中全新推出的，是layui最核心的组成之一，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些系列功能。table模块是layui重点维护的项目之一。
模块加载名称：table。
1.23.1 快速使用
创建一个table实例最简单的方式是在页面放置一个元素：
<table id="demo"></table>
然后通过table.render()方法指定该容器。
文件new.html代码如下：
{
"code": 0,
"msg": "",
"count": 1000,
"data": [{
"id": 10000,
"username": "user-0",
"sex": "女",
"city": "城市-0",
"sign": "签名-0",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
}, {
"id": 10001,
"username": "user-1",
"sex": "男",
"city": "城市-1",
"sign": "签名-1",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27
}, {
"id": 10002,
"username": "user-2",
"sex": "女",
"city": "城市-2",
"sign": "签名-2",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31
}, {
"id": 10003,
"username": "user-3",
"sex": "女",
"city": "城市-3",
"sign": "签名-3",
"experience": 362,
"logins": 157,
"wealth": 37117017,
"classify": "诗人",
"score": 68
}, {
"id": 10004,
"username": "user-4",
"sex": "男",
"city": "城市-4",
"sign": "签名-4",
"experience": 807,
"logins": 51,
"wealth": 76263262,
"classify": "作家",
"score": 6
}, {
"id": 10005,
"username": "user-5",
"sex": "女",
"city": "城市-5",
"sign": "签名-5",
"experience": 173,
"logins": 68,
"wealth": 60344147,
"classify": "作家",
"score": 87
}, {
"id": 10006,
"username": "user-6",
"sex": "女",
"city": "城市-6",
"sign": "签名-6",
"experience": 982,
"logins": 37,
"wealth": 57768166,
"classify": "作家",
"score": 34
}, {
"id": 10007,
"username": "user-7",
"sex": "男",
"city": "城市-7",
"sign": "签名-7",
"experience": 727,
"logins": 150,
"wealth": 82030578,
"classify": "作家",
"score": 28
}, {
"id": 10008,
"username": "user-8",
"sex": "男",
"city": "城市-8",
"sign": "签名-8",
"experience": 951,
"logins": 133,
"wealth": 16503371,
"classify": "词人",
"score": 14
}, {
"id": 10009,
"username": "user-9",
"sex": "女",
"city": "城市-9",
"sign": "签名-9",
"experience": 484,
"logins": 25,
"wealth": 86801934,
"classify": "词人",
"score": 75
}, {
"id": 10010,
"username": "user-10",
"sex": "女",
"city": "城市-10",
"sign": "签名-10",
"experience": 1016,
"logins": 182,
"wealth": 71294671,
"classify": "诗人",
"score": 34
}, {
"id": 10011,
"username": "user-11",
"sex": "女",
"city": "城市-11",
"sign": "签名-11",
"experience": 492,
"logins": 107,
"wealth": 8062783,
"classify": "诗人",
"score": 6
}, {
"id": 10012,
"username": "user-12",
"sex": "女",
"city": "城市-12",
"sign": "签名-12",
"experience": 106,
"logins": 176,
"wealth": 42622704,
"classify": "词人",
"score": 54
}, {
"id": 10013,
"username": "user-13",
"sex": "男",
"city": "城市-13",
"sign": "签名-13",
"experience": 1047,
"logins": 94,
"wealth": 59508583,
"classify": "诗人",
"score": 63
}, {
"id": 10014,
"username": "user-14",
"sex": "男",
"city": "城市-14",
"sign": "签名-14",
"experience": 873,
"logins": 116,
"wealth": 72549912,
"classify": "词人",
"score": 8
}, {
"id": 10015,
"username": "user-15",
"sex": "女",
"city": "城市-15",
"sign": "签名-15",
"experience": 1068,
"logins": 27,
"wealth": 52737025,
"classify": "作家",
"score": 28
}, {
"id": 10016,
"username": "user-16",
"sex": "女",
"city": "城市-16",
"sign": "签名-16",
"experience": 862,
"logins": 168,
"wealth": 37069775,
"classify": "酱油",
"score": 86
}, {
"id": 10017,
"username": "user-17",
"sex": "女",
"city": "城市-17",
"sign": "签名-17",
"experience": 1060,
"logins": 187,
"wealth": 66099525,
"classify": "作家",
"score": 69
}, {
"id": 10018,
"username": "user-18",
"sex": "女",
"city": "城市-18",
"sign": "签名-18",
"experience": 866,
"logins": 88,
"wealth": 81722326,
"classify": "词人",
"score": 74
}, {
"id": 10019,
"username": "user-19",
"sex": "女",
"city": "城市-19",
"sign": "签名-19",
"experience": 682,
"logins": 106,
"wealth": 68647362,
"classify": "词人",
"score": 51
}, {
"id": 10020,
"username": "user-20",
"sex": "男",
"city": "城市-20",
"sign": "签名-20",
"experience": 770,
"logins": 24,
"wealth": 92420248,
"classify": "诗人",
"score": 87
}, {
"id": 10021,
"username": "user-21",
"sex": "男",
"city": "城市-21",
"sign": "签名-21",
"experience": 184,
"logins": 131,
"wealth": 71566045,
"classify": "词人",
"score": 99
}, {
"id": 10022,
"username": "user-22",
"sex": "男",
"city": "城市-22",
"sign": "签名-22",
"experience": 739,
"logins": 152,
"wealth": 60907929,
"classify": "作家",
"score": 18
}, {
"id": 10023,
"username": "user-23",
"sex": "女",
"city": "城市-23",
"sign": "签名-23",
"experience": 127,
"logins": 82,
"wealth": 14765943,
"classify": "作家",
"score": 30
}, {
"id": 10024,
"username": "user-24",
"sex": "女",
"city": "城市-24",
"sign": "签名-24",
"experience": 212,
"logins": 133,
"wealth": 59011052,
"classify": "词人",
"score": 76
}, {
"id": 10025,
"username": "user-25",
"sex": "女",
"city": "城市-25",
"sign": "签名-25",
"experience": 938,
"logins": 182,
"wealth": 91183097,
"classify": "作家",
"score": 69
}, {
"id": 10026,
"username": "user-26",
"sex": "男",
"city": "城市-26",
"sign": "签名-26",
"experience": 978,
"logins": 7,
"wealth": 48008413,
"classify": "作家",
"score": 65
}, {
"id": 10027,
"username": "user-27",
"sex": "女",
"city": "城市-27",
"sign": "签名-27",
"experience": 371,
"logins": 44,
"wealth": 64419691,
"classify": "诗人",
"score": 60
}, {
"id": 10028,
"username": "user-28",
"sex": "女",
"city": "城市-28",
"sign": "签名-28",
"experience": 977,
"logins": 21,
"wealth": 75935022,
"classify": "作家",
"score": 37
}, {
"id": 10029,
"username": "user-29",
"sex": "男",
"city": "城市-29",
"sign": "签名-29",
"experience": 647,
"logins": 107,
"wealth": 97450636,
"classify": "酱油",
"score": 27
}]
}
运行文件代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
height: 300,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 80,
sort: true,
fixed: 'left'
}, {
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>
</body>
</html>
运行效果如图1-xx所示。
1.23.2 三种初始化渲染方式
table模块做了三种初始化的支持，可按照个人喜好和实际情况灵活使用，如图1-xx所示。
1.23.2.1 方法渲染
“方法渲染”是将基础参数的设置放在了JS代码中，且原始的table标签只需要一个选择器。
文件new.html测试代码如下：
{
"code": 0,
"msg": "",
"count": 1000,
"data": [{
"id": 10000,
"username": "username1",
"password": "password1"
},
{
"id": 20000,
"username": "username2",
"password": "password2"
},
{
"id": 30000,
"username": "username3",
"password": "password3"
}
]
}
运行文件代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '账号',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
</script>
</body>
</html>
elem值类型String/DOM，指定原始table容器的选择器或DOM对象，是方法渲染方式的必填项。
cols值类型Array，设置表头，值是一个二维数组，是方法渲染方式的必填项。
运行效果如图1-xx所示。
推荐采用“方法渲染”，其最大的优势在于可以脱离HTML文件而专注于JS本身，尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。
table.render()方法返回一个table对象：
var tableObject = table.render(options);
可用于对当前表格进行“重加载reload”等操作，关于“重加载reload”请参看后面的章节。
1.23.2.2 自动渲染
所谓的自动渲染是在一段table容器中配置好相应的参数，由table模块内部自动对其完成渲染，而无需写初始的渲染方法。
需要关注的是以下三点：
（1）带有class="layui-table"的<table>标签。
（2）对标签设置属性lay-data=""，用于配置一些基础参数。
（3）在<th>标签中设置属性lay-data=""用于配置表头信息。
按照上述的规范写好table原始容器后，只要加载了layui的table模块，就会自动对其建立动态的数据表格。
文件new.html代码如下：
{
"code": 0,
"msg": "",
"count": 4,
"data": [{
"id": 10000,
"username": "username1",
"password": "password1"
},
{
"id": 20000,
"username": "username2",
"password": "password2"
},
{
"id": 30000,
"username": "username3",
"password": "password3"
},
{
"id": 40000,
"username": "username4",
"password": "password4"
}
]
}
运行文件代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<table class="layui-table" lay-data="{url:'new.html', page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:200, sort: true}">ID</th>
<th lay-data="{field:'username', width:200}">账号</th>
<th lay-data="{field:'password', width:200}">密码</th>
</tr>
</thead>
</table>
<script src="layui/layui.all.js"></script>
<script>
var table = layui.table;
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.2.3 转换静态表格
假设页面已经存在有内容的表格，它由原始的table标签组成，这时需要赋予它一些扩展的属性，比如拖拽调整列宽，比如排序等等功能，那么同样可以很轻松地去产生数据表格。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<table lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:200, sort: true}">ID</th>
<th lay-data="{field:'username', width:200}">账号</th>
<th lay-data="{field:'password', width:200}">密码</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>username1</td>
<td>password1</td>
</tr>
<tr>
<td>2</td>
<td>username2</td>
<td>password2</td>
</tr>
<tr>
<td>3</td>
<td>username3</td>
<td>password3</td>
</tr>
<tr>
<td>4</td>
<td>username4</td>
<td>password4</td>
</tr>
<tr>
<td>5</td>
<td>username5</td>
<td>password5</td>
</tr>
</table>
<input type="button" value="setTableTheme" id="setTableTheme">
<script src="layui/layui.all.js"></script>
<script>
$(document).ready(function() {
$("#setTableTheme").click(function() {
var table = layui.table;
//转换静态表格
table.init('test', {});
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
