重庆做商城网站设计/充电宝关键词优化

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, 默认 namekeyVal: keyVal,            //自定义返回数据中value的key, 默认 valuekeySel: 'selected',         //自定义返回数据中selected的key, 默认 selectedkeyDis: 'disabled',         //自定义返回数据中disabled的key, 默认 disabledkeyChildren: 'children',    //联动多选自定义childrendelay: 0,                 //搜索延迟时间, 默认停止输入500ms后开始搜索direction: 'auto',          //多选下拉方向, auto|up|downresponse: {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);}@Overridepublic 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);}