Dcat-Admin SelectTable 表格选择器选择后显示用户头像和昵称

myaccountl 的个人博客 / 48 / 6 / 创建于 2年前 / 更新于 2年前

表格选择器使用请参考Dcat文档：

效果：

实现步骤：

app/Admin文件夹下新建 Grid 文件夹:

Grid 文件夹内新建类 RowSelectorCustom 继承 RowSelector 并重写 getTitle方法内容如下:

<?php
namespace App\Admin\Grid;
use Dcat\Admin\Grid\Tools\RowSelector;
use Illuminate\Support\Facades\Storage;
class RowSelectorCustom extends RowSelector
{
    // 重写标题获取方法
    protected function getTitle($row, $id)
    {
        // 处理图片显示路径
        $path = $row->user_pic;
        if (url()->isValidUrl($path) || mb_strpos($path, 'data:image') === 0) {
            $src = $path;
        } else {
            $src = Storage::disk(config('admin.upload.disk'))->url($path);
        }
        return <<<HTML
            <div class="show-img-info" style='display: flex;align-items: center;margin-top: 10px'>
                <img data-action='preview-img' src='{$src}' style='max-width:60px;max-height:60px;cursor:pointer;margin-right: 10px' class='img img-thumbnail'>
                <span>{$row->nickname}</span>
            </div>
        HTML;
    }
}

Grid 文件夹内新建类 GridCustom 继承 Grid 并重写 rowSelector 方法内容如下:

<?php
namespace App\Admin\Grid;
use Dcat\Admin\Grid;
class GridCustom extends Grid
{
    /**
     * @param  \Closure  $closure
     * @return Grid\Tools\RowSelector
     */
    public function rowSelector()
    {
        // 修改RowSelector 为 RowSelectorCustom
        return $this->rowSelector ?: ($this->rowSelector = new RowSelectorCustom($this));
    }
}

修改\vendor\dcat\laravel-admin\resources\assets\dcat\extra\select-table.js 文件：
找到renderDefault方法修改为以下内容：

// 单选
function renderDefault(selected, self, options) {
    let box = $(options.container),
        placeholder = box.find('.default-text'),
        option = box.find('.option');
    // 去除删除符号重复添加
    option.children('.pull-right').remove();
    // 删除原选中数据
    option.parents('.select-resource').children('.show-img-info').remove();
    var remove = $("<div class='pull-right ' style='font-weight:bold;cursor:pointer'>×</div>");
    var label = selected[0]['label'];
    // 判断如果服务端返回的label数据带有html标签则进行html显示
    if (/<[^>]+>/g.test(label)) {
        option.parents('.select-resource').append(label);
    } else {
        option.text(label)
    }
    option.append(remove);
    remove.on('click', function () {
        self.setKeys([]);
        placeholder.removeClass('d-none');
        option.addClass('d-none');
        // 删除当前点击的删除标签
        $(this).remove();
        // 判断如果label是html标签则删除添加html
        if (/<[^>]+>/g.test(label)) {
            option.parents('.select-resource').children('.show-img-info').remove();
        }
    });

切换到项目文件夹vendor/dcat/laravel-admin
1、运行npm install 安装前端依赖
2、运行npm run production 重新编译前端资源
3、运行静态资源发布命令：
php artisan admin:publish

新建表格选择器渲染类 UsersTable 使用自定义Grid GridCustom 进行表格渲染：

<?php
namespace App\Admin\Table;
use App\Admin\Grid\GridCustom;
use App\Admin\Repositories\User;
use Dcat\Admin\Grid;
use Dcat\Admin\Grid\LazyRenderable;
class UsersTable extends LazyRenderable
{
    public function grid(): Grid
    {
        return GridCustom::make(new User(), function (Grid $grid) {
            $grid->model()->orderByDesc('id');
            $grid->column('user_pic', '用户头像')->image('', 50, 50);
            $grid->column('nickname', '用户昵称');
            $grid->column('phone', '用户手机号');
            $grid->disableActions();
            $grid->disableFilterButton();
            $grid->filter(function (Grid\Filter $filter) {
                $filter->panel();
                $filter->expand();
                $filter->equal('phone', '用户手机号')->width(4);
                $filter->like('nickname', '用户昵称')->width(4);
            });
        });
    }
}

使用

在Form 表单中使用selectTable：
下面option中的数据处理是修改在编辑时数据填充的格式

    /**
     * Make a form builder.
     *
     * @return Form
     */
    protected function form()
    {
        return Form::make(new Model(), function (Form $form) {
            $form->display('id');
            $form->selectTable('user_id', '用户')
                ->from(UsersTable::make())
                ->options(function ($v) {
                    if (!$v) {
                        return [];
                    }
                    $users = User::whereIn('id', Helper::array($v))->get();
                    if (!$users) {
                        return [];
                    }
                    return $users->transform(function ($item) {
                        $path = $item->user_pic;
                        if (url()->isValidUrl($path) || mb_strpos($path, 'data:image') === 0) {
                            $src = $path;
                        } else {
                            $src = Storage::disk(config('admin.upload.disk'))->url($path);
                        }
                        $item->username = <<<HTML
            <div class="show-img-info" style='display: flex;align-items: center;margin-top: 10px'>
                <img data-action='preview-img' src='{$src}' style='max-width:60px;max-height:60px;cursor:pointer;margin-right: 10px' class='img img-thumbnail'>
                <span>{$item->nickname}</span>
            </div>
        HTML;
                        return $item;
                    })->pluck('username', 'id');
                })
                ->pluck('nickname', 'id')
                ->required();
        });
    }

还有另外一种方式为Jquery监听字段变化，当字段值发送变化时进行ajax请求获取到数据，然后再把ajax返回的值拼接成html插入到对应的位置

dcat

本作品采用《CC 协议》，转载必须注明作者和本文链接

myaccountl

25 声望

暂无个人描述~

4 人点赞

从小程序个人账户申请开始，带你一步步进行开发一个微信小程序，直到提交微信控制台上线发布。

以构建论坛项目 LaraBBS 为线索，展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。

讨论数量: 6

方圆百里找对手

24 声望

截个图啊

2年前评论

myaccountl （楼主）

效果截图文章开头就有

Natural

课程读者 112 声望 / 打工仔 @ 程序猿

修改 \vendor\dcat\laravel-admin\resources\assets\dcat\extra\select-table.js 文件不会修改到 js 的，因为发布资源 copy 的是 resource\dist 文件不是 resource\assets 文件，所以不知道你是怎么跑起来的，应该要重新打包一下，把 assets 下的文件编译到 dist 下吧？

2年前评论

myaccountl （楼主）

运行 php artisan admin:publish 重新发布资源文章中有说

Natural （作者）

@myaccountl php artisan admin:publish 这个命令一直 copy 得是 resource\dist 下的文件

myaccountl （楼主）

@Natural 是少了个步骤到./vender/dcat/laravel-admin 下 npm install 然后 npm run production 再运行 php artisan admin:publish

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

Dcat-Admin SelectTable 表格选择器选择后显示用户头像和昵称

表格选择器使用请参考Dcat文档：

效果：

实现步骤：

使用

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

Dcat-Admin SelectTable 表格选择器选择后显示用户头像和昵称

表格选择器使用请参考Dcat文档：

效果：

实现步骤：

使用

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录