一、页面元素
1、常规用法
<table class="layui-table">
<colgroup>
<col width="150" />
<col width="200" />
<col />
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>技能</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>灭绝师太</td>
<td>HTML、CSS、PHP</td>
</tr>
<tr>
<td>2</td>
<td>西门大官人</td>
<td>PHP、ThinkPHP、Laravel</td>
</tr>
<tr>
<td>3</td>
<td>天蓬</td>
<td>HTML、CSS、JavaScript</td>
</tr>
<tr>
<td>4</td>
<td>欧阳克</td>
<td>PHP、ThinkPHP、小程序</td>
</tr>
</tbody>
</table>
2、其他风格
<table class="layui-table" lay-skin="line"></table>
<table class="layui-table" lay-skin="row"></table>
<table class="layui-table" lay-skin="nob"></table>
3、尺寸
<table class="layui-table" lay-size="sm"></table>
<table class="layui-table" lay-size="lg"></table>
4、隔行背景
<table class="layui-table" lay-even></table>
属性名 |
说明 |
lay-even |
用于开启 隔行 背景,可与其它属性一起使用 |
lay-skin="属性值" |
边框风格,若使用默认风格不设置该属性即可 |
lay-size="属性值" |
尺寸,若使用默认尺寸不设置该属性即可 |
二、表格渲染
方式 |
机制 |
适用场景 |
方法渲染 |
用 JS 方法的配置完成渲染 |
(推荐)无需写过多的 HTML ,在 JS 中指定原始元素,再设定各项参数即可。 |
自动渲染 |
HTML 配置,自动渲染 |
无需写过多 JS ,可专注于 HTML 表头部分 |
转换静态表格 |
转化一段已有的表格元素 |
无需配置数据接口,在 JS 中指定表格元素,并简单地给表头加上自定义属性即可 |
1、方法渲染
<table id="demo"></table>
<script>
layui.use("table", function () {
var table = layui.table;
table.render({
elem: "#demo",
cols: [
[
//表头
{ field: "area_id", title: "ID" },
{ field: "area_name", title: "城市名" },
{ field: "area_ip_desc", title: "归属" },
{ field: "first_pinyin", title: "拼音" },
{ field: "pinyin", title: "首字母" },
{ field: "status", title: "状态" },
],
],
data: [
{
area_id: 110000,
area_name: "北京",
area_ip_desc: "中国,北京",
first_pinyin: "Beijing",
pinyin: "B",
status: 1,
},
{
area_id: 120000,
area_name: "天津",
area_ip_desc: "中国,天津",
first_pinyin: "Tianjin",
pinyin: "T",
status: 1,
},
{
area_id: 130000,
area_name: "河北省",
area_ip_desc: "中国,河北省",
first_pinyin: "Hebei",
pinyin: "H",
status: 1,
},
{
area_id: 140000,
area_name: "山西省",
area_ip_desc: "中国,山西省",
first_pinyin: "Shanxi",
pinyin: "S",
status: 1,
},
{
area_id: 150000,
area_name: "内蒙古自治区",
area_ip_desc: "中国,内蒙古自治区",
first_pinyin: "Inner Mongolia",
pinyin: "I",
status: 1,
},
{
area_id: 210000,
area_name: "辽宁省",
area_ip_desc: "中国,辽宁省",
first_pinyin: "Liaoning",
pinyin: "L",
status: 1,
},
{
area_id: 220000,
area_name: "吉林省",
area_ip_desc: "中国,吉林省",
first_pinyin: "Jilin",
pinyin: "J",
status: 1,
},
{
area_id: 230000,
area_name: "黑龙江省",
area_ip_desc: "中国,黑龙江省",
first_pinyin: "Heilongjiang",
pinyin: "H",
status: 1,
},
{
area_id: 310000,
area_name: "上海",
area_ip_desc: "中国,上海",
first_pinyin: "Shanghai",
pinyin: "S",
status: 1,
},
{
area_id: 320000,
area_name: "江苏省",
area_ip_desc: "中国,江苏省",
first_pinyin: "Jiangsu",
pinyin: "J",
status: 1,
},
],
});
});
</script>
2、基础参数
参数 |
类型 |
说明 |
elem |
String/DOM |
指定原始 table 容器的选择器或 DOM ,方法渲染方式必填 |
width |
Number |
设定容器宽度 |
height |
Number/String |
设定容器高度:1、不填写 2、固定值 3、full-差值 |
cellMinWidth |
Number |
常规单元格的最小宽度(默认:60) |
skin |
Boolean/String |
表格风格:line (行边框风格)、row (列边框风格)、nob (无边框风格) |
even |
Boolean |
隔行背景 |
size |
String |
尺寸:sm (小尺寸)、lg (大尺寸) |
<table id="demo"></table>
<script>
layui.use("table", function () {
var table = layui.table;
table.render({
elem: "#demo",
cols: [
[
//表头
{ field: "area_id", title: "ID" },
{ field: "area_name", title: "城市名" },
{ field: "area_ip_desc", title: "归属" },
{ field: "first_pinyin", title: "拼音" },
{ field: "pinyin", title: "首字母" },
{ field: "status", title: "状态" },
],
],
data: [
{
area_id: 110000,
area_name: "北京",
area_ip_desc: "中国,北京",
first_pinyin: "Beijing",
pinyin: "B",
status: 1,
},
{
area_id: 120000,
area_name: "天津",
area_ip_desc: "中国,天津",
first_pinyin: "Tianjin",
pinyin: "T",
status: 1,
}
],
width: 500,
height: 300,
cellMinWidth: 120,
skin: "nob",
even: true,
size: "lg",
});
});
</script>
三、表头参数
- cols 设置表头。值是一个二维数组。方法渲染方式必填
参数 |
类型 |
说明 |
field |
String |
设定字段名。非常重要,且是表格数据列的唯一标识 |
title |
String |
设定标题名称 |
width |
Number/String |
设定列宽,若不填写,则自动分配;若填写,则支持值为:数字、百分比 |
minWidth |
Number |
局部定义当前常规单元格的最小宽度 |
type |
String |
设定列类型:normal (常规列)、checkbox (复选框)、radio (单选框)、numbers (序号列)、space (空列) |
LAY_CHECKED |
Boolean |
是否全选状态(默认:false )。必须复选框列开启后才有效 |
fixed |
String |
固定列。可选值有:left (固定在左)、right (固定在右) |
hide |
Boolean |
是否初始隐藏列,默认:false
|
sort |
Boolean |
是否允许排序,默认:false
|
unresize |
Boolean |
是否禁用拖拽列宽,默认:false 。如复选框列,会自动禁用 |
style |
String |
自定义单元格样式。即传入 CSS 样式 |
align |
String |
单元格排列方式:left(默认)、center(居中)、right(居右) |
<table id="demo"></table>
<script>
layui.use("table", function () {
var table = layui.table;
table.render({
elem: "#demo",
cols: [
[
{ type: "checkbox", LAY_CHECKED: true },
{ type: "radio" },
{ type: "numbers" },
{ type: "space", title: "空列", width: 120 },
//表头
{ field: "area_id", title: "ID", width: 120, fixed: "left" },
{ field: "area_name", title: "城市名", unresize: true },
{ field: "area_ip_desc", title: "归属", align: "right" },
{ field: "first_pinyin", title: "拼音", hide: true },
{ field: "pinyin", title: "首字母", minWidth: 500, sort: true },
{ field: "status", title: "状态", fixed: "right", style: "color:red;" },
],
]
});
});
</script>
四、异步数据
参数 |
类型 |
说明 |
url |
String |
接口地址。默认会自动传递两个参数:?page=1&limit=30
|
method |
String |
接口 http 请求类型,默认:get
|
where |
Object |
接口的其它参数。如:where: {token: 'sasasas', id: 123}
|
contentType |
Object |
发送到服务端的内容编码类型。如果你要发送 json 内容,可以设置:contentType: 'application/json'
|
done |
Function |
数据渲染完的回调 |
error |
Function |
数据请求失败的回调,返回两个参数:错误对象、内容 |
page |
Boolean/Object |
分页 |
limit |
Number |
每页显示的条数(默认 10) |
limits |
Array |
每页条数的选择项 |
1、url 接口
<table id="demo"></table>
<script>
layui.use("table", function () {
var table = layui.table;
table.render({
elem: "#demo",
url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
cols: [
[
{ type: "checkbox", LAY_CHECKED: true },
{ type: "radio" },
{ type: "numbers" },
{ type: "space", title: "空列", width: 120 },
//表头
{ field: "area_id", title: "ID", width: 120, fixed: "left" },
{ field: "area_name", title: "城市名", unresize: true },
{ field: "area_ip_desc", title: "归属", align: "right" },
{ field: "first_pinyin", title: "拼音", hide: true },
{ field: "pinyin", title: "首字母", minWidth: 500, sort: true },
{ field: "status", title: "状态", fixed: "right", style: "color:red;" },
],
]
});
});
</script>
2、接口返回数据的格式
{
"code": 0,
"msg": "",
"count": 1000,
"data": [
{
},
{
}
]
}
3、where 传参数
<table id="demo"></table>
<script>
layui.use("table", function () {
var table = layui.table;
table.render({
elem: "#demo",
url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
where : {
id : 0,
status : 1
},
cols: [
[
{ type: "checkbox", LAY_CHECKED: true },
{ type: "radio" },
{ type: "numbers" },
{ type: "space", title: "空列", width: 120 },
{ field: "area_id", title: "ID", width: 120, fixed: "left" },
{ field: "area_name", title: "城市名", unresize: true },
{ field: "area_ip_desc", title: "归属", align: "right" },
{ field: "first_pinyin", title: "拼音", hide: true },
{ field: "pinyin", title: "首字母", minWidth: 500, sort: true },
{ field: "status", title: "状态", fixed: "right", style: "color:red;" },
],
]
});
});
</script>
4、回调方法
table.render({
elem: "#demo",
url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
where: {
id: 0,
status: 1,
},
cols: [
[
{ type: "checkbox", LAY_CHECKED: true },
{ type: "radio" },
{ type: "numbers" },
{ type: "space", title: "空列", width: 120 },
{ field: "area_id", title: "ID", width: 120, fixed: "left" },
{ field: "area_name", title: "城市名", unresize: true },
{ field: "area_ip_desc", title: "归属", align: "right" },
{ field: "first_pinyin", title: "拼音", hide: true },
{ field: "pinyin", title: "首字母", minWidth: 500, sort: true },
{ field: "status", title: "状态", fixed: "right", style: "color:red;" },
],
],
done(e) {
console.log(e);
},
});
5、翻页
table.render({
elem: "#demo",
url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
where: {
id: 0,
status: 1,
},
cols: [
[
{ type: "checkbox", LAY_CHECKED: true },
{ field: "area_id", title: "ID", width: 120, fixed: "left" },
{ field: "area_name", title: "城市名", unresize: true },
{ field: "area_ip_desc", title: "归属", align: "right" },
{ field: "first_pinyin", title: "拼音", hide: true },
{ field: "pinyin", title: "首字母", minWidth: 500, sort: true },
{ field: "status", title: "状态", fixed: "right", style: "color:red;" },
],
],
page: true,
limit: 30,
limits: [30, 60, 90],
});
五、数据操作
1、绑定按钮
参数 |
类型 |
说明 |
toolbar |
String |
开启表格头部工具栏区域 |
defaultToolbar |
Array |
该参数可自由配置头部工具栏右侧的图标按钮 |
- toolbar: #toolbarDemo 指向自定义工具栏模板选择器
- toolbar: <div>xxx</div> 直接传入工具栏模板字符
- toolbar: true 仅开启工具栏,不显示左侧模板
- toolbar: default 让工具栏左侧显示默认的内置模板
<script type="text/html" id="toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm">添加</button>
<button class="layui-btn layui-btn-sm">编辑</button>
<button class="layui-btn layui-btn-sm">删除</button>
</div>
</script>
<table id="demo"></table>
<script>
layui.use("table", function () {
var table = layui.table;
table.render({
toolbar: "#toolbar",
elem: "#demo",
url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
where: {
id: 0,
status: 1,
},
cols: [
[
{ type: "checkbox" },
{ type: "radio" },
{ field: "area_id", title: "ID", width: 120 },
{ field: "area_name", title: "城市名", unresize: true },
{ field: "area_ip_desc", title: "归属", align: "right" },
{ field: "first_pinyin", title: "拼音" },
{ field: "pinyin", title: "首字母", minWidth: 500, sort: true },
{ field: "status", title: "状态", style: "color:red;" },
],
],
page: true,
limit: 30,
limits: [30, 60, 90],
});
});
</script>
- defaultToolbar:filter 显示筛选图标,exports 显示导出图标,print 显示打印图标
table.render({
toolbar: "#toolbar",
defaultToolbar: ["filter", "print", "exports"],
});
2、工具条事件
- 语法:table.on('event(filter)', callback);
- event 为内置事件名
- filter 为容器 lay-filter 设定的值
<script type="text/html" id="toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
</div>
</script>
<table id="demo" lay-filter="test"></table>;
<script>
table.on("toolbar(test)", function (obj) {
switch (obj.event) {
case "add":
layer.msg("添加");
break;
case "update":
layer.msg("编辑");
break;
case "delete":
layer.msg("删除");
break;
}
});
</script>
3、checkbox 复选框事件
- checked 当前是否选中状态
- data 选中行的相关数据
- type 如果触发的是全选,则为:all,如果触发的是单选,则为:one
<table id="demo" lay-filter="test"></table>;
<script>
table.on("checkbox(test)", function (obj) {
console.log(obj); //当前行的一些常用操作集合
});
</script>
4、radio 单选框事件
- checked 当前是否选中状态
- data 选中行的相关数据
<table id="demo" lay-filter="test"></table>;
<script>
table.on("radio(test)", function (obj) {
console.log(obj);
});
</script>
5、row 单双击事件
- tr 得到当前行元素对象
- data 得到当前行数据
<table id="demo" lay-filter="test"></table>;
<script>
table.on("row(test)", function (obj) {
console.log(obj);
});
</script>
<table id="demo" lay-filter="test"></table>;
<script>
table.on("row(test)", function (obj) {
obj.tr.find("div.layui-unselect.layui-form-radio")[0].click(); //单选
obj.tr.find("div.layui-unselect.layui-form-checkbox")[0].click(); // 多选
});
</script>
6、sort 排序切换
- field 当前排序的字段名
- type 当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序)
- this 当前排序的 th 对象
table.on("sort(test)", function (obj) {
console.log(obj);
});
table.on("sort(test)", function (obj) {
table.reload("demo", {
initSort: obj, //记录初始排序,如果不设的话,将无法标记表头的排序状态。
toolbar: "#toolbar",
elem: "#demo",
url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
where: {
id: 0,
status: 1,
field: obj.field,
order: obj.type,
},
cols: [
[
{ type: "radio" },
{ field: "area_id", title: "ID", width: 120, sort: true },
{ field: "area_name", title: "城市名", unresize: true },
{ field: "area_ip_desc", title: "归属", align: "right" },
{ field: "first_pinyin", title: "拼音" },
{ field: "pinyin", title: "首字母", minWidth: 500, sort: true },
{ field: "status", title: "状态", style: "color:red;" },
],
],
page: {
curr: 1,
},
limit: 30,
limits: [30, 60, 90],
});
});