（切图笔记）layui表格单元格添加超链接 以及传参方法 亲测可用 附代码_layui table 超链接

layui在切图网日常的工作中常常用到，特别是它的layer弹窗，基本可以满足网站切图时候遇到的绝大多数弹窗的情况，参数比较丰富 灵活，是不可多得的网页插件之一，我见很多人说layui过时了，这是相比于vue正流行的情况下说的，不是所有的网页项目都需要上脚手架 vue数据渲染的方式， 在不同的场合下选择的合适的就好，以下layui表格单元格添加超链接 以及传参方法 亲测可用 附代码。

1.表格渲染中对列添加templet属性  addlink为方法名

tableIns = table.render({
elem: ‘#Test’
, url: ‘/Test’ //数据接口
, method: ‘POST’
, page: true //开启分页
, cols: [[ //表头
//{ type: “radio”, fixed: ‘left’, align: ‘center’ },
{ field: “Test”, align: ‘center’, title: ‘Test’, hide: true},
{ field: “Test1”, title: “Test1”, align: ‘center’, templet: addlink },
{ field: “Test2”, title: “Test2”, align: ‘center’ },
{ field: “Test3”, title: “Test3”, align: ‘center’ },
{ field: “Test4”, title: “Test4”, align: ‘center’ }
]],
parseData: function (res) { //res 即为原始返回的数据
return {
“code”: res.state, //解析接口状态
“msg”: res.message, //解析提示文本
“count”: count, //解析数据长度
“data”: (JSON.parse(res.data)).data //解析数据列表
};
}
});

2.添加事件监听

//事件监听
table.on(‘tool(TEST)’, function (obj) {
var data = obj.data;//获取监听点击当前行的所有信息[object，object]
var url = “http://TEST?requestid=” + data.xxx;
window.open(url);
});

3.定义方法

var addlink = function (d) {
var html = ‘<div><a rel=”nofollow” style=”color:#1E9FFF” href=”javascript:void(0);” lay-event=”showRec”>’ + d.TEST1+ ‘</a></div>’;
return html
}

记录平常的切图遇到过的问题 ，做笔记 分享出来 ，也方便以后用到的时候查找。