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