利用若依的数字字典进行下拉框的关联配置

利用若依的数字字典进行下拉框的关联配置

---

---

前言

由于目前参与的项目当中需要对于页面的下拉框需要出现关联关系，并且父和子的数据都是通过数据字典进行维护的。在此对开发文档进行记录避免之后忘记。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、数字字典配置

由于若依数字字典本身并没有多级关联关系所以只能对于父下拉框下的每一个项目再配置一个新的数字字典（本人目前是这么做的，如果有更好的方法可以在评论区交流）

配置时需要注意父下拉框下的项目名称与子数据字典创建时名称需要保持一致。

二、使用步骤

1.引入库

代码如下（示例）：

    $("#module").bind('change', function () {
        var option = $.form.selectSelects("module");
        var label='';
        if(option=='1'){
            label=[[${@dict.getLabel1('sys_module_type','1')}]];
        }else if (option =='2' ){
            label=[[${@dict.getLabel1('sys_module_type','2')}]];
        }else if (option =='3' ){
            label=[[${@dict.getLabel1('sys_module_type','3')}]];
        }
        $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "system/dict/list1",
            data: {
                "label": label
            },
            async: false,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $("#event").next().remove();
                $("#event").after($.common.dictToSelect(data, 0, 'event'));
            }
        });
    });

在需要有下拉框关联关系的页面需要添加一个异步函数来绑定父下拉框，在父下拉框更改之后通过异步加载的方式加载子下拉框。
这里的getLabel1是我修改若依本身的方法自己不过也大同小异，主要目的与原方法一致，自己重新创建方法主要是避免破坏原有的方法，因为这个方法是其他地方会调用。
注意：由于在异步方法中绑定了change事件对于父下拉框获得当前选中的下拉项的值，再调用service层的方法时“[[${@dict.getLabel1(‘sys_module_type’,‘3’)}]]” 传入的只能是一个固定的字符串，这也就是我为什么写的是if else if这种形式的判断。

/**
     * 根据字典类型和字典键值查询字典数据信息
     *
     * @param dictType 字典类型
     * @param dictValue 字典键值
     * @return 字典标签
     */
    public String getLabel1(String dictType, String dictValue)
    {
        return dictDataService.selectDictLabel1(dictType, dictValue);
    }

service 接口

String selectDictLabel1(String dictType, String dictValue);
    

service 接口实现类

/**
     * 根据字典类型和字典键值查询字典数据信息
     *
     * @param dictType  字典类型
     * @param dictValue 字典键值
     * @return 字典标签
     */
    public String selectDictLabel1(String dictType, String dictValue) {
        if (dictValue == null || dictValue.equals("")) {
            dictValue = "0";
        }
        return dictDataMapper.selectDictLabel(dictType, dictValue);
    }

Mapper 接口

/**
     * 根据字典类型和字典键值查询字典数据信息
     * 
     * @param dictType 字典类型
     * @param dictValue 字典键值
     * @return 字典标签
     */
    public String selectDictLabel(@Param("dictType") String dictType, @Param("dictValue") String dictValue);

Mapper xml

<select id="selectDictLabel" resultType="String">
		select dict_label from sys_dict_data
		where dict_type = #{dictType} and dict_value = #{dictValue}
	</select>

通过调用service层的方法对于数据库查询之后得到下拉框项的名称。
之后ajax方法根据url对于传入的label去数据库查询之后进行查找

@PostMapping("/list1")
  @ResponseBody
  public List<SysDictData> list1(String label)
  {
      List<SysDictData> list = dictTypeService.selectDictTypeList1(label);
      return list;
  }

		<sql id="selectDictDataVo">
        select dict_code, dict_sort, dict_label, dict_value, dict_type, css_class, list_class, is_default, status, create_by,  create_time, remark 
		from sys_dict_data
    </sql>
		<include refid="selectDictDataVo"/>
		where status = '0' and  DICT_TYPE =
		(SELECT DICT_TYPE FROM SYS_DICT_TYPE WHERE DICT_NAME = #{dictLabel})
		ORDER BY DICT_SORT ASC

	success: function (data) {
                $("#event").next().remove();
                $("#event").after($.common.dictToSelect(data, 0, 'event'));
            }

在将查到的数据展示到相应的子下拉框即可。
最终效果如图

总结

目前实现父下拉框与子下拉框的关联关系需要配置多个子数据字典，比较麻烦，不过配置一次就可以正常使用