FastAdmin 中的 formatter flag 分析

Posted 2020-11-21 f4nniu

FastAdmin 中的 formatter flag 分析

效果

首先看看效果，这里的文字和颜色可以根据数据改变。

这是系统自带的分类管理。

代码

功能在 publicassetsjsackendcategory.js。

{field: ‘flag‘, title: __(‘Flag‘), operate: false, formatter: Table.api.formatter.flag},

再来看看 Table.api.formatter.flag 在哪里。
publicassetsjs equire-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(‘ ‘);
                },