Fastadmin后台增加图标字段的选择功能

最近在开发一个新的项目车辆救援小程序用Fastadmin开发的，用户要实现菜单自定义图标展示，其实很简单，因为后台都有现成的但是也有不会的所以就趁此机会写一篇使用方法，一是为了增强记忆，二是能帮助初次接触的开发者何乐而不为。步入正题

实现的目标后台管理图标中台显示

（图1）

(图2)

这里主要说一下后台实现的方法，因为前端无非就是循环调用后通过样式文件显示一下就行

如图1显示出来图标我们需要在JS文件中增加一些东西如下

 {field: 'icon', title: __('Icon'), formatter: Controller.api.formatter.icon},

当前字段名字可以自己去设定，然后在formatter方法下增加如下代码

icon: function (value, row, index) {
                    return '<span class="' + (!row.ismenu || row.status == 'hidden' ? 'text-muted' : '') + '"><i class="' + value + '"></i></span>';
                }
 //这个是在api:formatter下的

至此我们已经实现了图一的展示。

下面我们来增加添加或者修改页面里面字段的设定，示例图如下

我们需要在对应的html文件中增加如下的代码

<div class="form-group">
        <label for="icon" class="control-label col-xs-12 col-sm-2">{:__('Icon')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group input-groupp-md">
                <span class="input-group-addon"><i class="fa fa-circle-o" id="icon-style"></i></span>
                <input type="text" class="form-control" id="icon" name="row[icon]" value="fa fa-circle-o" />
                <a href="javascript:;" class="btn-search-icon input-group-addon">{:__('Search icon')}</a>
            </div>
        </div>
    </div>

然后还要增加一个图标搜索的模板文件这个文件随便放一般放在和使用该功能的同级目录在文件下创建例如tpl.html内容如下

<style>
    #chooseicon {
        margin:10px;
    }
    #chooseicon ul {
        margin:5px 0 0 0;
    }
    #chooseicon ul li{
        width:41px;height:42px;
        line-height:42px;
        border:1px solid #efefef;
        padding:1px;
        margin:1px;
        text-align: center;
        font-size:18px;
    }
    #chooseicon ul li:hover{
        border:1px solid #2c3e50;
        cursor:pointer;
    }
</style>
<script id="chooseicontpl" type="text/html">
    <div id="chooseicon">
        <div>
            <form onsubmit="return false;">
                <div class="input-group input-groupp-md">
                    <div class="input-group-addon">{:__('Search icon')}</div>
                    <input class="js-icon-search form-control" type="text" placeholder="">
                </div>
            </form>
        </div>
        <div>
            <ul class="list-inline">
                <% for(var i=0; i<iconlist.length; i++){ %>
                    <li data-font="<%=iconlist[i]%>" data-toggle="tooltip" title="<%=iconlist[i]%>">
                    <i class="fa fa-<%=iconlist[i]%>"></i>
                </li>
                <% } %>
            </ul>
        </div>

    </div>
</script>

放置位置如下图

我们需要在文件中引入一下，代码如下

{include file="user/rule/tpl" /}

做完上面的代码后离成功已经非常接近了，我们需要增加js文件对应的方法实现点击搜索图标展示出来所有的图标

直接上代码添加到api：下的bindevent中如下

var iconlist = [];
                var iconfunc = function () {
                    Layer.open({
                        type: 1,
                        area: ['99%', '98%'], //宽高
                        content: Template('chooseicontpl', {iconlist: iconlist})
                    });
                };
                Form.api.bindevent($("form[role=form]"), function (data) {
                    Fast.api.refreshmenu();
                });
                $(document).on('change keyup', "#icon", function () {
                    $(this).prev().find("i").prop("class", $(this).val());
                });
                $(document).on('click', ".btn-search-icon", function () {
                    if (iconlist.length == 0) {
                        $.get(Config.site.cdnurl + "/assets/libs/font-awesome/less/variables.less", function (ret) {
                            var exp = /fa-var-(.*):/ig;
                            var result;
                            while ((result = exp.exec(ret)) != null) {
                                iconlist.push(result[1]);
                            }
                            iconfunc();
                        });
                    } else {
                        iconfunc();
                    }
                });
                $(document).on('click', '#chooseicon ul li', function () {
                    $("input[name='row[icon]']").val('fa fa-' + $(this).data("font")).trigger("change");
                    Layer.closeAll();
                });
                $(document).on('keyup', 'input.js-icon-search', function () {
                    $("#chooseicon ul li").show();
                    if ($(this).val() != '') {
                        $("#chooseicon ul li:not([data-font*='" + $(this).val() + "'])").hide();
                    }
                });

至此我们已经完成了相关的设定了，多多学习多多实践会很容易上手的。