Dcat-Admin SelectTable 表格選擇器選擇後顯示使用者頭像和暱稱

myaccountl發表於2022-05-07

表格選擇器使用請參考Dcat文件：

欄位的使用《Dcat Admin 中文文件》

效果：

實現步驟：

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

執行靜態資源釋出命令：

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插入到對應的位置

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章