如何动态加载下拉搜索，合理利用字典库

最新推荐文章于 2022-08-30 10:48:14 发布

百羽

最新推荐文章于 2022-08-30 10:48:14 发布

阅读量310

点赞数

分类专栏：思考文章标签： java js html

本文链接：https://blog.csdn.net/RoyRaoHR/article/details/119568682

版权

思考专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在优化老项目的时候发现前端的下拉搜索值都是写死的，虽然有字典库，但是没有和字典库进行一个联动。
写死的例子：
1、页面展示
在这里插入图片描述
2、前端代码

<label class="layui-form-label layui-text">验证状态</label>
                    <div class="layui-input-inline">
                        <select name="validateStatus" id="validateStatus">
                            <option value="" selected>请选择</option>
                            <option value="0">待验证</option>
                            <option value="1">验证通过</option>
                            <option value="2">验证不通过</option>
                            <option value="3">无需验证</option>
                        </select>
                    </div>

3、展示的时候状态转换（这边的状态转换是通过前端实现）
展示：
在这里插入图片描述
转换前端代码

<script type="text/html" id="validateOperBar">
                {{# if(d.VALIDATE_STATUS == "0") {}}
                待验证
                {{# }else if(d.VALIDATE_STATUS == "1"){ }}
                验证通过
                {{# }else if(d.VALIDATE_STATUS == "2"){ }}
                验证不通过
                {{# }else if(d.VALIDATE_STATUS == "3"){ }}
                无需验证
                {{# }else{ }}
                {{#}}}
            </script>

写死的弊端：当字典值有变动，比如增加减少或者被更改，前端相应的下拉搜索也要做修改、如果后端代码也是直接通过SQL判断转换的字典值，那也要修改。一个变动就多个地方要修改，太麻烦

那我现在只想通过字典库的操作就实现下拉、页面展示的字典更改要怎么操作呢。
一：下拉框通过接口获取字典值，通过动态赋值（动态赋值的方法有很多，我这边只是简单介绍一下，不懂的自己baidu）
html页面：

<label class="layui-form-label layui-text">验证状态</label>
                    <div class="layui-input-inline">
                        <select name="validateStatus" id="validateStatus">
                            <option value="" selected>请选择</option>
                            <option v-for="validateStatus in validateStatusList" :value="validateStatus.code">{{validateStatus.value}}</option>
                        </select>
                    </div>

js动态获取

var initCmParam = function (data, list) {
        jsapi.httpPost(serviceBase + "/service/publish/getDictByCatalCode", function (result) {
            var param = result.data
            if (param) {
                if (list == "validateStatus") {
                    vm.$data.validateStatusList = param;
                } 
                nextTick();
            }
        }, {catalCode: data})
    }

二：页面展示通过后台封装的字典转换方法去进行状态的转换

// 字典状态转换
        dictHelper.transformToDictValue(list,"validateStatusName:validateStatus");

这是我自己封装好的一个方法，大概来讲就是在获取到分页数据后，再对分页数据进行一个处理

public Page seatListPage(Map<String, Object> queryParam) throws Exception {
        // 查出的分页数据
        Page page = repairBillDao.seatListPage(queryParam, split);
        List<Map<String, Object>> list = page.getData();
        if (CollectionUtils.isEmpty(list)) {
            return page;
        }
        // 对分页数据的状态进行转换
        dictHelper.transformToDictValue(list,"validateStatusName:validateStatus");

数据处理最后都是通过循环遍历匹配字典，把查询出来的相应字典值再塞进去

for (Object s : ls) {
            Map map = ObjectUtils.objectToMap(s);
            if (map.get("code").equals(key)) {
                ((Map) o).put(field, map.get("value"));
            }
        }