layui表格添加链接列_Layui表格列添加超链接

记录一下，需要用到templet属性，也就是自定义列模板

参考代码：

{ field: 'oddNumbers', width: 180, title: '单号', sort: true, fixed: 'left', templet: addLink },

addLink是个方法

function addLink(d) {

var addLink = d.oddNumbers;

if ('' == addLink || null == addLink || undefined == addLink) {

return '';

}

if (addLink.length > 0) {

return '' + d.oddNumbers + '';

}

layui 2.2.5 开始，templet 开始支持函数形式，函数返回一个参数 d，包含接口返回的所有字段和数据。

参考链接https://www.layui.com/demo/table/style.html　　https://www.layui.com/doc/modules/table.html#templet

这样界面就有超链接了，如下图

一般链接会打开一个tabs或弹窗或者其它，我用的弹窗，监听表格行，获取点击行数据，如下

table.on('tool(pcList)', function (obj) {

var checkStatus = obj.data;

var url = checkStatus.oddNumbers;

url = encodeURIComponent(url);

console.log(checkStatus.oddNumbers);//单号

layer.open({

type: 2,

title: '账票详细',

shadeClose: true,

shade: 0.8,

area: ['60%', '90%'],

content: 'newList.html?'+url

});

这样就ok了。

layui表格添加链接列_Layui表格列添加超链接相关推荐

layui表格添加链接列_Layui表格之多列合并展示
前言: 当我们在使用Layui的时候,有时表格中的列比较多,展示出来肯定是有问题的,这样就不得不舍弃一些列不展示,不展示是一种解决方案,但是更好的解决方案应该是合并展示. 实现效果: 实现代码参考: ...
layui清空表单数据_Layui表格初始化
然后加载和初始化layui的table模块,elem指定原始表格元素选择器(推荐id选择器),url是连接的数据接口. cols是表头的内容,field设定字段名,是表格数据列的唯一标识,字段名要和数 ...
layui table 全选过滤_layui表格(表单)的全选功能
最近在使用layui这个框架,其中有用到表格的全选功能,下面记录下我的使用.html文件需要引用的是layui.js和layui.css,但是上面两个文件又会引入其他文件.,如图所示, 所以建议从la ...
layui分页limit不显示_layui表格分页不生效怎么解决？
layui表格分页不生效(无法正常显示)怎么解决?下面本篇文章给大家介绍一下layui数据表格分页无法正常显示的解决方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 应该先利用l ...
layui根据name获取对象_layui表格行合并；解决侧边固定栏合并
实现效果图: 适配分页:全选: 后台嵌套数据: 获取数据后:渲染前操作: ,done:function(res){if(res.data){for(var i = 0;i<res.data.le ...
layui清空表单数据_layui表格怎么清空
监听复选框事件:var checkedArr=[]; table.on('checkbox(demo)', function(obj){if (obj.type=='all') . 输入代码:retu ...
c#给按钮添加链接_通达信软件添加外部链接的技巧
所谓工欲善其事,必先利其器.熟练的使用炒股软件可以大大的提升看盘的效率,节约很多的看盘的时间. 大家看下面这张图,这是绝大部分股民都在使用的行情软件:通达信.几乎所有的券商都提供这个软件给股民来看行情 ...
名编辑电子杂志大师教程 | 如何在电子杂志页面直接添加链接？
问题: 如何在电子杂志页面上直接添加链接,而不需要重新在PDF.Word或者其他源文件里面添加链接呢? 答: 如果您想在电子杂志页面添加链接,链接到其他图片或者网站,就动手按照以下的步骤一起来做吧: ...
phpexcel_cell 获取表格样式_Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行...
精品推荐国内稀缺优秀Java全栈课程-Vue+SpringBoot通讯录系统全新发布! Docker快速手上视频教程(无废话版)[免费] 作者:E-iceblue https://www.cnblo ...

layui表格添加链接列_Layui表格列添加超链接

layui表格添加链接列_Layui表格列添加超链接相关推荐

最新文章

热门文章