本文介绍layui数据表格中自定义工具栏的配置方法。通过设置toolbar参数，可传入模板选择器、HTML字符串或布尔值来启用工具栏。示例展示了如何定义查询、新增等按钮，并在table.render中配置相关参数以实现功能。
layui数据表格自定义工具栏配置详解
本文介绍layui数据表格中自定义工具栏的配置方法。
该功能旨在开启数据表格头部区域，以便添加自定义操作按钮。
实现此功能的关键参数为toolbar。
该参数的数据类型支持String、DOM对象或Boolean。
具体参数说明如下：
当toolbar设置为字符串如‘#toolbarDemo’时，表示指向自定义工具栏模板的选择器ID。
若直接传入HTML字符串如‘<div>xxx</div>’，则会将该字符串作为工具栏模板内容。
设置toolbar为true时，仅开启工具栏区域，不显示左侧的默认模板。
设置toolbar为‘default’时，工具栏左侧将显示内置的默认模板按钮。
文中示例采用第一种方式，即通过toolbar:'#toolbarDemo'调用预先定义好的工具栏模板选择器。
以下是功能实现的效果图展示。
以下是已封装好的自定义工具栏模板选择器的HTML代码。
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getSelect">查询</button>
<button class="layui-btn layui-btn-sm" lay-event="getInsert">新增</button>
<button class="layui-btn layui-btn-sm" lay-event="getUpdate">修改</button>
<button class="layui-btn layui-btn-sm" lay-event="getDelete">删除</button>
<button class="layui-btn layui-btn-sm" lay-event="getRefresh">刷新</button>
</div>
</script>接下来介绍具体的调用与配置方法。
使用前需确保页面已正确引用jquery库以及layui的css和js文件。
<link href="~/Contents/assets/layui/css/layui.css" rel="external nofollow" rel="stylesheet" />
<script src="~/Contents/js/jquery-3.3.1.min.js"></script>
<script src="~/Contents/assets/layui/layui.all.js"></script>
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#table',
url: 'SelectDepartment', //数据接口
page: true, //开启分页
cols: [[ //表头
{ type: 'numbers', title: '序号', align: 'center', width: 100 },
{ field: 'DepartmentNumber', title: '部门编号', align: 'center' },
{ field: 'Department', title: '部门名称', align: 'center' }
]],
id: 'table',
toolbar: '#toolbarDemo',//开启自定义工具行，指向自定义工具栏模板选择器
defaultToolbar: ['filter', 'print', 'exports']
});
});
代码中的toolbar: '#toolbarDemo'是实现此功能的关键配置项。
以上即为layui自定义工具栏的完整使用方法，供参考使用。