将pbootcms后台模型颜色的多选改成色块输出的方法

用户有个需求，后台产品的模型有一个颜色多选，但是是文字，所以想输出色卡，后端和前端体现颜色。
由于pb原本后台不带有这个功能，所以需要小小的二开。
以下为操作步骤：
第一步，依次打开目录/APPs/admin/view/default/layui/layui.all.js
第二步打开layui.all.js文件
第三步，搜索下面代码找到
<span>"+n.tITle+"</span>
第四步：修改为下面的代码，然后保存

<span style=background:#"+n.title+">"+n.title+"</span>

第五步：去网站后台，全局配置，模型字段，颜色，修改，输入你要的色卡值，保存。
第六步：清理浏览器缓存，刷新页面查看效果，出现下图代表成功了一半。
第七步、前台输出（由于后台用了色卡代码，所以前端需要写颜色筛选样式），以官方默认的代码为例，原始效果如下。
修改代码如下：其实就是加了一个样式，录入了后台数值

{pboot:select field=ext_color}
<a href= "[select:link]" class="mb-3 btn {pboot:if('[select:value]'=='[select:current]')}btn-info{else}btn-light{/pboot:if}" style="background-color:#[select:value]">&nbsp;</a>
{/pboot:select}

也不算大型的二开，只是利用了JS调用数据库值然后输出的笨方法。原本色卡值的#字符是没有放在JS里的，是后台数值输出了#   例如#000，但是浏览器无法识别#所以转义了一串特殊字符，经过优化后，干脆#字符输出在了JS里，和前端HTML样式里，这样不管网址还是筛选值，都比较直观一点。

本文标签：

声明：本文由代码号注册/游客用户【之瑶】供稿发布，本站不对用户发布的将pbootcms后台模型颜色的多选改成色块输出的方法信息内容原创度和真实性等负责。如内容侵犯您的版权或其他权益，请留言并加以说明。站长审查之后若情况属实会及时为您删除。同时遵循 CC 4.0 BY-SA 版权协议，尊重和保护作者的劳动成果，转载请标明出处链接和本声明内容。本文作者：之瑶» https://www.ebingou.cn/dmh/13130.html

很赞哦！ ()