《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：
1.23.6 基础方法
基础用法是table模块的关键组成部分，目前所开放的所有方法如图1-xx所示。
后面的章节会对常用的方法进行案例演示。
1.23.7 获取行中checkbox状态
可获取到表格所有的选中行相关数据。
语法：table.checkStatus('ID');
其中ID为基础参数id对应的值，示例代码如下：
【自动化渲染】
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
【方法渲染】
table.render({ //其它参数省略
id: 'idTest'
});
javascript调用代码如下：
var checkStatus = table.checkStatus('idTest'); //idTest即为基础参数id对应的值
console.log(checkStatus.data) //获取选中行的数据
console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll ) //表格是否全选
测试代码如下：
<!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 type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
var table = layui.table;
//第一个实例
table.render({
id: "mytable",
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
cols: [
[ //表头
{
type: "checkbox",
width:100
},
{
field: 'id',
title: 'ID',
width:200
}, {
field: 'username',
title: '账号',
width:200
}, {
field: 'password',
title: '账号',
width:200
}
]
]
});
function getCheckedStatus(){
var checkStatus = table.checkStatus('mytable'); //mytable即为基础参数id对应的值
console.log(checkStatus.data); //获取选中行的数据
console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll); //表格是否全选
}
</script>
<input type="button" onclick="javascript:getCheckedStatus()" value="取值" />
</body>
</html>
运行效果如图1-xx所示。
1.23.8 重置表格尺寸
可重置表格尺寸和结构，其内部完成了：固定列高度平铺、动态分配列宽、容器滚动条宽高补丁等操作。它一般用于特殊情况下（如“非窗口resize”导致的表格父容器宽度变化而引发的列宽适配异常），以保证表格在此类特殊情况下依旧能正常展示。
语法：table.resize('ID')，其中ID为基础参数id对应的值，示例代码如下：
table.render({ //其它参数省略
,elem: '#demo'
//,…… //其它参数
,id: 'idTest'
});
//执行表格“尺寸结构”的重置，一般写在对应的事件中
table.resize('idTest');
测试代码如下：
<!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>
<div style="background-color: red;">
<table id="demo" lay-filter="test"></table>
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
var table = layui.table;
//第一个实例
table.render({
id: "mytable",
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
cols: [
[ //表头
{
type: "checkbox",
},
{
field: 'id',
title: 'ID',
}, {
field: 'username',
title: '账号',
}, {
field: 'password',
title: '账号',
}
]
]
});
function changeSize(){
$("body div:first").width("500px");
}
function resize(){
var table = layui.table;
table.resize("mytable");
}
</script>
<input type="button" onclick="javascript:changeSize()" value="改变大小" />
<br />
<input type="button" onclick="javascript:resize()" value="resize" />
</body>
</html>
1.23.9 表格重载
当表格中的数据被新的数据所替代而又不想重新渲染表格时可以使用表格重载reload方法。有两种方式实现表格重载，如图1-xx所示。
但reload()方法在复杂的场景下，Layui官方并没有做好相关的功能处理，所以很多使用者在使用reload()方法时会出现一些bug，如图1-xx所示。
建议大家还是使用render()方法重新对表格进行整体的渲染与数据处理，减少莫名其妙的bug，另外Layui官方已经很久没有更新该框架，现有的bug或隐式的bug估计还会在不同的场景下出现，所以尽量不要以身试坑，使用render()方法就完全避免了这些bug和坑。
自动渲染的示例如图1-xx所示。
方法渲染的示例如图1-xx所示。
1.23.10 导出任意数据
尽管table的工具栏内置了数据导出按钮，但有时可能需要通过方法去导出任意列中的数据，那么可以借助以下方法：
语法：table.exportFile(id, data, type)。
示例代码如图1-xx所示。
测试代码如下：
<!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;
//第一个实例
var mytable=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
}
]
]
});
$(document).ready(function (){
$("#exportButton1").click(function (){
var table = layui.table;
//将上述表格示例导出为csv文件
table.exportFile(mytable.config.id, mytable.data); //data为该实例中的任意数量的数据
});
$("#exportButton2").click(function (){
var table = layui.table;
//将上述表格示例导出为xls文件
table.exportFile(mytable.config.id, mytable.data,"xls"); //data为该实例中的任意数量的数据
});
$("#exportButton3").click(function (){
table.exportFile(['名字','性别','年龄'], [
['张三','男','20'],
['李四','女','18'],
['王五','女','19']
], 'xls'); //默认导出 csv，也可以为：xls
});
});
</script>
<input type="button" value="导出cvs" id="exportButton1" />
<br />
<input type="button" value="导出xls" id="exportButton2" />
<br />
<input type="button" value="导出xls" id="exportButton3" />
</body>
</html>
1.23.11 监听头部工具栏事件
点击头部工具栏区域设定了属性为lay-event=""的元素时触发，示例代码如图1-xx所示。
测试代码如下：
<!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>
<div id="mydiv" style="display: none;">
<button class="layui-btn layui-btn-sm" lay-event="add">增加</button>
<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
<button class="layui-btn layui-btn-sm" lay-event="update">修改</button>
</div>
<table id="demo" lay-filter="test"></table>
<script>
var table = layui.table;
//第一个实例
var mytable = table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
toolbar: "#mydiv",
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200,
sort: true,
fixed: 'left'
}, {
field: 'username',
title: '账号',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
sort: true
}
]
]
});
//监听事件
table.on('toolbar(test)', function(obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'add':
layer.msg('添加');
break;
case 'delete':
layer.msg('删除');
break;
case 'update':
layer.msg('编辑');
break;
};
});
</script>
</body>
</html>
1.23.12 监听行中checkbox状态的改变
点击复选框时触发，回调函数返回一个object参数，携带的成员如下：
table.on('checkbox(test)', function(obj){
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});
测试代码如下：
<!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;
//第一个实例
var mytable = table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
cols: [
[ //表头
{
field: '',
title: '',
type: "checkbox"
},
{
field: 'id',
title: 'ID',
width: 200,
}, {
field: 'username',
title: '账号',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
}
]
]
});
table.on('checkbox(test)', function(obj) {
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});
</script>
</body>
</html>
1.23.13 监听单元格编辑
单元格被编辑且值发生改变时触发，回调函数返回一个object参数，携带的成员如下：
table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
console.log(obj.value); //得到修改后的值
console.log(obj.field); //当前编辑的字段名
console.log(obj.data); //所在行的所有相关数据
});
测试代码如下：
<!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;
//第一个实例
var mytable = table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
cols: [
[ //表头
{
field: '',
title: '',
type: "checkbox"
},
{
field: 'id',
title: 'ID',
width: 200
}, {
field: 'username',
title: '账号',
width: 200,
edit: true
}, {
field: 'password',
title: '账号',
width: 200,
}
]
]
});
table.on('edit(test)', function(obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
console.log(obj.value); //得到修改后的值
console.log(obj.field); //当前编辑的字段名
console.log(obj.data); //所在行的所有相关数据
});
</script>
</body>
</html>
1.23.14 监听行单双击事件
点击或双击行时触发。
示例代码如下：
//监听行单击事件
table.on('row(test)', function(obj){
console.log(obj.tr) //得到当前行元素对象
console.log(obj.data) //得到当前行数据
//obj.del(); //删除当前行
//obj.update(fields) //修改当前行数据
});
//监听行双击事件
table.on('rowDouble(test)', function(obj){
//obj 同上
});
测试代码如下：
<!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;
//第一个实例
var mytable = table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
cols: [
[ //表头
{
field: '',
title: '',
type: "checkbox"
},
{
field: 'id',
title: 'ID',
width: 200
}, {
field: 'username',
title: '账号',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
}
]
]
});
//监听行单击事件
table.on('row(test)', function(obj) {
console.log("单击");
console.log(obj.tr) //得到当前行元素对象
console.log(obj.data) //得到当前行数据
//obj.del(); //删除当前行
//obj.update(fields) //修改当前行数据
});
//监听行双击事件
table.on('rowDouble(test)', function(obj) {
console.log("双击");
console.log(obj.tr) //得到当前行元素对象
console.log(obj.data) //得到当前行数据
});
</script>
</body>
</html>
1.23.15 监听排序切换
点击表头排序时触发，它通过在基础参数中设置autoSort: false时使用，以完成服务端的排序，而不是默认的前端排序。该事件的回调函数返回一个object参数，携带的成员如下：
//禁用前端自动排序，以便由服务端直接返回排序好的数据
table.render({
elem: '#id'
,autoSort: false //禁用前端自动排序
//,… //其它参数省略
});
//监听排序事件
table.on('sort(test)', function(obj){ //注：sort是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
console.log(obj.field); //当前排序的字段名
console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
console.log(this); //当前排序的 th 对象
//尽管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" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
var table = layui.table;
//第一个实例
var mytable = table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
autoSort: false,
cols: [
[ //表头
{
field: '',
title: '',
type: "checkbox"
},
{
field: 'id',
title: 'ID',
width: 200,
sort: true
}, {
field: 'username',
title: '账号',
width: 200
}, {
field: 'password',
title: '账号',
width: 200,
}
]
]
});
//监听排序事件
table.on('sort(test)', function(obj) { //注：sort是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
console.log(obj.field); //当前排序的字段名
console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
console.log(this); //当前排序的th对象
//尽管table自带排序功能，但并没有请求服务端。
//有些时候，可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序。
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
