English
资源说明：在本文中，我们将深入探讨如何将layui的toolbar与template功能结合使用，以便在表格操作列中实现自适应的显示效果，比如根据表格行数据的特定条件来改变操作栏的展示方式，例如在单双行数据中展示不同的操作按钮。下面我们将详细介绍这个过程。
layui的toolbar是一个强大的工具栏模块，它可以方便地在表格上方添加一排操作按钮，而template则是layui的模板引擎，用于动态渲染和处理HTML内容。两者的结合使用可以实现更灵活的数据交互和界面定制。
在HTML代码中，我们需要定义一个toolbar，它会引用我们即将创建的模板。例如：
```html
```
这里的`lay-event="toolbarEvent"`用于指定当点击toolbar按钮时触发的事件。
接下来，我们需要编写一个模板，这个模板将根据表格数据动态生成操作列的内容。在layui中，我们可以使用laytpl来进行模板的编写。假设我们创建了一个名为`toolbarTpl`的模板：
```html
```
在这个模板中，`d`是对当前表格行数据的对象引用，`d.fileType`表示该行数据的某列值。模板的逻辑是，如果`fileType`是`'txt'`或`'jpg'`，则展示下载和预览操作，否则展示编辑和删除操作。
在JavaScript部分，我们需要初始化layui表格，并在toolbar事件中调用模板并渲染：
```javascript
layui.use(['table', 'form'], function () {
var table = layui.table,
form = layui.form;
// 初始化表格
table.render({
elem: '#demo',
url: 'data.json', // 假设这是你的数据接口
cols: [[ // 表头配置
// 列配置...
]],
toolbar: '#toolbarTpl'
});
// 监听toolbar事件
table.on('toolbar(test)', function (obj) {
var data = obj.data; // 当前行的数据
laytpl(document.getElementById('toolbarTpl')).render(data, function(html){
obj.event === 'toolbarEvent' && $(obj.elem).next().html(html);
});
});
});
```
以上代码首先加载了layui的table和form模块，然后初始化了表格，并设置了toolbar为`'#toolbarTpl'`，即我们的模板ID。接着，我们监听了toolbar的`toolbarEvent`，当点击toolbar按钮时，获取当前行的数据，使用laytpl渲染模板，并将生成的HTML内容插入到toolbar对应的元素中。
通过这种方式，我们可以根据表格行数据的条件，动态生成操作列的内容，实现自适应的界面展示。这种方法在处理复杂的数据交互和定制化需求时非常有用，使得我们的应用更加灵活和人性化。
自定义toolbar
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
