8. List of basic parameters
8.1. The following is a list of all the parameters currently supported by the table module:
9. cols-List of header parameters
10. templet-custom column template
10.1. Type: String, Default value: None.
10.2. By default, the content of the cell is output exactly as the content returned by the data interface. If you want to add links and other elements to a column of cells, you can easily achieve this with the help of this parameter. This is a very useful and powerful function, and your table content will be rich and varied.
10.3. Templet provides three ways to use, please choose the most suitable one according to the actual scene:
10.3.1. If the character volume of the custom template is too large, we recommend you to use [Method 1].
10.3.2. If the amount of characters in the custom template is moderate, or if you want to call external methods more conveniently, we recommend you to use [Method 2].
10.3.3. If the character volume of the custom template is small, we recommend you to use [Method 3].
10.4. Method 1: Bind the template selector.
<!-- 下面的{
{d.id}}是动态内容, 它对应数据接口返回的字段名。 -->
<script type="text/html" id="checkboxTpl">
<input type="checkbox" name="lock" value="{
{d.id}}" title="锁定" {
{ d.id == 10002 ? 'checked' : '' }} />
</script>
<script type="text/javascript">
layui.use(['table'], function(){
var table = layui.table;
table.render({
elem: '#test1' // 指定原始table容器的选择器
,url: 'UserPage.action' // 异步数据接口相关参数
,cols: [[ // 设置表头
,{
field: 'lock', title: '是否锁定', templet: '#checkboxTpl' // 自定义列模板
}
]]
});
});
</script>10.5. Method 2: Function escape.
<script type="text/javascript">
layui.use(['table'], function(){
var table = layui.table;
table.render({
elem: '#test1' // 指定原始table容器的选择器
,url: 'UserPage.action' // 异步数据接口相关参数
,cols: [[ // 设置表头
{field: 'sex', title: '性别', templet: function(d){
return '<input type="checkbox" name="sex" lay-text="女|男" lay-skin="switch" value="' + d.sex + '"' + (d.sex == '女' ? 'checked' : '') + ' />';
}}
]]
});
});
</script>10.6. Method 3: Assign template characters directly.
templet: '<div><a href="{
{d.id}}">{
{d.title}}</a></div>'11. toolbar-Bind toolbar template
11.1. By default, the template on the left side of the toolbar area of the table header contains similar operation buttons such as add, edit, and delete. If you want to add or change the left template, the toolbar parameter can be used together with the template.
<!-- 工具栏模板: -->
<script type="text/html" id="toolbarTpl">
<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="delete">删除</button>
<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
</div>
</script>
<script type="text/javascript">
layui.use(['table'], function(){
var table = layui.table;
table.render({
elem: '#test3' // 指定原始table容器的选择器
,toolbar: '#toolbarTpl' // 开启表格头部工具栏区域
});
});
</script>12. Asynchronous data interface
12.1. The asynchronous request of data consists of the following parameters:
13. done-callback when the data is rendered
13.1. Type: Function, Default value: None.
13.2. Whether it is asynchronous request data, or direct assignment of data, the callback will be triggered. You can use this callback to render some elements outside the table.
table.render({
done: function(res, curr, count){
// 如果是异步请求数据方式, res即为你接口返回的信息。
// 如果是直接赋值的方式, res即为: {data: [], count: 99}, data为当前页数据、count为数据总长度
console.log(res);
// 得到当前页码
console.log(curr);
// 得到数据总量
console.log(count);
}
});14. defaultToolbar-icon on the right side of the head toolbar
14.1. Type: Array, default value: ["filter","exports","print"].
14.2. This parameter can be freely configured with the icon button on the right side of the head toolbar. The value is an array and supports the following optional values:
- filter: Display the filter icon.
- exports: Display the export icon.
- print: Display the print icon.
14.3. Typesetting icons can be displayed according to the order of values, such as:
defaultToolbar: ['filter', 'print', 'exports']14.4. In addition, you can extend the icon button infinitely:
table.render({
defaultToolbar: ["filter", "exports", "print", { // 该参数可自由配置头部工具栏右侧的图标按钮
title: '提示' // 标题
,layEvent: 'tips' // 事件名, 用于toolbar事件中使用
,icon: 'layui-icon-tips' // 图标类名
}]
});15. text-custom text
15.1. Type: Object.
15.2. The table module will have some default text information built in. If you want to modify it, you can set the following parameters to achieve your goal.
table.render({ // 自定义文本, 如空数据时的异常提示等
text: {
none: '暂时还么有无数据' // 默认: 无数据。
}
});16. initSort-initial sort
16.1. Type: Object, Default value: None.
16.2. Used to sort by a field by default when the data table is rendered. Sorting method, asc: ascending order, desc: descending order, null: default sorting.
table.render({
initSort: {
field: 'id' // 排序字段, 对应cols设定的各字段名
,type: 'desc' // 排序方式, asc: 升序、desc: 降序、null: 默认排序
}
});17. height-set the height of the container
17.1. Type: Number/String, optional values are as follows:
18. Set the appearance of the table
18.1. Controlling the appearance of the table is mainly composed of the following parameters:
18.2. Examples
table.render({ // 其它参数在此省略
skin: 'line' // 行边框风格
,even: true // 开启隔行背景
,size: 'sm' // 小尺寸的表格
}); 19. Basic method
19.1. Basic usage is a key component of the table module. All methods currently open are as follows:
> table.set(options); // 设定全局默认参数。options即各项基础参数。
> table.on('event(filter)', callback); // 事件监听。event为内置事件名, filter为容器lay-filter设定的值。
> table.init(filter, options); // filter为容器lay-filter设定的值, options即各项基础参数。
> table.checkStatus(id); // 获取表格选中行。id即为id参数对应的值。
> table.render(options); // 用于表格方法级渲染, 核心方法。应该不用再过多解释了, 详见: 方法级渲染。
> table.reload(id, options); // 表格重载。
> table.resize(id); // 重置表格尺寸。
> table.exportFile(id, data, type); // 导出数据。20. Event monitoring
20.1. Syntax: table.on('event(filter)', callback); Note: event is the name of the built-in event, and filter is the value set by the container lay-filter.
20.2. The table module registers exclusive events in the Layui event mechanism. If you use layui.onevent() to customize module events, please do not occupy the table name.
20.3. By default, events are monitored by all table module containers, but if you only want to monitor a certain container, use event filters.
20.4. Assuming the original container is: <table class="layui-table" lay-filter="test"></table> then your event listener is written as follows:
// 以复选框事件为例
table.on('checkbox(test)', function(obj){
console.log(obj)
});21. Listen to head toolbar events
21.1. Triggered when you click an element whose attribute is set to lay-event="" in the toolbar area of the head. Such as:
<table id="test1" lay-filter="test1"></table>
table.on('toolbar(test2)', 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;
};
});22. Monitor check box selection
22.1. Triggered when the check box is clicked, the callback function returns an object parameter with the following members:
table.on('checkbox(test1)', function(obj){
console.log(obj.checked); // 当前是否选中状态
console.log(obj.data); // 选中行的相关数据
console.log(obj.type); // 如果触发的是全选, 则为: all; 如果触发的是单选, 则为: one
});23. Monitoring cell editing
23.1. Triggered when the cell is edited and the value changes, the callback function returns an object parameter with the following members:
table.on('edit(test1)', function(obj){ // 注: edit是固定事件名, test是table原始容器的属性lay-filter="对应的值"
console.log(obj.value); // 得到修改后的值
console.log(obj.field); // 当前编辑的字段名
console.log(obj.data); // 所在行的所有相关数据
});24. Monitor the double-click event of the line list
24.1. Triggered when a row is clicked or double-clicked.
// 监听行单击事件
table.on('row(test2)', function(obj){
console.log(obj.tr) // 得到当前行元素对象
console.log(obj.data) // 得到当前行数据
// obj.del(); // 删除当前行
// obj.update(fields) // 修改当前行数据
});
// 监听行双击事件
table.on('rowDouble(test3)', function(obj){
console.log(obj.tr) // 得到当前行元素对象
console.log(obj.data) // 得到当前行数据
// obj.del(); // 删除当前行
// obj.update(fields) // 修改当前行数据
});25. Monitor order switch
25.1. Triggered when you click the table header to sort. It is commonly used when autoSort: false is set in the basic parameters to complete the server-side sorting instead of the default front-end sorting. The callback function of this event returns an object parameter with the following members:
// 禁用前端自动排序, 以便由服务端直接返回排序好的数据
table.render({
elem: '#id'
,autoSort: false // 禁用前端自动排序。
});
// 监听排序事件
table.on('sort(test)', function(obj){ // 注: sort是工具条事件名, test是table原始容器的属性lay-filter="对应的值"
// 尽管我们的table自带排序功能, 但并没有请求服务端。
// 有些时候, 你可能需要根据当前排序的字段, 重新向服务端发送请求, 从而实现服务端排序, 如:
table.reload('idTest', {
initSort: obj // 记录初始排序, 如果不设的话, 将无法标记表头的排序状态。
,where: { // 请求参数
field: obj.field // 排序字段
,order: obj.type // 排序方式
}
});
layer.msg('服务端排序。order by ' + obj.field + ' ' + obj.type);
});26. Table overload
26.1. Many times, you need to reload the table. Such as data global search. The following methods can help you easily achieve this type of demand (you can choose one).
27. Examples
27.1. Create a new table_param.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table参数 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<h2>仅开启工具栏, 不显示左侧模板</h2>
<table id="test1" lay-filter="test1"></table>
<h2>让工具栏左侧显示默认的内置模板</h2>
<table id="test2" lay-filter="test2"></table>
<h2>指向自定义工具栏模板选择器</h2>
<table id="test3" lay-filter="test3"></table>
<h2>跨行跨列表格</h2>
<table class="layui-table" lay-data="{}">
<thead>
<tr>
<th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
<th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
<th lay-data="{align:'center'}" colspan="3">地址</th>
</tr>
<tr>
<th lay-data="{field:'province', width:80}">省</th>
<th lay-data="{field:'city', width:120}">市</th>
<th lay-data="{field:'county', width:300}">详细</th>
</tr>
</thead>
</table>
<!-- 工具栏模板: -->
<script type="text/html" id="toolbarTpl">
<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="delete">删除</button>
<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
</div>
</script>
<!-- 下面的{
{d.id}}是动态内容, 它对应数据接口返回的字段名。 -->
<script type="text/html" id="checkboxTpl">
<input type="checkbox" name="lock" value="{
{d.id}}" title="锁定" {
{ d.id == 10002 ? 'checked' : '' }} />
</script>
<script type="text/javascript">
layui.use(['table', 'layer'], function(){
var table = layui.table
,layer = layui.layer;
table.render({
elem: '#test1' // 指定原始table容器的选择器
,url: 'UserPage.action' // 异步数据接口相关参数
,method: 'post' // 接口http请求类型
,where: {token: Math.random()} // 接口的其它参数
,parseData: function(res){ //res 即为原始返回的数据
return {
"code": res.code, // 解析接口状态
"msg": res.msg, // 解析提示文本
"count": res.count, // 解析数据长度
"data": res.data // 解析数据列表
};
}
,request: { // 用于对分页请求的参数: page、limit重新设定名称
pageName: 'page' // 页码的参数名称, 默认: page
,limitName: 'limit' // 每页数据量的参数名, 默认: limit
}
,response: {
statusName: 'code' // 规定数据状态的字段名称, 默认: code
,statusCode: 1 // 规定成功的状态码, 默认: 0
,msgName: 'msg' // 规定状态信息的字段名称, 默认: msg
,countName: 'count' // 规定数据总数的字段名称, 默认: count
,dataName: 'data' // 规定数据列表的字段名称, 默认: data
}
,toolbar: true // 开启表格头部工具栏区域
,width: 1250 // 设定容器宽度
,cellMinWidth: 100 // 全局定义所有常规单元格的最小宽度
,page: true // 开启分页
,limit: 3 // 每页显示的条数
,limits: [3,6,9] // 每页条数的选择项
,title: '用户表1' // 定义table的大标题
,totalRow: true // 是否开启合计行区域
,text: { // 自定义文本, 如空数据时的异常提示等
none: '暂时还么有无数据' // 默认: 无数据。
}
,loading: true // 是否显示加载条
,initSort: {
field: 'id' // 排序字段, 对应 cols设定的各字段名
,type: 'desc' // 排序方式 , asc: 升序、desc: 降序、null: 默认排序
}
//,autoSort: false // 禁用前端自动排序
,defaultToolbar: ["filter", "exports", "print", { // 该参数可自由配置头部工具栏右侧的图标按钮
title: '提示' // 标题
,layEvent: 'tips' // 事件名, 用于toolbar事件中使用
,icon: 'layui-icon-tips' // 图标类名
}]
,cols: [[ // 设置表头
{type: 'checkbox', fixed: 'left', LAY_CHECKED: true}
,{
field: 'id', // 设定字段名
title: 'ID', // 设定标题名称
width: 150, // 设定列宽
minWidth: 120, // 局部定义当前常规单元格的最小宽度
hide: false, // 是否初始隐藏列
totalRowText: '合计', // 用于显示自定义的合计文本
unresize: true, // 是否禁用拖拽列宽
edit: 'text', // 单元格编辑类型
event: 'threeClick', // 自定义单元格点击事件名
style: 'color: #ff0000;', // 自定义单元格样式
align: 'center' // 单元格排列方式
}
,{field: 'username', title: '用户名'}
,{field: 'sex', title: '性别', templet: function(d){
return '<input type="checkbox" name="sex" lay-text="女|男" lay-skin="switch" value="' + d.sex + '"' + (d.sex == '女' ? 'checked' : '') + ' />';
}}
,{field: 'city', title: '城市'}
,{field: 'sign', title: '签名'}
,{field: 'experience', title: '积分', totalRow: true}
,{field: 'score', title: '评分', totalRow: true}
,{field: 'classify', title: '职业'}
,{field: 'wealth', title: '财富', totalRow: true, width: 200}
,{
field: 'lock', title: '是否锁定', templet: '#checkboxTpl' // 自定义列模板
}
]]
,done: function(res, curr, count){
// 如果是异步请求数据方式, res即为你接口返回的信息。
// 如果是直接赋值的方式, res即为: {data: [], count: 99}, data为当前页数据、count为数据总长度
console.log(res);
// 得到当前页码
console.log(curr);
// 得到数据总量
console.log(count);
}
});
table.render({
elem: '#test2' // 指定原始table容器的选择器
,height: 200 // 设定容器高度
,url: 'user.json' // 异步数据接口相关参数
,toolbar: 'default' // 开启表格头部工具栏区域
,skin: 'line' // 行边框风格
,even: true // 开启隔行背景
,size: 'sm' // 小尺寸的表格
// 默认 true, 即直接由 table组件在前端自动处理排序。若为 false, 则需自主排序, 通常由服务端直接返回排序好的数据。
,autoSort: true
,cols: [[ // 设置表头
{type: 'radio', fixed: 'left'}
,{field: 'id', title: 'ID', sort: true}
,{field: 'username', title: '用户名'}
,{field: 'sex', title: '性别'}
,{field: 'city', title: '城市'}
,{field: 'sign', title: '签名'}
,{field: 'experience', title: '积分'}
,{field: 'score', title: '评分'}
,{field: 'classify', title: '职业'}
,{field: 'wealth', title: '财富'}
]]
});
table.render({
elem: '#test3' // 指定原始table容器的选择器
,toolbar: '#toolbarTpl' // 开启表格头部工具栏区域
,cols: [[ // 设置表头
{type: 'numbers', fixed: 'left'}
,{field: 'id', title: 'ID'}
,{field: 'username', title: '用户名'}
,{field: 'sex', title: '性别'}
,{field: 'city', title: '城市'}
,{field: 'sign', title: '签名'}
,{field: 'experience', title: '积分'}
,{field: 'score', title: '评分'}
,{field: 'classify', title: '职业'}
,{field: 'wealth', title: '财富'}
]]
,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
}]
});
// 监听事件
table.on('toolbar(test1)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'tips':
layer.msg('提示');
break;
};
});
table.on('toolbar(test2)', 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;
};
});
table.on('toolbar(test3)', 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;
};
});
table.on('checkbox(test1)', function(obj){
console.log(obj.checked); // 当前是否选中状态
console.log(obj.data); // 选中行的相关数据
console.log(obj.type); // 如果触发的是全选, 则为: all; 如果触发的是单选, 则为: one
});
table.on('edit(test1)', function(obj){
console.log(obj.value); // 得到修改后的值
console.log(obj.field); // 当前编辑的字段名
console.log(obj.data); // 所在行的所有相关数据
});
table.on('row(test2)', function(obj){
console.log(obj.tr) // 得到当前行元素对象
console.log(obj.data) // 得到当前行数据
// obj.del(); // 删除当前行
// obj.update(fields) // 修改当前行数据
});
// 监听行双击事件
table.on('rowDouble(test3)', function(obj){
console.log(obj.tr) // 得到当前行元素对象
console.log(obj.data) // 得到当前行数据
// obj.del(); // 删除当前行
// obj.update(fields) // 修改当前行数据
});
});
</script>
</body>
</html>27.2. Create a new Data.java
package layuiTable;
import java.io.Serializable;
public class Data implements Serializable {
private static final long serialVersionUID = 1L;
private Integer id;
private String username;
private String sex;
private String city;
private String sign;
private Integer experience;
private Integer logins;
private Long wealth;
private String classify;
private Integer score;
public Data(Integer id, String username, String sex, String city, String sign, Integer experience, Integer logins, Long wealth, String classify, Integer score) {
this.id = id;
this.username = username;
this.sex = sex;
this.city = city;
this.sign = sign;
this.experience = experience;
this.logins = logins;
this.wealth = wealth;
this.classify = classify;
this.score = score;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
public String getSign() {
return sign;
}
public void setSign(String sign) {
this.sign = sign;
}
public Integer getExperience() {
return experience;
}
public void setExperience(Integer experience) {
this.experience = experience;
}
public Integer getLogins() {
return logins;
}
public void setLogins(Integer logins) {
this.logins = logins;
}
public Long getWealth() {
return wealth;
}
public void setWealth(Long wealth) {
this.wealth = wealth;
}
public String getClassify() {
return classify;
}
public void setClassify(String classify) {
this.classify = classify;
}
public Integer getScore() {
return score;
}
public void setScore(Integer score) {
this.score = score;
}
}27.3. New User.java
package layuiTable;
import java.io.Serializable;
import java.util.List;
public class User implements Serializable {
private static final long serialVersionUID = 1L;
private Integer code;
private String msg;
private Integer count;
private List<Data> data;
public User(Integer code, String msg, Integer count, List<Data> data) {
this.code = code;
this.msg = msg;
this.count = count;
this.data = data;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Integer getCount() {
return count;
}
public void setCount(Integer count) {
this.count = count;
}
public List<Data> getData() {
return data;
}
public void setData(List<Data> data) {
this.data = data;
}
}27.4. Add gson.jar
27.5. New UserPage.java
package layuiTable;
import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.io.IOException;
import java.util.Arrays;
import java.util.Enumeration;
import java.util.List;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
public class UserPage extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Enumeration<String> names = req.getParameterNames();
while(names.hasMoreElements()) {
String name = names.nextElement();
System.out.println(name + " = " + req.getParameter(name));
}
Enumeration<String> headerNames = req.getHeaderNames();
while(headerNames.hasMoreElements()) {
String headerName = headerNames.nextElement();
System.out.println(headerName + " = " + req.getHeader(headerName));
}
int page = Integer.parseInt(req.getParameter("page"));
int limit = Integer.parseInt(req.getParameter("limit"));
ServletContext servletContext = getServletContext();
File file = new File(servletContext.getRealPath("/user.json"));
BufferedReader br = new BufferedReader(new FileReader(file));
StringBuffer sb = new StringBuffer();
String read = null;
while((read = br.readLine()) != null) {
sb.append(read);
}
br.close();
Gson gson = new Gson();
User user = gson.fromJson(sb.toString(), User.class);
int size = user.getData().size();
Data[] dataArr = Arrays.copyOfRange(user.getData().toArray(new Data[size]), (page - 1) * limit, page * limit > size ? size : page * limit);
List<Data> dataList = Arrays.asList(dataArr);
user.setData(dataList);
resp.setHeader("Content-Type", "text/html; charset=UTF-8");
resp.getWriter().write(gson.toJson(user));
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}27.6. Running effect chart
