<think>我们正在讨论
Layui Table中添加
自定义按钮并支持提交，且不使用
工具栏toolbarTemplate的方法。
用户引用了一个关于
工具栏按钮失效的问题，但明确指出这不是他的需求，他想要不使用toolbarTemplate的方法。
根据
Layui的文档和常见用法，除了使用
工具栏模板（toolbarTemplate）外，还可以通过以下方式添加
自定义按钮：
1. 在表格的列定义中，使用
工具栏列（templet）来定义每一行的操作
按钮。
2. 在表格外部添加
自定义按钮，然后通过事件绑定来处理点击事件。
但是，用户特别提到不使用
工具栏（toolbarTable），所以我们不考虑在表格顶部
工具栏添加
按钮，而是考虑以下两种方法：
方法一：在表格的列中添加操作
按钮（每行都有
按钮）。
方法二：在表格外部添加
自定义按钮（整个表格的操作
按钮，例如提交整个表格的数据）。
用户提到“支持提交”，可能是想提交表格中的数据，所以我们需要根据
按钮的位置（每行还是整个表格）来处理。
下面分别说明：
方法一：在列中添加操作
按钮（适用于每行操作）
在表格的列配置中，使用templet
自定义模板，在模板中编写
按钮的
HTML，然后通过table.on('tool(filter)', ...)来监听
按钮事件。
方法二：在表格外部添加
自定义按钮（整个表格的操作）
在表格外面写一个
按钮，然后给这个
按钮绑定事件，在事件中获取表格数据并提交。
由于用户没有明确是每行
按钮还是整个表格的
按钮，我们可以提供两种方式的示例。
下面分别给出示例代码：
方法一：行内
按钮（每行一个提交
按钮）
假设我们有一列用于操作，
按钮放在这一列里。
```javascript
// 表格渲染
table.render({
elem: '#tableList',
url: '/your/url',
cols: [[
{field: 'id', title: 'ID'},
{field: 'username', title: '用户名'},
// 其他列...
{title: '操作', toolbar: '#rowToolbar'} // 使用
工具栏列，注意这里用toolbar属性指定模板
]],
// ... 其他配置
});
// 定义行
工具栏模板（注意：这个模板是放在页面某个script标签中的）
<script type="text/
html" id="rowToolbar">
<button class="
layui-btn
layui-btn-sm" lay-event="submit_row">提交</button>
</script>
// 监听行工具事件
table.on('tool(filterTableList)', function(obj){ // 注意这里的filter要与表格的lay-filter一致
var data = obj.data; // 获取当前行数据
if(obj.event === 'submit_row'){
// 提交该行数据
// 可以发送ajax请求
layer.msg('提交行：'+
JSON.stringify(data));
}
});
```
方法二：表格外部
按钮（整个表格的提交
按钮）
在表格外面放置一个
按钮，然后监听这个
按钮的点击事件，获取整个表格的数据（或选中的数据）并提交。
```
html
<button class="
layui-btn" id="submitBtn">提交表格</button>
<table id="tableList" lay-filter="filterTableList"></table>
```
```javascript
// 表格渲染
table.render({
elem: '#tableList',
url: '/your/url',
cols: [[...]], // 列配置
// ... 其他配置
});
// 外部
按钮事件
$('#submitBtn').on('click', function(){ // 这里用jQuery，也可以用
layui的button事件
// 获取整个表格的数据
var data = table.cache['tableList']; // 注意：这里缓存的是当前页所有数据，包括有修改的数据
// 或者如果你想获取所有数据（包括所有分页），可能需要重新从后端加载，或者前端缓存所有数据
// 如果只是提交当前页的数据，则可以使用上面的cache
// 提交数据
$.ajax({
url: '/submit/url',
type: 'POST',
contentType: 'application/
json',
data:
JSON.stringify(data),
success: function(res){
layer.msg('提交成功');
}
});
});
```
注意：在方法二中，table.cache['tableList'] 中的'tableList'是表格容器的id，注意大小写一致。
但是，用户的需求是“添加
自定义按钮并支持提交”，而且没有明确是行提交还是整个表格提交。因此，我们提供两种方案供用户选择。
考虑到用户之前可能遇到
工具栏按钮失效的问题，我们避免使用
工具栏模板（toolbar: '#toolbarTable'）的方式，而是采用上述两种方法。
另外，如果用户想要的是整个表格的顶部
工具栏（但又不使用toolbarTemplate），那么我们可以使用方法二（表格外部
按钮）来模拟一个
工具栏，把
按钮放在表格上方。
最后，我们生成相关问题。
注意：在代码中，我们使用了jQuery，如果用户没有使用jQuery，可以使用原生
JS或
layui的内置方法。
layui本身内置了jQuery的精简版（即$），所以可以直接使用$符号。
但是，如果用户不想用$，也可以使用
layui的form.on或者元素事件绑定：
```javascript
layui.use(['layer', 'table', 'jquery'], function(){
var layer =
layui.layer;
var table =
layui.table;
var $ =
layui.jquery;
// 上面的代码可以放在这里
});
// 或者使用
layui的事件绑定（无需jQuery）：
document.getElementById('submitBtn').addEventListener('click', function(){ ... });
```
不过，在
layui模块中，通常使用
layui.$（即内置的jQuery）来操作DOM，这样能确保在
layui的环境中运行。
综上所述，我们提供了两种不使用
工具栏模板（toolbarTable）的方法。
下面生成相关问题。
</think>在
Layui Table 中，不使用 `toolbarTable` 添加
自定义按钮并支持提交的方法主要有两种途径：
### ✅ 方法一：通过列操作栏添加
按钮（推荐）
在列配置中定义操作列，通过 `templet`
自定义按钮模板：
```javascript
table.render({
elem: '#tableList',
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '名称'},
{title: '操作', toolbar: '#actionTpl'} // 操作列
]],
// ...其他配置
});
//
按钮模板 (script标签放在table外部)
<script type="text/
html" id="actionTpl">
<button class="
layui-btn
layui-btn-xs" lay-event="submit">提交</button>
</script>
// 事件监听
table.on('tool(filterTableList)', function(obj){
if(obj.event === 'submit'){
const rowData = obj.data; // 获取当前行数据
// 发起提交请求
$.post('/submit-url', rowData, function(res){
layer.msg(res.msg);
});
}
});
```
**优势**：每行独立操作，支持行级数据提交[^1]。
### ✅ 方法二：外部独立
按钮
在表格容器外部添加
自定义按钮：
```
html
<button class="
layui-btn" id="batchSubmit">批量提交</button>
<table id="tableList" lay-filter="filterTableList"></table>
```
```javascript
$('#batchSubmit').click(function(){
const selected = table.checkStatus('tableList').data; // 获取选中数据
if(selected.length === 0) return layer.msg('请选择数据');
$.ajax({
url: '/batch-submit',
type: 'POST',
contentType: 'application/
json',
data:
JSON.stringify(selected),
success: function(res){
layer.msg(`成功提交${res.count}条数据`);
table.reload('tableList'); // 刷新表格
}
});
});
```
**适用场景**：批量操作或全局操作[^1]。
### 关键说明：
1. **事件绑定**：
- 行内
按钮使用 `table.on('tool(filter)')` 监听
- 外部
按钮使用常规 DOM 事件监听
2. **数据获取**：
- 单行数据：`obj.data`
- 多选数据：`table.checkStatus(id).data`
3. **表单验证**：
```javascript
// 在提交前添加验证
if(!validateData(rowData)) {
return layer.msg('数据校验失败');
}
```
> ⚠️ **注意事项**：
> - 确保
自定义按钮不在 `<table>` 标签内部
> - 使用 `lay-filter="filterTableList"` 需与事件监听中的名称一致
> - 批量操作需开启 `table` 的 `checkbox` 属性
###
扫一扫
2622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
