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

本文主要是介绍(切图笔记)layui表格单元格添加超链接 以及传参方法 亲测可用 附代码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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
}

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

这篇关于(切图笔记)layui表格单元格添加超链接 以及传参方法 亲测可用 附代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/547339

相关文章

Django开发时如何避免频繁发送短信验证码(python图文代码)

《Django开发时如何避免频繁发送短信验证码(python图文代码)》Django开发时,为防止频繁发送验证码,后端需用Redis限制请求频率,结合管道技术提升效率,通过生产者消费者模式解耦业务逻辑... 目录避免频繁发送 验证码1. www.chinasem.cn避免频繁发送 验证码逻辑分析2. 避免频繁

精选20个好玩又实用的的Python实战项目(有图文代码)

《精选20个好玩又实用的的Python实战项目(有图文代码)》文章介绍了20个实用Python项目,涵盖游戏开发、工具应用、图像处理、机器学习等,使用Tkinter、PIL、OpenCV、Kivy等库... 目录① 猜字游戏② 闹钟③ 骰子模拟器④ 二维码⑤ 语言检测⑥ 加密和解密⑦ URL缩短⑧ 音乐播放

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门:一行代码实现优雅重试精细控制:让重试按我

Python安装Pandas库的两种方法

《Python安装Pandas库的两种方法》本文介绍了三种安装PythonPandas库的方法,通过cmd命令行安装并解决版本冲突,手动下载whl文件安装,更换国内镜像源加速下载,最后建议用pipli... 目录方法一:cmd命令行执行pip install pandas方法二:找到pandas下载库,然后

Linux系统中查询JDK安装目录的几种常用方法

《Linux系统中查询JDK安装目录的几种常用方法》:本文主要介绍Linux系统中查询JDK安装目录的几种常用方法,方法分别是通过update-alternatives、Java命令、环境变量及目... 目录方法 1:通过update-alternatives查询(推荐)方法 2:检查所有已安装的 JDK方

SQL Server安装时候没有中文选项的解决方法

《SQLServer安装时候没有中文选项的解决方法》用户安装SQLServer时界面全英文,无中文选项,通过修改安装设置中的国家或地区为中文中国,重启安装程序后界面恢复中文,解决了问题,对SQLSe... 你是不是在安装SQL Server时候发现安装界面和别人不同,并且无论如何都没有中文选项?这个问题也

Java Thread中join方法使用举例详解

《JavaThread中join方法使用举例详解》JavaThread中join()方法主要是让调用改方法的thread完成run方法里面的东西后,在执行join()方法后面的代码,这篇文章主要介绍... 目录前言1.join()方法的定义和作用2.join()方法的三个重载版本3.join()方法的工作原

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

Spring Boot从main方法到内嵌Tomcat的全过程(自动化流程)

《SpringBoot从main方法到内嵌Tomcat的全过程(自动化流程)》SpringBoot启动始于main方法,创建SpringApplication实例,初始化上下文,准备环境,刷新容器并... 目录1. 入口:main方法2. SpringApplication初始化2.1 构造阶段3. 运行阶

Olingo分析和实践之ODataImpl详细分析(重要方法详解)

《Olingo分析和实践之ODataImpl详细分析(重要方法详解)》ODataImpl.java是ApacheOlingoOData框架的核心工厂类,负责创建序列化器、反序列化器和处理器等组件,... 目录概述主要职责类结构与继承关系核心功能分析1. 序列化器管理2. 反序列化器管理3. 处理器管理重要方