(切图笔记)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
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/583915.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux创建Macvlan网络

最近在看Docker的网络&#xff0c;测试Macvlan部分时&#xff0c;发现Docker创建Macvlan与预期测试结果不一样。所以查阅了Linux下配置Macvlan&#xff0c;记录如下。 参考 1.Linux Macvlan 2.图解几个与Linux网络虚拟化相关的虚拟网卡-VETH/MACVLAN/MACVTAP/IPVLAN 3.创建ma…

Java8 - 更优雅的字符串连接(join)收集器 Collectors.joining

Java8中的字符串连接收集器 在JDK8中&#xff0c;可以采用函数式编程&#xff08;使用 Collectors.joining 收集器&#xff09;的方式对字符串进行更优雅的连接。 Collectors.joining 收集器 支持灵活的参数配置&#xff0c;可以指定字符串连接时的 分隔符&#xff0c;前缀 和…

Sentinel-3如何处理并下载LST数据-陆地表面温度”(Land Surface Temperature)

LST 通常指的是“陆地表面温度”&#xff08;Land Surface Temperature&#xff09;。陆地表面温度是指地球表面上陆地部分的温度&#xff0c;而不包括水体表面。LST 是遥感技术中一个重要的参数&#xff0c;可以通过卫星遥感等手段进行测量和监测。 陆地表面温度对于许多领域…

浅谈高并发以及三大利器:缓存、限流和降级

引言 高并发背景 互联网行业迅速发展&#xff0c;用户量剧增&#xff0c;系统面临巨大的并发请求压力。 软件系统有三个追求&#xff1a;高性能、高并发、高可用&#xff0c;俗称三高。三者既有区别也有联系&#xff0c;门门道道很多&#xff0c;全面讨论需要三天三夜&#…

kibana(elk)使用脚本统计重点URL访问次数

文章目录 前言一、Elasticsearch脚本是什么?二、使用步骤前言 在日常工作中,需要定期对系统中一些重点URL进行访问统计,这个时候就需要借助一些工具进行分析处理 一、Elasticsearch脚本是什么? Elasticsearch脚本是Elasticsearch中用于自定义数据处理和查询逻辑的脚本代码…

人工智能_机器学习072_SVM支持向量机_人脸识别模型训练_训练时间过长解决办法_数据降维_LFW人脸数据建模与C参数选择---人工智能工作笔记0112

我们先来看一下之前的代码: import numpy as np 导入数学计算库 from sklearn. svm import SVC 导入支持向量机 线性分类器 import matplotlib.pyplot as plt 加载人脸图片以后,我们用pyplot把人脸图片数据展示一下 from sklearn.model_selection import train_test_split 人脸…

Unity之组件的生命周期

PS&#xff1a;第二天&#xff0c;依旧在摸鱼学unity 一、组件的概念 我本身是由Web后端转到了游戏后端&#xff0c;最近因为工作原因在学ET框架。学到了 ECS 编程模式开发&#xff08;E —— Entity&#xff0c;C —— Component &#xff0c; S —— System&#xff09;实体、…

【rosbag】rosbag命令--查看提取bag中的内容

1.查看消息 rosbag info --.bag topics是其中的话题内容&#xff0c;/imu中只写了包含imu的数据&#xff0c;但是imu是9轴的&#xff0c;到底磁力计信息是否包含在其中呢&#xff1f; 2.将bag中的某个话题转为txt 将file_name.bag文件中topic_name话题的消息转换到Txt_name.…

mpegts.js使用指南

如何使用 mpegts.js 步骤 1: 引入 mpegts.js 库 在您的 HTML 文件中引入 mpegts.js&#xff1a; <script src"path/to/mpegts.min.js"></script>步骤 2: HTML 中添加视频标签 在 HTML 中添加 标签&#xff1a; <video id"videoElement"…

FreeRTOS学习--56讲 软件定时器

