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