LayUI之旅-数据表格
layui的数据表格是使用频率非常高的组件，在入门篇，我们已经大致了了解了数据表格的方法级渲染，接下来我们深入研究和学习layui-table组件的使用方法。
数据表格官方文档地址：https://www.layui.com/doc/modules/table.html
1、渲染方式
数据表格的渲染方式有三种，这是官方对三种渲染方式的场景介绍：
方式 | 机制 | 适用场景 |
|---|---|---|
方法渲染 | 用JS方法的配置完成渲染 | （推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。 |
自动渲染 | HTML配置，自动渲染 | 无需写过多 JS，可专注于 HTML 表头部分 |
转换静态表格 | 转化一段已有的表格元素 | 无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可 |
注：和官方一样，我在这里同样推荐使用方法渲染的方式，但在有些场景下还是更适合使用自动渲染的方法。
方法渲染
<table id="demo" lay-filter="test"></table>var table = layui.table;
//执行渲染
table.render({
elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
,height: 315 //容器高度
,cols: [{}] //设置表头
//,…… //更多参数参考右侧目录：基本参数选项
});可以看到，table.render()接收一个对象options，options的可能值参见基础参数一览表。
自动渲染
自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：
1) 带有 class="layui-table" 的 <table> 标签。
2) 对标签设置属性 lay-data="" 用于配置一些基础参数
3) 在 <th> 标签中设置属性lay-data=""用于配置表头信息
示例：
<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" 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>
</tr>
</thead>
</table>转换静态表格
示例：
<table lay-filter="demo">
<thead>
<tr>
<th lay-data="{field:'username', width:100}">昵称</th>
<th lay-data="{field:'experience', width:80, sort:true}">积分</th>
<th lay-data="{field:'sign'}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心1</td>
<td>66</td>
<td>人生就像是一场修行a</td>
</tr>
<tr>
<td>贤心2</td>
<td>88</td>
<td>人生就像是一场修行b</td>
</tr>
<tr>
<td>贤心3</td>
<td>33</td>
<td>人生就像是一场修行c</td>
</tr>
</tbody>
</table>var table = layui.table;
//转换静态表格
table.init('demo', {
height: 315 //设置高度
,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
//支持所有基础参数
}); 2、表格重载
数据表格的精髓——数据重载，我们在很多场景下都可能会用到他，比如搜索，排序等等。
语法 | 说明 | 适用场景 |
|---|---|---|
table.reload(ID, options) | 参数 ID 即为基础参数id对应的值，见：设定容器唯一ID 参数 options 即为各项基础参数 | 所有渲染方式 |
tableIns.reload(options) | 参数同上 tableIns 可通过 var tableIns = table.render() 得到 | 仅限方法级渲染 |
//自动渲染的表格重载
table.reload('tableID', {
url: '/api/table/search'//数据接口
,where: {fieldName: fieldValue} //设定异步数据接口的额外参数
//,height: 300
});
//方法级渲染的表格重载
table.reload('tableID',{
page:{
curr:1 //重新从第 1 页开始
},
where:{
key:{fieldName: fieldValue}
}
},'data');// 只重载数据
//方法级渲染的表格重载-2
var tableIns = table.render({
elem: '#id'
,cols: [] //设置表头
,url: '/api/data' //设置异步接口
,id: 'idTest'
});
tableIns.reload({
where: { //设定异步数据接口的额外参数，任意设
aaaaaa: 'xxx'
,bbb: 'yyy'
}
,page: {
curr: 1 //重新从第 1 页开始
}
});基础参数一览表
参数 | 类型 | 说明 | 示例值 |
|---|---|---|---|
elem | String/DOM | 指定原始 table 容器的选择器或 DOM，方法渲染方式必填 | “#demo” |
cols | Array | 设置表头。值是一个二维数组。方法渲染方式必填 | 详见表头参数 |
url（等） | – | 异步数据接口相关参数。其中 url 参数为必填项 | 详见异步接口 |
toolbar | String/DOM/Boolean | 开启表格头部工具栏区域，该参数支持四种类型值： toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器 toolbar: ‘<div>xxx</div>’ //直接传入工具栏模板字符 toolbar: true //仅开启工具栏，不显示左侧模板 toolbar: ‘default’ //让工具栏左侧显示默认的内置模板 注意： 1. 该参数为 layui 2.4.0 开始新增。 2. 若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数 | false |
defaultToolbar | Array | 该参数可自由配置头部工具栏右侧的图标按钮 | 详见头工具栏图标 |
width | Number | 设定容器宽度。table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。 | 1000 |
height | Number/String | 设定容器高度 | 详见height |
cellMinWidth | Number | （layui 2.2.1 新增）全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth | 100 |
done | Function | 数据渲染完的回调。你可以借此做一些其它的操作 | 详见done回调 |
data | Array | 直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。 | {}, {}, {}, {}, … |
totalRow | Boolean | 是否开启合计行区域。layui 2.4.0 新增 | false |
page | Boolean/Object | 开启分页（默认：false） 注：从 layui 2.2.0 开始，支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外） | {theme: ‘#c00’} |
limit | Number | 每页显示的条数（默认：10）。值务必对应 limits 参数的选项。 注意：优先级低于 page 参数中的 limit 参数 | 30 |
limits | Array | 每页条数的选择项，默认：10,20,30,40,50,60,70,80,90。 注意：优先级低于 page 参数中的 limits 参数 | 30,60,90 |
loading | Boolean | 是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式 | false |
title | String | 定义 table 的大标题（在文件导出等地方会用到）layui 2.4.0 新增 | “用户表” |
text | Object | 自定义文本，如空数据时的异常提示等。注：layui 2.2.5 开始新增。 | 详见自定义文本 |
autoSort | Boolean | 默认 true，即直接由 table 组件在前端自动处理排序。 若为 false，则需自主排序，通常由服务端直接返回排序好的数据。 注意：该参数为 layui 2.4.4 新增 | 详见监听排序 |
initSort | Object | 初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。 | 详见初始排序 |
id | String | 设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。 值得注意的是：从 layui 2.2.0 开始，该参数也可以自动从 <table id=”test”></table> 中的 id 参数中获取。 | test |
skin（等） | – | 设定表格各种外观、尺寸等 | 详见表格风格 |
- toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器
- toolbar: ‘<div>xxx</div>’ //直接传入工具栏模板字符
- toolbar: true //仅开启工具栏，不显示左侧模板
- toolbar: ‘default’ //让工具栏左侧显示默认的内置模板
注意：
- 该参数为 layui 2.4.0 开始新增。
- 若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数 false defaultToolbar Array 该参数可自由配置头部工具栏右侧的图标按钮 详见头工具栏图标 width Number 设定容器宽度。table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。 1000 height Number/String 设定容器高度 详见height cellMinWidth Number （layui 2.2.1 新增）全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth 100 done Function 数据渲染完的回调。你可以借此做一些其它的操作 详见done回调 data Array 直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。 {}, {}, {}, {}, … totalRow Boolean 是否开启合计行区域。layui 2.4.0 新增 false page Boolean/Object 开启分页（默认：false） 注：从 layui 2.2.0 开始，支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外） {theme: ‘#c00’} limit Number 每页显示的条数（默认：10）。值务必对应 limits 参数的选项。 注意：优先级低于 page 参数中的 limit 参数 30 limits Array 每页条数的选择项，默认：10,20,30,40,50,60,70,80,90。 注意：优先级低于 page 参数中的 limits 参数 30,60,90 loading Boolean 是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式 false title String 定义 table 的大标题（在文件导出等地方会用到）layui 2.4.0 新增 “用户表” text Object 自定义文本，如空数据时的异常提示等。注：layui 2.2.5 开始新增。 详见自定义文本 autoSort Boolean 默认 true，即直接由 table 组件在前端自动处理排序。 若为 false，则需自主排序，通常由服务端直接返回排序好的数据。 注意：该参数为 layui 2.4.4 新增 详见监听排序 initSort Object 初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。 详见初始排序 id String 设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。 值得注意的是：从 layui 2.2.0 开始，该参数也可以自动从 <table id=”test”></table> 中的 id 参数中获取。 test skin（等） – 设定表格各种外观、尺寸等 详见表格风格
表头参数一览表
参数 | 类型 | 说明 | 示例值 |
|---|---|---|---|
field | String | 设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识 | username |
title | String | 设定标题名称 | 用户名 |
width | Number/String | 设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比 请结合实际情况，对不同列做不同设定。 | 200 30% |
minWidth | Number | 局部定义当前常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth | 100 |
type | String | 设定列类型。可选值有： normal（常规列，无需设定） checkbox（复选框列） radio（单选框列，layui 2.4.0 新增） numbers（序号列） space（空列） | 任意一个可选值 |
LAY_CHECKED | Boolean | 是否全选状态（默认：false）。必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。 | true |
fixed | String | 固定列。可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。 注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。 | left（同 true） right |
hide | Boolean | 是否初始隐藏列，默认：false。layui 2.4.0 新增 | true |
totalRow | Boolean | 是否开启该列的自动合计功能，默认：false。layui 2.4.0 新增 | true |
totalRowText | String | 用于显示自定义的合计文本。layui 2.4.0 新增 | “合计：” |
sort | Boolean | 是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对。比如：‘贤心’ > ‘2’ > ‘100’，这可能并不是你想要的结果，但字典序排列算法（ASCII码比对）就是如此。 | true |
unresize | Boolean | 是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。 | false |
edit | String | 单元格编辑类型（默认不开启）目前只支持：text（输入框） | text |
event | String | 自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理 | 任意字符 |
style | String | 自定义单元格样式。即传入 CSS 样式 | color: #fff; |
align | String | 单元格排列方式。可选值有：left（默认）、center（居中）、right（居右） | center |
colspan | Number | 单元格所占列数（默认：1）。一般用于多级表头 | 3 |
rowspan | Number | 单元格所占行数（默认：1）。一般用于多级表头 | 2 |
templet | String | 自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等 | 详见自定义模板 |
toolbar | String | 绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮 | 详见行工具事件 |
- normal（常规列，无需设定）
- checkbox（复选框列）
- radio（单选框列，layui 2.4.0 新增）
- numbers（序号列）
- space（空列）
任意一个可选值 LAY_CHECKED Boolean 是否全选状态（默认：false）。必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。 true fixed String 固定列。可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。
注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。 left（同 true）
right hide Boolean 是否初始隐藏列，默认：false。layui 2.4.0 新增 true totalRow Boolean 是否开启该列的自动合计功能，默认：false。layui 2.4.0 新增 true totalRowText String 用于显示自定义的合计文本。layui 2.4.0 新增 “合计：” sort Boolean 是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对。比如：‘贤心’ > ‘2’ > ‘100’，这可能并不是你想要的结果，但字典序排列算法（ASCII码比对）就是如此。 true unresize Boolean 是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。 false edit String 单元格编辑类型（默认不开启）目前只支持：text（输入框） text event String 自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理 任意字符 style String 自定义单元格样式。即传入 CSS 样式 color: #fff; align String 单元格排列方式。可选值有：left（默认）、center（居中）、right（居右） center colspan Number 单元格所占列数（默认：1）。一般用于多级表头 3 rowspan Number 单元格所占行数（默认：1）。一般用于多级表头 2 templet String 自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等 详见自定义模板 toolbar String 绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮 详见行工具事件
异步数据接口
参数名 | 功能 |
|---|---|
url | 接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义） page 代表当前页码、limit 代表每页数据量 |
method | 接口http请求类型，默认：get |
where | 接口的其它参数。如：where: {token: ‘sasasas’, id: 123} |
contentType | 发送到服务端的内容编码类型。如果你要发送 json 内容，可以设置：contentType: ‘application/json’ |
headers | 接口的请求头。如：headers: {token: ‘sasasas’} |
parseData | layui 2.4.0 新增 数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式 假设你接口返回的数据为: { "status": 0, "message": "", "total": 180, "data": { "item": {}, {} } } 那么你需要将其解析成 table 组件所规定的数据（详见： response 参数介绍） table.render({ elem: '#demp', url: '', parseData: function(res) { //res 即为原始返回的数据 return { "code": res.status, //解析接口状态 "msg": res.message, //解析提示文本 "count": res.total, //解析数据长度 "data": res.data.item //解析数据列表 }; } //,…… //其他参数 }); |
request | 用于对分页请求的参数：page、limit重新设定名称，如： table.render({ elem: '#demp' ,url: '' ,request: { pageName: 'curr' //页码的参数名称，默认：page ,limitName: 'nums' //每页数据量的参数名，默认：limit } //,…… //其他参数 }); 那么请求数据时的参数将会变为：?curr=1&nums=30 |
response | table 组件默认规定的数据格式 { "code": 0, "msg": "", "count": 1000, "data": {}, {} } 如果你想重新规定返回的数据格式，那么可以借助 response 参数，如： table.render({ elem: '#demp' ,url: '' ,response: { statusName: 'status' //规定数据状态的字段名称，默认：code ,statusCode: 200 //规定成功的状态码，默认：0 ,msgName: 'hint' //规定状态信息的字段名称，默认：msg ,countName: 'total' //规定数据总数的字段名称，默认：count ,dataName: 'rows' //规定数据列表的字段名称，默认：data } //,…… //其他参数 }); 重新规定的数据格式 { "status": 200, "hint": "", "total": 1000, "rows": {}, {} } |
关于参数就简单介绍到这里，更多参数详情，请到官方文档查阅！
接下来将给出一个示例：
// 异步数据接口
table.render({
elem: '#tableID',//推荐使用ID选择器
method: "post", //layui默认使用get方式
url: "url",
cols: cols,
where:{
key:{userid: userid}
},
cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
page: true,
limit:5,
limits:[5,10,20],
response: {
statusName: 'status', //规定数据状态的字段名称，默认：code
statusCode: 1, //规定成功的状态码，默认：0
msgName: 'message', //规定状态信息的字段名称，默认：msg
countName: 'count', //规定数据总数的字段名称，默认：count
dataName: 'data' //规定数据列表的字段名称，默认：data
}
// ,parseData: function(res){ // 将原始数据解析为layui.table组件所规定的
// return {
// "code": res.code, // 解析请求状态
// "msg": res.message, // 解析文本信息
// "count": res.count, // 解析数据长度
// "data": res.data // 解析数据列表
// }
// }
});
//赋值已知数据的方式，该方式使用ajax实现异步获取数据，然后把已知数据传给table组件使用
$.ajax({
"type":"post",
"data":{"userid":userid},
"url":"url",
"dataType":"json",
"success":function(res){
table.render({
elem: '#tableID',//推荐使用ID选择器
cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
page: true,
limit:5,
limits:[5,10,20],
cols: cols,
data: res.data
});
}
})
//封装一个数据重载函数以供重复利用
function reload(tableID, fieldName, fieldValue){
//执行重载
table.reload(tableID,{
page:{
curr:1 //重新从第 1 页开始
},
where:{
/*
* [fieldName] - 必须用方括号包裹变量，否则将被视为字面量，ES6+
* ES5 写法如下:
* var keyname = "keyname";
* var keyvalue = "keyvalue";
* var obj = {};
* obj[keyname] = keyvalue;
*/
key:{[fieldName]: fieldValue}
}
},'data');// 只重载数据
}
//当需要执行表格重载时，例如当点击某个按钮时对表格进行重载
$(".layui-body").on("click", ".layui-btn", function(){
var obj = $(this);
var table = obj.attr("id").split(/[-_]/),//示例中被点击的按钮的属性id="tableID-reload"
tableID = table[0]+"Reload";
//layui表单提交事件监听，submit按钮的自定义属性lay-filter="go"
form.on("submit(go)",function(data){
var field = data.field;
var fieldName,fieldValue;
$.each(field, function(key, value){
fieldName = key;
fieldValue = value;
});
reload.call(this, tableID, fieldName, fieldValue);
}
}LayUI： 2 / 2
- LayUI之旅-入门
- LayUI之旅-数据表格
本文采用 「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：
原文出处：Yiiven https://cloud.tencent.com/developer/article/2193213