ftl 通过layui设置固定列之后按钮不展示
时间: 2023-08-22 15:03:34 浏览: 105
在使用FreeMarker(ftl)模板和layui设置固定列之后,如果按钮不展示,可能也是因为按钮被隐藏在了固定列的后面,导致无法显示出来。这个问题同样可以通过调整固定列和非固定列的顺序来解决。
具体的实现方法可以参考以下代码:
```html
<table class="layui-table" lay-size="sm">
<colgroup>
<col width="100">
<col width="150">
<col>
<col width="200">
<col width="200">
<col width="200">
<col width="100">
</colgroup>
<thead>
<tr>
<th rowspan="2">ID</th>
<th rowspan="2">用户名</th>
<th rowspan="2">性别</th>
<th colspan="3">联系方式</th>
<th rowspan="2">操作</th>
</tr>
<tr>
<th>手机</th>
<th>邮箱</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<#list userList as user>
<tr>
<td>${user.id}</td>
<td>${user.username}</td>
<td>${user.sex}</td>
<td>${user.phone}</td>
<td>${user.email}</td>
<td>${user.address}</td>
<td>
<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>
</td>
</tr>
</#list>
</tbody>
</table>
```
```js
layui.use(['table', 'form'], function() {
var table = layui.table;
// 渲染表格
table.render({
elem: '.layui-table',
cols: [[
{field: 'id', title: 'ID', fixed: 'left', width: 100},
{field: 'username', title: '用户名', fixed: 'left', width: 150},
{field: 'sex', title: '性别', width: 100},
{field: 'phone', title: '手机', width: 200},
{field: 'email', title: '邮箱', width: 200},
{field: 'address', title: '地址', width: 200},
{fixed: 'right', title: '操作', toolbar: '#toolbar', width: 100},
]],
data: [
// 数据
],
});
// 监听窗口大小变化
$(window).on('resize', function() {
var width = $('.layui-form').width();
$('.layui-table-box').css('width', width + 'px');
}).resize();
// 监听工具条按钮点击事件
table.on('toolbar', function(obj) {
switch(obj.event) {
case 'add':
// 添加操作
break;
case 'delete':
// 删除操作
break;
}
});
});
```
在这个例子中,使用了FreeMarker的语法来生成表格中的数据行,同时将操作列设置为固定列,并且将其放在了列的最后面,这样就可以保证操作按钮可以正常显示了。同时,在监听工具条按钮点击事件时,需要根据按钮的event属性来判断是哪个按钮被点击了,然后执行相应的操作。
阅读全文
相关推荐














<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <style> .content { padding: 15px; } i { margin-right: 10px; } .site-doc-icon li { width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #0099FF; cursor: pointer; color: #fff; border-radius: 50%; } .site-doc-icon li { display: inline-block; margin: 10px; } .site-doc-icon li { display: inline-block; } </style> </head> <body class="layui-layout-body"> <#include "head.ftl"> 首页 用户管理 分类管理 书评管理 统计占比 欢迎来到共享图书系统
<#include "bottom.ftl"> </body> <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="/js/axquery.js"></script> <script type="text/javascript" src="/js/template-web.js"></script> <script type="text/javascript" src="/layui/layui.all.js"></script> <script> layui.use([], function () { var $ = layui.jquery; //演示动画开始 $('.site-doc-icon .layui-anim').on('click', function () { var othis = $(this), anim = othis.data('anim'); //停止循环 if (othis.hasClass('layui-anim-loop')) { return othis.removeClass(anim); } othis.removeClass(anim); setTimeout(function () { othis.addClass(anim); }); //恢复渐隐 if (anim === 'layui-anim-fadeout') { setTimeout(function () { othis.removeClass(anim); }, 1300); } }); //演示动画结束 }) </script> </html>如何和后端交互的


