【FastAdmin】在页面中使用layui，以此引申使用颜色选择器示例

目录

1.首先在backend-init.js中定义依赖配置，路径：public/assets/js/backend-init.js

2.然后再你需要使用layui的地方引用即可

3.一个颜色选择器的示例

html完整示例：

js完整示例：

好看的layui使我喜欢他，但是在fastadmin中自动封装了layer，如果直接引用layui会有冲突报错，解决办法：
1.首先在backend-init.js中定义依赖配置，路径：public/assets/js/backend-init.js

require.config({
    paths: {
        'layui': '../layui/layui',
    },
    shim: {
        'layui': {
            deps: ['css!../layui/css/layui.css'],
            init: function () {
                return this.layui.config({dir: '/assets/js/layui/'});
            }
        }
    }
});

完整示例：

    

define(['backend'], function (Backend) {
    require.config({
        paths: {
            'layui': '../layui/layui',
        },
        shim: {
            'layui': {
                deps: ['css!../layui/css/layui.css'],
                init: function () {
                    return this.layui.config({dir: '/assets/js/layui/'});
                }
            }
        }
    });
});

2.然后再你需要使用layui的地方引用即可

    require(['layui'], function(undefined){
        layui.use(['form', 'upload'], function (form, upload) {
            
        });
    });

注意一：此处只能在js中使用，不能在html中直接使用

注意二：生产环境需要重新压缩打包JS
3.一个颜色选择器的示例

html完整示例：

 

   <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
     
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-title" class="form-control" name="row[title]" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Color')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="layui-form-item">
                    <div class="layui-input-inline" style="width: 120px;">
                        <input type="text" value="" name="row[color]" placeholder="请选择颜色" class="layui-input" id="c-color">
                    </div>
                    <div class="layui-inline" style="left: -11px;">
                        <div id="color-select-btn" class="layui-inline"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #1c97f5"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div>
                    </div>
                </div>
            </div>
        </div>
     
        <div class="form-group layer-footer">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
                <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            </div>
        </div>
    </form>

js完整示例：

   

 define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
     
        var Controller = {
            index: function () {
                // 初始化表格参数配置
                Table.api.init({
                    extend: {
                        index_url: 'ngh/color/index' + location.search,
                        add_url: 'ngh/color/add',
                        edit_url: 'ngh/color/edit',
                        del_url: '',
                        multi_url: 'ngh/color/multi',
                        import_url: 'ngh/color/import',
                        table: 'ngh_color',
                    }
                });
     
                var table = $("#table");
     
                // 初始化表格
                table.bootstrapTable({
                    url: $.fn.bootstrapTable.defaults.extend.index_url,
                    pk: 'id',
                    sortName: 'id',
                    columns: [
                        [
                            {field: 'id', title: __('Id')},
                            {field: 'title', title: __('Title'), operate: 'LIKE'},
                            {field: 'color', title: __('Color'), operate: 'LIKE'},
                            {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                        ]
                    ]
                });
     
                // 为表格绑定事件
                Table.api.bindevent(table);
            },
            add: function () {
                layui('#1c97f5');
                Controller.api.bindevent();
            },
            edit: function () {
                var color = $('#c-color').val();
                layui(color);
                Controller.api.bindevent();
            },
            api: {
                bindevent: function () {
                    Form.api.bindevent($("form[role=form]"));
                }
            }
        };
        return Controller;
    });
    function layui(value){
        require(['layui'], function(){
            layui.use(['colorpicker'], function(){
                var colorpicker = layui.colorpicker;
                // 初始化颜色选择器
                colorpicker.render({
                    elem: '#color-select-btn', // 绑定按钮
                    color: value, // 默认颜色
                    done: function(color){
                        // 将选择的色值填入目标输入框
                        $('#c-color').val(color);
                    }
                });
            });
        });
    }