使用Dcat Admin 中的表格规格筛选器怎么渲染颜色选择器的选项,如#FFFFFF颜色怎是的是具体颜色不是这个文字

1. 运行环境

1). 当前使用的 Laravel 版本?

Laravel Framework 8.83.29

2). 当前使用的 php/php-fpm 版本?

PHP 版本:8.0

3). 当前系统

Windows 10

5). 相关软件版本

Nginx,mysql

2. 问题描述?

使用Dcat Admin 中的表格规格筛选器怎么渲染颜色选择器的选项,如#FFFFFF颜色怎是的是具体颜色不是这个文字

使用Dcat Admin 中的表格规格筛选器怎么渲染颜色选择器的选项,如#FFFFFF颜色怎是的是具体颜色不是这个文字

使用Dcat Admin 中的表格规格筛选器怎么渲染颜色选择器的选项,如#FFFFFF颜色怎是的是具体颜色不是这个文字

我这里想把在颜色选择器中选择后的颜色,在设置规格选择器的时候以颜色显示成一个方块,方便选择,让用户更直观,但是我这里添加的html代码被转义了

$brand_list = Brand::all()->pluck('brand_name', 'brand_id')->toArray();
$color_list = \App\Models\Product::query()->distinct()->pluck('color_name')->toArray();
//            $color_list = \App\Models\Product::query()->distinct()-    >pluck('color_name', 'color_name')->mapWithKeys(function ($item) {
//                // 将颜色值包装成包含 HTML 的选项
//                return [$item => '<div style="width: 20px; height: 20px;     background-color: '.$item.'; border-radius: 50%; display: inline-block;">    </div>'];
//            })->toArray();


  $factory_list = Factory::all()->pluck('factory_name', 'factory_id')->toArray();
 $grid->selector(function (Grid\Tools\Selector $selector) use ($brand_list,$color_list, $factory_list) {
            $selector->select('brand_id', '品牌', $brand_list);

//                $selector->select('color_name', '颜色', $color_list);
            // 自定义颜色渲染逻辑
            $selector->select('color_name', '颜色', $color_list);
            $selector->select('factory_name', '产地', $factory_list);
        });

3. 您期望得到的结果?

希望可以转化成颜色块选择,不是文字的

使用Dcat Admin 中的表格规格筛选器怎么渲染颜色选择器的选项,如#FFFFFF颜色怎是的是具体颜色不是这个文字

4. 您实际得到的结果?

实际我加上html代码后被转义,不加展示的是16进制的颜色

《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
Dcatplus-杨光
最佳答案

暂时没有好办法。只能自己调整dcat-admin 包里面的代码
找到 vendor/dcat/laravel-admin/resources/views/grid/selector.blade.php 21 行,把
{{ $option }} 改成 {!! $option !!}

这样你就可以使用

$selector->select('yanse', '颜色', [
                    1 => '<span style="display:inline-block;background-color:#FF0000;width:16px;height: 16px;"></span>',
                    2 => '<span style="display:inline-block;background-color:#3054dd;width:16px;height: 16px;"></span>',
                    3 => '<span style="display:inline-block;background-color:#ffb60f;width:16px;height: 16px;"></span>',
                    4 => '<span style="display:inline-block;background-color:#30ff48;width:16px;height: 16px;"></span>',
                ]);

Laravel

如果你想让选中的颜色块展示不一样的效果,可在vendor/dcat/laravel-admin/resources/views/grid/selector.blade.php 中 添加如下代码:

<style>
    .grid-selector .select-options a.active span{
        border: 2px solid #939393;
        width: 20px !important;
        height: 20px !important;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    }
</style>
2个月前 评论
讨论数量: 2
Dcatplus-杨光

暂时没有好办法。只能自己调整dcat-admin 包里面的代码
找到 vendor/dcat/laravel-admin/resources/views/grid/selector.blade.php 21 行,把
{{ $option }} 改成 {!! $option !!}

这样你就可以使用

$selector->select('yanse', '颜色', [
                    1 => '<span style="display:inline-block;background-color:#FF0000;width:16px;height: 16px;"></span>',
                    2 => '<span style="display:inline-block;background-color:#3054dd;width:16px;height: 16px;"></span>',
                    3 => '<span style="display:inline-block;background-color:#ffb60f;width:16px;height: 16px;"></span>',
                    4 => '<span style="display:inline-block;background-color:#30ff48;width:16px;height: 16px;"></span>',
                ]);

Laravel

如果你想让选中的颜色块展示不一样的效果,可在vendor/dcat/laravel-admin/resources/views/grid/selector.blade.php 中 添加如下代码:

<style>
    .grid-selector .select-options a.active span{
        border: 2px solid #939393;
        width: 20px !important;
        height: 20px !important;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    }
</style>
2个月前 评论

vendor/dcat/laravel-admin/resources/views/grid/selector.blade.php 21 行,把 {{ $option }} 改成 {!! $option !!}这里调整好是不是这里html代码都是原样输出了?但是效果挺好的 :+1: :+1:

2个月前 评论

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