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() 

自定义复制

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

实现代码

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 大全