laravel Dcat Admin 入门应用(七)列copyable和自定义copy

laravel Dcat Admin 入门应用(七)列copyable和自定义copy

Dcat Admin 是一个基于 Laravel-admin 二次开发而成的后台构建工具,只需很少的代码即可构建出一个功能完善的高颜值后台系统。支持页面一键生成 CURD 代码,内置丰富的后台常用组件,开箱即用,让开发者告别冗杂的 HTML 代码。
laravel Dcat Admin 入门应用(三)Grid 之 Column

福利彩蛋:没有好玩的 API 接口?上百款免费接口等你来,免费 API,免费 API 大全

copyable复制

系统自带列copy:方便快捷,但是不能满足自定义信息复制

    //当前类可以复制$grid->column('copy')->copyable() 

image.png

自定义复制

自定义复制,显示编号,点击复制:可以自定义需要复制的内容,不局限于显示的内容,
演示:

image.png

实现代码

js绑定和触发

首先在controller里面添加js脚本实现selector绑定和触发

    protected function script(){return <<<JS//绑定selector,触发的时候显示弹窗
$('.content-body').on('click', '.copy-author-id', function () {showCopy($(this))
})//点击 复制的是执行复制
$('body').on('click', '.custom-copy-id', function () {customCopy($(this))
})JS;}
页面渲染时候加载
     /*** 页面列表展示,可以附加一些页面设置** @param Content $content* @return Content*/public function index(Content $content){// 在这里可以引入你的js或css文件Admin::js(static::$js);// 需要在页面执行的JS代码,例如初始化代码// 通过 Admin::script 设置的JS代码会自动在所有JS脚本都加载完毕后执行Admin::script($this->script());//可以链式添加页面原始(html,js,css等)一个body相当于页面一个div.row层return $content->body($this->grid());}
grid列处理
//点击标题的时候复制标题对应的Id:其他需要复制的内容都可以放到data-content中$grid->column('title', admin_trans_field('nick_name'))->display(function ($title) {return "<span class='copy-author-id' data-content='" . encodeId($this->id) . "'>$title</span>";});
引入js copy文件
    public static $js = ['/js/previewImg.js'];

/js/previewImg.js 文件内容

    //显示信息copy的弹窗层function showCopy(that) {layer.closeAll()var sourceId = that.attr('data-content')var cp = ' <a class="custom-copy-id" href="javascript:;" data-content="' + sourceId + '" style="color:red;cursor: pointer;">复制ID</a>';var html = sourceId + cp;layer.tips(html, that, {tips: [1, 'black'], //还可配置颜色,area: ['auto', 'auto'],time: 10000,shadeClose:true,shade:0.01});}/*** 自定义copy** @param that*/function customCopy(that) {var content = that.data('content');var $temp = $('<input>');$("body").append($temp);$temp.val(content).select();document.execCommand("copy");$temp.remove();layer.closeAll()}

福利彩蛋:没有好玩的 API 接口?上百款免费接口等你来,免费 API,免费 API 大全

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

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

相关文章

Go语言测试第二弹——基准测试

在前一篇文章中&#xff0c;我们讲解了Go语言中最基础的单元测试&#xff0c;还没有看过的可以自行去查看&#xff0c;这篇文章我们详细了解Go语言里面的基准测试。 基准测试 基准测试&#xff0c;也就是BenchmarkTest&#xff0c;基准测试是用来测试代码性能的的一种方法&…

【机器学习300问】136、C4.5虽然改善了ID3决策树算法的部分缺点,但还是有不足,请问还有更好的算法吗?CART算法构建决策树

一、C4.5算法仍存在的不足 &#xff08;1&#xff09;计算效率不高 C4.5使用的信息增益率计算涉及熵的对数计算&#xff0c;特别是当属性值数量大时&#xff0c;计算成本较高。 &#xff08;2&#xff09;处理连续数值属性不够高效 ID3算法只能处理离散属性&#xff0c;需要预…

kafka学习笔记08

Springboot项目整合spring-kafka依赖包配置 有这种方式&#xff0c;就是可以是把之前test里的配置在这写上&#xff0c;用Bean注解上。 现在来介绍第二种方式&#xff1a; 1.添加kafka依赖&#xff1a; 2.添加kafka配置方式: 编写代码发送消息&#xff1a; 测试&#xff1a; …

c++11、14多线程从原理到线程池

c11、14多线程从原理到线程池 一.初识二.std::thread对象生命周期和线程等待与分离1.主线程不退出&#xff0c;thread对象被销毁&#xff0c;子线程仍然在运行。2.主线程阻塞&#xff0c;等待子线程退出3.子线程与主线程分离&#xff08;守护线程&#xff09; 三.线程创建的多种…

【Android面试八股文】请描诉Activity的启动流程,从点击图标开始。

当用户点击应用程序图标启动一个 Activity 时,涉及的整个流程可以梳理如下: 1. 用户点击应用程序图标 用户在设备的主屏幕或应用列表中点击应用程序图标,触发应用程序启动事件。 2. 系统接收启动请求 Intent 解析: 系统接收到用户点击事件后,会创建一个包含目标 Activi…

在实施数据加密时,有哪些常见的加密技术可供选择?

在实施数据加密时&#xff0c;有哪些常见的加密技术可供选择&#xff1f; 在实施数据加密时&#xff0c;有许多常见的加密技术可供选择&#xff0c;这些技术根据其原理、安全性、效率和适用场景有所不同。以下是一些常见的加密技术&#xff1a; 对称加密&#xff08;Symmetri…

Nuxtjs3教程

起步 官方文档 官方目录结构 安装 npx nuxi@latest init <project-name>后面跟着提示走就行 最后yarn run dev 启动项目访问localhost:3000即可 路由组件 app.vue为项目根组件 <nuxt-page />为路由显示入口 将app.vue更改内容如下 <template><d…

C# enum Enumeration Type 枚举

定义枚举使用枚举访问枚举值枚举与switch语句枚举特性枚举与位字段总结 在 C#中&#xff0c; enum 是一种特殊的值类型&#xff0c;它允许你为一组相关的常量定义一个名称。枚举提供了一种将一组整数值与更易读的名称关联起来的方法。 定义枚举 你可以使用 enum 关键字来定义…

C语言的数据结构:树与二叉树(哈夫曼树篇)

前言 上篇讲完了二叉树&#xff0c;二叉树的查找性能要比树好很多&#xff0c;如平衡二叉树保证左右两边节点层级相差不会大于1&#xff0c;其查找的时间复杂度仅为 l o g 2 n log_2n log2​n&#xff0c;在两边层级相同时&#xff0c;其查找速度接近于二分查找。1w条数据&am…

什么是中断?---STM32篇

目录 一&#xff0c;中断的概念 二&#xff0c;中断的意义 三&#xff0c;中断的优先级 四&#xff0c;中断的嵌套 如果一个高优先级的中断发生&#xff0c;它会立即打断当前正在处理的中断&#xff08;如果其优先级较低&#xff09;&#xff0c;并首先处理这个高优…

uniapp+php开发的全开源多端微商城完整系统源码.

uniappphp开发的全开源多端微商城完整系统源码. 全开源的基础商城销售功能的开源微商城。前端基于 uni-app&#xff0c;一端发布多端通用。 目前已经适配 H5、微信小程序、QQ小程序、Ios App、Android App。 采用该资源包做商城项目&#xff0c;可以节省大量的开发时间。 这…

网页摘要生成算法的一点探索

网页摘要生成算法是一个复杂的过程&#xff0c;涉及多个步骤和不同的技术。以下是一个基于参考文章信息的清晰回答&#xff0c;对网页摘要生成算法进行了分点表示和归纳&#xff1a; 1. 算法概述 网页摘要生成算法的主要目标是自动从网页内容中提取关键信息&#xff0c;并生成简…

【第8章】MyBatis-Plus持久层接口之ActiveRecord

文章目录 前言一、使用步骤1. 继承 Model 类2. 调用 CRUD 方法 二、使用提示总结 前言 ActiveRecord 模式是一种设计模式&#xff0c;它允许实体类直接与数据库进行交互&#xff0c;实体类既是领域模型又是数据访问对象。在 Mybatis-Plus 中&#xff0c;实体类只需继承 Model …

周边美食小程序系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;美食店铺管理&#xff0c;菜品分类管理&#xff0c;标签管理&#xff0c;菜品信息管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;美食店铺&#…

操作系统期末复习(选择题判断题(二))

选择题 1.临界区是。 A.一段共享数据区 B.一个缓冲区 C.一段互斥执行的程序段 D.一个互斥资源 2. 生产者一消费者问题中&#xff0c;当时表示缓冲池满。 A.inmod n out B&#xff08;in&#xff0b;1&#xff09;mod n out C.&#xff08;in-1&#xff09;mod n o…

基于SSM+Jsp的疫情居家办公OA系统

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

20-OWASP top10--XXS跨站脚本攻击

目录 什么是xxs&#xff1f; XSS漏洞出现的原因 XSS分类 反射型XSS 储存型XSS DOM型 XSS XSS漏洞复现 XSS的危害或能做什么&#xff1f; 劫持用户cookie 钓鱼登录 XSS获取键盘记录 同源策略 &#xff08;1&#xff09;什么是跨域 &#xff08;2&#xff09;同源策略…

面试官:MySQL并发事务是如何处理

1. 并发事务的挑战 开发人员在并发编程中经常面临安全性和一致性问题。通常采用同步机制和锁机制来解决这些问题&#xff0c;例如Java中的synchronized关键字和Lock接口。 2. MySQL并发事务情况 数据的读写操作基于数据页。并发事务可能存在的类型&#xff1a; 读/读读/写写…

Python 潮流周刊#58:最快运行原型的语言(摘要)

本周刊由 Python猫 出品&#xff0c;精心筛选国内外的 250 信息源&#xff0c;为你挑选最值得分享的文章、教程、开源项目、软件工具、播客和视频、热门话题等内容。愿景&#xff1a;帮助所有读者精进 Python 技术&#xff0c;并增长职业和副业的收入。 本期周刊分享了 12 篇文…

容易涨粉的视频素材有哪些?容易涨粉的爆款短素材库网站分享

如何挑选社交媒体视频素材&#xff1a;顶级视频库推荐 在社交媒体上脱颖而出&#xff0c;视频素材的选择至关重要。以下是一些顶级的视频素材网站推荐&#xff0c;不仅可以提升视频质量&#xff0c;还能帮助你吸引更多粉丝。 蛙学网&#xff1a;创意的源泉 作为创意和独特性的…