FastAdmin 中的 formatter flag 分析
FastAdmin 中的 formatter flag 分析
效果
首先看看效果,这里的文字和颜色可以根据数据改变。
这是系统自带的分类管理。
代码
功能在 \public\assets\js\backend\category.js。
{field: 'flag', title: __('Flag'), operate: false, formatter: Table.api.formatter.flag},
再来看看 Table.api.formatter.flag 在哪里。
\public\assets\js\require-table.js
flag: function (value, row, index) {
var that = this;
value = value === null ? '' : value.toString();
var colorArr = {index: 'success', hot: 'warning', recommend: 'danger', 'new': 'info'};
//如果字段列有定义custom
if (typeof this.custom !== 'undefined') {
colorArr = $.extend(colorArr, this.custom);
}
var field = this.field;
if (typeof this.customField !== 'undefined' && typeof row[this.customField] !== 'undefined') {
value = row[this.customField];
field = this.customField;
}
//渲染Flag
var html = [];
var arr = value.split(',');
$.each(arr, function (i, value) {
value = value === null ? '' : value.toString();
if (value == '')
return true;
var color = value && typeof colorArr[value] !== 'undefined' ? colorArr[value] : 'primary';
var display = typeof that.searchList !== 'undefined' && typeof that.searchList[value] !== 'undefined' ? that.searchList[value] : __(value.charAt(0).toUpperCase() + value.slice(1));
html.push('<a href="javascript:;" class="searchit" data-toggle="tooltip" title="' + __('Click to search %s', display) + '" data-field="' + field + '" data-value="' + value + '"><span class="label label-' + color + '">' + display + '</span></a>');
});
return html.join(' ');
},
所有文章为原创,如非授权,请勿转载。
我们要多多支持有创造能力的人,因为那是我们所有人的希望。
同时我们也希望成为有创造能力的人,我们支持开源,同时也支持正版。
🎈数码荔技正版软件商店🎈
【正版】微软 Office 365
【正版】老牌文件对比工具 Beyond Compare
【正版】JetBrains Idea Java IDE
不断学习,慢慢进步,做时间的朋友。
注意力 > 时间 > 金钱。 -- 建伟 F4nniu
我们要多多支持有创造能力的人,因为那是我们所有人的希望。
同时我们也希望成为有创造能力的人,我们支持开源,同时也支持正版。
🎈数码荔技正版软件商店🎈
【正版】微软 Office 365
【正版】老牌文件对比工具 Beyond Compare
【正版】JetBrains Idea Java IDE
不断学习,慢慢进步,做时间的朋友。
注意力 > 时间 > 金钱。 -- 建伟 F4nniu
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp