LayUI多选FormSelects，并实现数据回显

1、前言

链接：https://fly.layui.com/extend/formSelects/

基于 layui 的 select 多选解决方案。支持：多选、分组、取值&赋值、选择监听、搜索、启用&禁用、多选皮肤、重复选、下拉方向、显示数量、选择数、 远程搜索、动态数据、动态创建、 搜索过滤 、快捷操作、选项模板 、多级联动等。

但根据目前FormSelects官方提供的文档，并没有说明编辑时数据如何回显，于是我花了一天的时间进行不断的尝试，终于成功了。

首先在表中建supplierNames字段，用来保存选择后的数据， 在编辑时读取表中supplierNames数据保存到隐藏域，最后使用formSelects.data与 formSelects.value进行回显。

2、前端html

<div class="layui-col-xs6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">供应商：</label>
                            <div class="layui-input-block">
                                <select name="supplierNames" xm-select="supplierSelect" xm-select-search="/common/search/supplier" xm-select-skin="normal">
                                    <option value="">搜索供应商</option>
                                </select>
                                <input type="hidden" th:value="${editInfo.supplierNames}" id="supplierNames">
                                
                            </div>
                        </div>
                    </div>

3、前台脚本实现

3.1、下载源码并配置

layui.config({
    base: BASE_PATH + 'static/plugins/',
    version: 'v2.5.7' // 插件版本号
}).extend({
    formSelects: 'lay-formselect/formSelects-v4',
 });

3.2、在编辑页引入formSelects

layui.use(['element', 'layer', 'form','formSelects'], function () {
        var $ = layui.$, layer = layui.layer, formSelects = layui.formSelects;
        //配置
        formKit.initFormSelects(formSelects, 'supplierSelect', 'name', 'name', $("#supplierNames").val())
 })

3.3、具体实现

initFormSelects: function (formSelects, xmSelect, keyName, keyVal, datas) {
        formSelects.config('supplierSelect', {
            type: 'get',
            header: {},
            data: {},
            searchUrl: '',
            searchName: 'keyword',      //自定义搜索内容的key值
            searchVal: '',              //自定义搜索内容, 搜素一次后失效, 优先级高于搜索框中的值
            keyName: keyName,            //自定义返回数据中name的key, 默认 name
            keyVal: keyVal,            //自定义返回数据中value的key, 默认 value
            keySel: 'selected',         //自定义返回数据中selected的key, 默认 selected
            keyDis: 'disabled',         //自定义返回数据中disabled的key, 默认 disabled
            keyChildren: 'children',    //联动多选自定义children
            delay: 0,                 //搜索延迟时间, 默认停止输入500ms后开始搜索
            direction: 'auto',          //多选下拉方向, auto|up|down
            response: {
                statusCode: 200,
                statusName: 'code',
                msgName: 'msg',
                dataName: 'data'
            },
            success: function(id, url, searchVal, result){
                console.log("result===", result)
            },
            error: function(id, url, searchVal, err){           //使用远程方式的error回调
                adminKit.errorMsg(err.msg);
            },
            beforeSuccess: function(id, url, searchVal, result){        //success之前的回调, 干嘛呢? 处理数据的, 如果后台不想修改数据, 你也不想修改源码, 那就用这种方式处理下数据结构吧
                return result;  //必须return一个结果, 这个结果要符合对应的数据结构
            },
            beforeSearch: function(id, url, searchVal){         //搜索前调用此方法, return true将触发搜索, 否则不触发
                return searchVal;

            },
            clearInput: false,
        }, false);

        //数据回显
        if(datas && datas.length > 0){
            var dataArr = datas.split(',');
            var keys = [];
            dataArr.forEach(function (data) {
                var temp = {"name":data, "value":data}
                keys.push(temp);
            })
            formSelects.data('supplierSelect', 'local', {
                arr: keys
            });
            formSelects.value('supplierSelect', dataArr);
        }


    }

4、后台数据读取

@GetMapping(value = "search/supplier")
    public R searchSupplier(String keyword) {
        List<BaseSupplier> suppliers = supplierService.searchSupplier(keyword);
        return R.ok(suppliers);
    }



 @Override
    public List<BaseSupplier> searchSupplier(String keyword) {
        LambdaQueryWrapper<BaseSupplier> queryWrapper = new LambdaQueryWrapper<>();
        if(StrUtil.isNotBlank(keyword)){
            if(!ShiroUtil.isSuperAdmin()){
                queryWrapper.eq(BaseSupplier::getStoreId, ShiroUtil.getStoreId());
            }
            queryWrapper.isNotNull(BaseSupplier::getName);
            queryWrapper.like(BaseSupplier::getName, keyword).or().like(BaseSupplier::getCode, keyword);
        }
        return super.list(queryWrapper);
    }