缘起

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

实现步骤

加载layui，jquery

在这里插入图片描述

代码

编写三个文件，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

(function($){
	layui.define(['farmartDict'], function(exports){
		FsForm = function () {}
		FsForm.prototype.renderDictAll = function (formId, b) {
			var _this = $('#selDict');
			var dict = _this.attr("dict");
			console.log(dict)
			//此处拿到的dict即字典code，可以通过此字典code去数据库或者redis中查询相应的字典数据并加载到select中的option中。
			//此处为了简单去数据库中查询这一步骤没有写，而只是假设111和222为数据库查询出来的字典项
			_this.append("<option>111</option>");
			_this.append("<option>222</option>");
		}
		var fsForm = new FsForm();
		exports("fsForm", fsForm);
	})
})(jQuery)

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

缘起

实现步骤

加载layui，jquery

代码

base.jsp

index.jsp

fsformat.js

猜你喜欢