《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：
1.23.5 cols表头参数一览表
cols表头参数如图1-xx所示。
1.23.5.1 width
width值类型Number/String。设定列宽，若不填写则自动分配；若填写，则支持值为：数字、百分比
测试代码如下：
<!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',
}, {
field: 'username',
title: '账号',
width: 500
}, {
field: 'password',
title: '账号',
width: "5%"
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.2 minWidth
minWidth值类型Number。局部定义当前常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级高于基础参数中的cellMinWidth。
测试代码如下：
<!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',
}, {
field: 'username',
title: '账号',
minWidth: 500
}, {
field: 'password',
title: '账号'
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.3 type
type值类型String，设定列类型，可选值有：
（1）normal（常规列，无需设定）
（2）checkbox（复选框列）
（3）radio（单选框列）
（4）numbers（序号列）
（5）space（空列）
1.23.5.3.1 checkbox
测试代码如下：
<!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: '',
title: '',
type: "checkbox"
},
{
field: 'id',
title: 'ID',
}, {
field: 'username',
title: '账号',
minWidth: 500
}, {
field: 'password',
title: '账号'
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.3.2 radio
测试代码如下：
<!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: '',
title: '',
type: "radio"
},
{
field: 'id',
title: 'ID',
}, {
field: 'username',
title: '账号',
minWidth: 500
}, {
field: 'password',
title: '账号'
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.3.3 numbers
测试代码如下：
<!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: '',
title: '',
type: "numbers"
},
{
field: 'id',
title: 'ID',
}, {
field: 'username',
title: '账号',
minWidth: 500
}, {
field: 'password',
title: '账号'
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.3.4 space
测试代码如下：
<!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: '',
title: '',
type: "space",
width: 100
},
{
field: 'id',
title: 'ID',
}, {
field: 'username',
title: '账号',
minWidth: 500
}, {
field: 'password',
title: '账号'
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.4 LAY_CHECKED
LAY_CHECKED值类型Boolean。是否全选状态（默认：false）。必须复选框列开启后才有效，如果设置true，则表示复选框默认全部选中。
测试代码如下：
<!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: '',
title: '',
type: "checkbox",
LAY_CHECKED: true
},
{
field: 'id',
title: 'ID',
}, {
field: 'username',
title: '账号',
minWidth: 500
}, {
field: 'password',
title: '账号'
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.5 fixed
fixed值类型String。固定列，可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。
注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。
测试代码如下：
<!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',
fixed: "left"
}, {
field: 'username',
title: '账号',
minWidth: 500
}, {
field: 'password',
title: '密码',
fixed: "right"
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.6 hide
hide值类型Boolean。是否初始隐藏列，默认：false。
测试代码如下：
<!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',
fixed: "left",
hide: true
}, {
field: 'username',
title: '账号',
minWidth: 500
}, {
field: 'password',
title: '密码',
fixed: "right"
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.7 totalRow
totalRow值类型Boolean/Object。是否开启该列的自动合计功能，默认：false。
当开启时，则默认由前端自动合计当前行数据。若接口直接返回了合计行数据，则优先读取接口合计行数据，格式如下：
{
"code": 0,
"msg": "",
"count": 1000,
"data": [{}, {}]
"totalRow": {
"score": "666"
,"experience": "999"
}
}
在totalRow中返回所需统计的列字段名和值即可。
另外，totalRow字段同样可以通过parseData回调来解析成为table组件所规定的数据格式。
文件new.html代码如下：
{
"code": 0,
"msg": "",
"count": 1000,
"data": [{
"id": 1,
"username": "username1",
"password": "password1"
},
{
"id": 2,
"username": "username2",
"password": "password2"
},
{
"id": 3,
"username": "username3",
"password": "password3"
}
],
"totalRow": {
"id": "8888888"
}
}
运行测试文件代码如下：
<!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, //开启分页
totalRow: true,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
}, {
field: 'username',
title: '账号',
}, {
field: 'password',
title: '密码',
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.8 totalRowText
totalRowText值类型String。用于显示自定义的合计文本。
文件new.html代码如下：
{
"code": 0,
"msg": "",
"count": 1000,
"data": [{
"id": 1,
"username": "username1",
"password": "password1"
},
{
"id": 2,
"username": "username2",
"password": "password2"
},
{
"id": 3,
"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, //开启分页
totalRow: true,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
totalRowText: "999999999"
}, {
field: 'username',
title: '账号',
}, {
field: 'password',
title: '密码',
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.9 sort
sort值类型Boolean。是否允许排序（默认：false）。如果设置true，则在对应的表头显示排序icon，从而对列开启排序功能。
注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对。比如：'贤心' > '2' > '100'，排序后可能并不是想要的结果。
测试代码如下：
<!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, //开启分页
totalRow: true,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
sort: true
}, {
field: 'username',
title: '账号',
}, {
field: 'password',
title: '密码',
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.10 unresize
unresize值类型Boolean。是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然也可以设置true来禁用该功能。
测试代码如下：
<!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, //开启分页
totalRow: true,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
}, {
field: 'username',
title: '账号',
unresize: true
}, {
field: 'password',
title: '密码',
}
]
]
});
</script>
</body>
</html>
1.23.5.11 edit
edit值类型String。单元格编辑类型（默认不开启）目前只支持：text（输入框）。
测试代码如下：
<!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, //开启分页
totalRow: true,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
}, {
field: 'username',
title: '账号',
edit: "text"
}, {
field: 'password',
title: '密码',
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.12 event
event值类型String。自定义单元格点击事件名，以便在tool事件中完成对该单元格的业务处理。
测试代码如下：
<!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, //开启分页
totalRow: true,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
}, {
field: 'username',
title: '账号',
event: "clickUsername",
}, {
field: 'password',
title: '密码',
}
]
]
});
//监听工具条
table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得lay-event对应的值（也可以是表头的event参数对应的值）
var tr = obj.tr; //获得当前行tr的DOM对象（如果有的话）
if (layEvent === 'clickUsername') { //查看
alert('点击username列了！');
}
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.13 style
style值类型String。自定义单元格样式。即传入CSS样式
测试代码如下：
<!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, //开启分页
totalRow: true,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
}, {
field: 'username',
title: '账号',
style: "color:red;font-size:30px",
}, {
field: 'password',
title: '密码',
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.14 align
align值类型String。单元格排列方式，可选值有：left（默认）、center（居中）、right（居右）。
测试代码如下：
<!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, //开启分页
totalRow: true,
cols: [
[ //表头
{
field: 'id',
title: 'ID',
align: "left",
}, {
field: 'username',
title: '账号',
align: "center",
}, {
field: 'password',
title: '密码',
align: "right",
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.15 colspan和rowspan
colspan值类型Number。单元格所占列数（默认：1）。一般用于多级表头
rowspan值类型Number。单元格所占行数（默认：1）。一般用于多级表头
测试代码如下：
<!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, //开启分页
totalRow: true,
cols: [
[ //标题栏
{
field: 'username',
title: '联系人',
rowspan: 2
} //rowspan即纵向跨越的单元格数
, {
field: 'phone',
title: '电话',
rowspan: 2
}, {
align: 'center',
title: '地址',
colspan: 3
} //colspan即横跨的单元格数，这种情况下不用设置field和width
],
[{
field: 'province',
title: '省',
}, {
field: 'city',
title: '市',
}, {
field: 'county',
title: '详细',
}]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.16 templet
templet值类型String，默认值无。自定义列模板，模板遵循laytpl语法。在默认情况下，单元格的内容是完全按照数据接口返回的content原样输出的，如果想对某列的单元格添加链接等其它元素，可以借助该参数来轻松实现，这是一个非常实用且强大的功能，表格内容会因此而丰富多样。
templet提供了三种使用方式，请结合实际场景选择最合适的一种：
（1）如果自定义模版的字符量太大，推荐采用【方式一】；
（2）如果自定义模板的字符量适中，或者想更方便地调用外部方法，推荐采用【方式二】；
（3）如果自定义模板的字符量很小，推荐采用【方式三】；
1.23.5.16.1 方式一：绑定模版选择器
示例代码如下：
table.render({
cols: [[
{field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
,{field:'id', title:'ID', width:100}
]]
});
等价于：
<th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章标题</th>
<th lay-data="{field:'id', width:100}">ID</th>
下述是templet对应的模板，它可以存放在页面的任意位置。模板遵循于laytpl语法，可读取到返回的所有数据，示例代码如下：
<script type="text/html" id="titleTpl">
<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
</script>
注意：上述的{{d.id}}、{{d.title}}是动态内容，它对应数据接口返回的字段名。除此之外，还可以读取到以下额外字段：序号{{d.LAY_INDEX}}。
由于模板遵循laytpl语法（建议细读laytpl文档），因此在模板中可以写任意脚本语句（如if else/for等），示例代码如下：
<script type="text/html" id="titleTpl">
{{# if(d.id < 100){ }}
<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
{{# } else { }}
{{d.title}}(普通用户)
{{# } }}
</script>
测试代码如下：
<!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>
function editPassword(userId){
alert(userId);
}
</script>
<script type="text/html" id="titleTpl_1">
<a href="/editUserinfo/{{d.id}}" class="layui-table-link">编辑{{d.id}}</a>
<a href="/deleteUserinfo/{{d.id}}" class="layui-table-link">删除{{d.id}}</a>
</script>
<script type="text/html" id="titleTpl_2">
{{# if (d.username=='username1'){ }}
<span style="red:red">我是span</span>
{{# } }}
{{# if (d.username=='username2'){ }}
<input type="button" value="我是button"/>
{{# } }}
{{# if (d.username=='username3'){ }}
<input type="text" value="我是text"/>
{{# } }}
</script>
<script type="text/html" id="titleTpl_3">
<a href="javascript:editPassword({{d.id}})" class="layui-table-link">{{d.id}}</a>
</script>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
cols: [
[ //表头
{
field: 'id',
title: 'ID',
templet: '#titleTpl_1'
}, {
field: 'username',
title: '账号',
templet: '#titleTpl_2'
}, {
field: 'password',
title: '账号',
templet: '#titleTpl_3'
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.16.2 方式二：函数转义
templet支持函数形式，函数返回一个参数d，包含接口返回的所有字段和数据，示例代码如下：
table.render({
cols: [[
{field:'title', title: '文章标题', width: 200
,templet: function(d){
return 'ID：'+ d.id +'，标题：<span style="color: #c00;">'+ d.title +'</span>'
}
}
,{field:'id', title:'ID', width:100}
]]
});
测试代码如下：
<!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>
function editPassword(userId) {
alert(userId);
}
</script>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200 //需要加此属性，不然出现bug，显示出下拉框。
}, {
field: 'username',
title: '账号',
}, {
field: 'password',
title: '账号',
templet: function(d) {
return "<input type='text' value='" + d.password + "'/>";
}
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.16.3 方式三：直接赋值模版字符
事实上，templet也可以直接是一段html内容，示例代码如下：
templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
注意：这里一定要被一层<div></div>包裹，否则无法读取到模板。
测试代码如下：
<!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>
function editPassword(userId) {
alert(userId);
}
</script>
<script>
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200
}, {
field: 'username',
title: '账号',
}, {
field: 'password',
title: '账号',
templet: "<div><span style='color:blue'>{{d.password}}</span></div>"
}
]
]
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.23.5.17 toolbar
类型：String，默认值无。toolbar值类型String绑定工具条模板，可以在每行对应的列中出现一些自定义的操作性按钮。
如果需要在表格的每一行加上“查看”、“编辑”、“删除”这样类似的操作按钮，tool参数就是为此而生，因此可以非常便捷地实现各种操作功能。tool参数和templet参数的使用方式完全类似，通常接受的是一个选择器，也可以是一段HTML字符，示例代码如下：
table.render({
cols: [[
{field:'id', title:'ID', width:100}
,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
]]
});
等价于：
<th lay-data="{field:'id', width:100}">ID</th>
<th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}"></th>
下述是toolbar对应的模板，它可以存放在页面的任意位置：
<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>
<!-- 这里同样支持 laytpl 语法，如： -->
{{# if(d.auth > 2){ }}
<a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
{{# } }}
</script>
注意：lay-event=""属性值是模板的关键所在，值可随意定义。
接下来可以借助table模块的工具条事件完成不同的操作功能：
//监听工具条
table.on('tool(test)', function(obj) {
//注：tool是工具条事件名，test是table原始容器的属性lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得lay-event对应的值（也可以是表头的event参数对应的值）
var tr = obj.tr; //获得当前行tr的DOM对象（如果有的话）
if (layEvent === 'detail') { //查看
//do somehing
} else if (layEvent === 'del') { //删除
layer.confirm('真的删除行么', function(index) {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if (layEvent === 'edit') { //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123',
title: 'xxx'
});
}
});
右上角自定义按钮配置代码如下：
table.render({ //其它参数在此省略
defaultToolbar: ['filter', 'print', 'exports', {
title: '提示', //标题
layEvent: 'LAYTABLE_TIPS', //事件名，用于toolbar事件中使用
icon: 'layui-icon-tips' //图标类名
}]
});
测试代码如下：
<!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({
elem: '#demo',
url: 'new.html', //数据接口
page: true, //开启分页
toolbar: true,
defaultToolbar: ['filter', 'print', 'exports', {
title: '我是自定义按钮', //标题
layEvent: 'myevent', //事件名，用于toolbar事件中使用
icon: 'layui-icon-tips' //图标类名
}],
cols: [
[ //表头
{
field: 'id',
title: 'ID',
width: 200
}, {
field: 'username',
title: '账号',
}, {
field: 'password',
title: '账号',
toolbar: '#barDemo'
}
]
]
});
//监听工具条
table.on('toolbar(test)', function(obj) {
var layEvent = obj.event;
if (layEvent === 'myevent') {
alert("自定义事件myevent");
}
});
//监听工具条
table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if (layEvent === 'detail') { //查看
alert("查看" + data.id);
} else if (layEvent === 'del') { //删除
layer.confirm('真的删除记录' + data.id + "吗？", function(index) {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if (layEvent === 'edit') { //编辑
alert("编辑" + data.id);
//同步更新缓存对应的值
obj.update({
username: 'xxxxxxxxxxx'
});
}
});
</script>
</body>
</html>
运行效果如图1-xx所示。
扫一扫
2225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
