layui table 表格数据显示超链接

本文介绍如何在layui框架中将后台返回的数据转化为表格中的超链接,并添加点击事件实现图片预览功能。通过自定义模板函数proofPicture,对特定列的数据进行处理,使其响应点击并触发lay-event事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

layui 显示后台返回数据,需要将某一列数据 转换为 超链接,进行点击事件

例子

layui table

cols: [[
            {field: 'imgList', title: '图片凭证', minWidth: 90, align: "center", templet: proofPicture}
        ]],
done: function (res, curr, count) {

}

js

function proofPicture(d) {
        var proofPicture = d.imgList;
        if ('' == proofPicture || null == proofPicture || undefined == proofPicture) {
            return '';
        }
        if(proofPicture.length > 0) {
            return '<a class="layui-blue" href="javascript:void(0);" lay-event="picture">图片凭证预览</a>'
        }
    }

效果

说明

将后台返回数据进行 超链接化,加上点击事件,再根据 layui 表格事件监听 lay-event,完成点击效果

lay-event 事件 可查看 https://blog.youkuaiyun.com/java__project/article/details/102972535

### 实现 Layui 表格列的超链接功能 在 Layui 中,可以通过 `templet` 自定义模板来实现表格列中的超链接功能。以下是具体的实现方法: #### 使用 `templet` 定义超链接 通过 `templet` 属性可以自定义单元格的内容显示方式。如果需要将某一列的数据转换为超链接形式,则可以在该属性中编写 HTML 和 JavaScript 来动态生成 `<a>` 标签。 ```javascript table.render({ elem: '#test', // 绑定到页面上的 DOM 元素 url: '/demo/table/user/', // 数据接口地址 cols: [[ {field: 'id', title: 'ID', width: 80}, { field: 'username', title: '用户名', templet: function (data) { return '<a href="/user/' + data.id + '">' + data.username + '</a>'; }, width: 150 } ]], page: true // 开启分页 }); ``` 上述代码片段展示了如何利用 `templet` 函数来自动生成带有超链接的单元格内容[^1]。 #### 动态绑定点击事件 除了静态生成超链接外,还可以通过绑定事件的方式增强交互体验。例如,在用户点击某个单元格时触发特定逻辑处理。 ```javascript table.on('tool(test)', function(obj){ var data = obj.data; // 获取当前行数据 if(obj.event === 'detail'){ layer.msg('ID:'+ data.id + ' 的详情'); } else if(obj.event === 'del'){ layer.confirm('真的删除么?', function(index){ obj.del(); // 删除对应行(tr)的DOM结构 layer.close(index); }); } else if(obj.event === 'edit'){ layer.alert('编辑行:<br>'+ JSON.stringify(data)); } }); ``` 此部分代码实现了当工具栏按钮被点击时执行相应动作的功能[^2]。 #### 注意事项 - 确保服务器端返回的数据字段名与前端配置一致。 - 如果涉及跨域请求,请确认 CORS 设置允许目标域名访问资源。 - 对于敏感操作如删除记录等建议增加二次验证机制提高安全性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值