zoukankan      html  css  js  c++  java
  • FastAdmin 中的 formatter flag 分析

    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(' ');
                    },
    
  • 相关阅读:
    Elementui:选择框
    Cesium之Cesium3DTileStyle
    Cesium粒子系统:雨雪云效果
    Cesium之3dtiles模型选择问题
    3dtiles贴地
    Android ListView异步加载图片
    Android的硬件加速
    Android ANR
    每天一点Linux 查看Ubuntu的版本号
    Android log system
  • 原文地址:https://www.cnblogs.com/F4NNIU/p/9256793.html
Copyright © 2011-2022 走看看