如何通过Layui定义模块实现下拉框读取字典表数据

Myth丶恋晨 2022-03-08 15:29 218阅读 0赞

# 缘起 #

日前，项目中有个页面是需要下拉框能够选出来一些数据库的字典选项，如下图  
![在这里插入图片描述][20190315144644657.png]  
其中的选项111和222是从数据库加载的，如果每个地方都需要去用ajax请求一下数据字典未免太过于麻烦，所以就实现了一个通用的功能，而因为项目中使用的是layui，layui是支持自定义模块已使用模块功能可以看到layui的文档上有写。  
![在这里插入图片描述][20190315144856698.png]  
下面就实现此功能的方式做一个记录。需要注意的是：虽然此处使用的是layui的模块扩展功能，但也完全可以不通过layui来实现。

# 实现步骤 #

## 加载layui，jquery ##

![在这里插入图片描述][2019031514521843.png]

## 代码 ##

编写三个文件，base.jsp，index.jsp，fsformat.js。  
其中base.jsp主要是用来引入jq和layui的包的，代码如下

### base.jsp ###

<%@page contentType="text/html"%>
    <%@page pageEncoding="UTF-8"%>
    <link href="css/layui.css" />
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="layui.all.js"></script>
    <script src="js/fsformat.js"></script>

而index.jsp是页面代码

### index.jsp ###

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>JSP Page</title>
            <jsp:include page="base.jsp" flush="true"></jsp:include>
        </head>
        <body>
        	选择：<select id="selDict" dict="DOSAGE_UNIT"></select>
        	<script> $(function(){ var form =layui.form, fsForm =layui.fsForm fsForm.renderDictAll('a1',true); }) </script>
     	</body>
    </html>

可以看到我们在select中自定义了一个属性`dict="DOSAGE_UNIT"`。这个就是具体的字典code，而在fsformat.js中就可以获取这个字典code然后去数据库或者redis中查询相应的字典项然后加载到select的option中。具体fsformat.js代码如下

### fsformat.js ###

[20190315144644657.png]: /images/20220308/e81715cb86e0470e9f334439afac9ef9.png
[20190315144856698.png]: /images/20220308/25f8b825832b410caa221b5fddac5e51.png
[2019031514521843.png]: /images/20220308/15a45764a6b4484ebc20616d0e3ae4f5.png