软件定时器&#xff1a; 用户可自定义定时器的周期&#xff0c;当指定时间到达后调用回调函数&#xff0c;用户在回调函数中处理信息 硬件定时器: 芯片自带的定时器模块&#xff0c;精度高&#xff0c;能触发中断&#xff0c;用户在中断服务函数中处理信息 软件定时器…

BIT-666 的 2023 年度总结

<<< 年度总结 >>> <<< 年度数据 >>> ◆ 发博情况 ◆ 学习成就 ◆ 代码提交 ◆ 博文表现 <<< 年度创作 >>> ◆ LLM - LLaMA2 <<< 年度风景 >>> ◆ 春 - 中关村软件园 - 百望山 ◆ 夏 - 乌兰…

Python开发一个电商平台历史价格查询软件

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 环境介绍: python 3.8 pycharm 专业版 第三方模块使用 requests ——> 发送 HTTP 请求 execjs ——> 用来执行JavaScript代码 pyecharts ——> 生成…

《微信小程序开发从入门到实战》学习六十五

6.4 交互API 6.4.5 页面滚动API 使用wx.pageScrollTo接口可使页面自动滚动到目标位置。该接口介绍Object参&#xff0c;该参支持属性如下所示&#xff1a; scrollTop&#xff1a;必填&#xff0c;滚动到页面的目标位置&#xff0c;单位为px duration&#xff1a;滚动动画的…

视频美颜sdk是什么?美颜sdk贴纸技术详解

如今&#xff0c;贴纸技术作为视频美颜的一个创新分支&#xff0c;为用户提供了更加丰富多彩的互动体验。本文将深入探讨视频美颜SDK中的贴纸技术&#xff0c;揭示其技术原理、应用场景以及未来发展趋势。 一、贴纸技术的背后&#xff1a;图像处理与人脸识别 这一步骤是实现贴…

关于IDEA中Git版本回滚整理

Git分区理解 git的版本回滚本质上就是回滚不同的分区&#xff0c;所以咱们有必要简单了解一下git的分区。git在本地有三大分区&#xff1a;暂存区、工作区、版本库。 暂存区: add后的代码&#xff0c;绿色。 **工作区&#xff1a;**正在编写&#xff0c;还未add的部分&#…

【Vue】事件修饰符详解

✨ 专栏介绍 在当今Web开发领域中&#xff0c;构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架&#xff0c;正是为了满足这些需求而诞生。它采用了MVVM架构模式&#xff0c;并通过数据驱动和组件化的方式&#xff0c;使…

【SpringBoot篇】详解Bean的管理(获取bean,bean的作用域,第三方bean)

文章目录 &#x1f354;Bean的获取&#x1f384;注入IOC容器对象⭐代码实现&#x1f6f8;根据bean的名称获取&#x1f6f8;根据bean的类型获取&#x1f6f8;根据bean的名称和类型获取 &#x1f384;Bean的作用域⭐代码实现&#x1f388;注意 &#x1f384;第三方Bean⭐代码实现…

设计模式-对象池模式

设计模式专栏 模式介绍模式特点应用场景对象池模式和工厂模式的区别代码示例Java实现对象池模式Python实现对象池模式 对象池模式在spring中的应用 模式介绍 对象池模式是一种创建型设计模式&#xff0c;它将对象预先创建并初始化后放入一个池中&#xff0c;以供其他对象使用。…

vue大屏-列表自动滚动vue-seamless-scroll

vue大屏-列表自动滚动vue-seamless-scroll vue-seamless-scroll的官方文档地址&#xff1a;https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/ 具体效果可到官方文档那里查看。 1、下载依赖 npm install vue-seamless-scroll --save2、使用例子 <template…

IDEA 2022.2 安装教程

1.下载2020.3版本IDEA 链接&#xff1a;https://pan.baidu.com/s/1IFK8VRjT7vM2VM75ToveGQ?pwd176m 提取码&#xff1a;176m 2.安装 下载完成后&#xff0c;双击exe安装包&#xff0c;出现IDEA安装欢迎首页&#xff1a; 3.将 ja - netfiltet 文件复制到idea安装目录附件 …