版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq32933432/article/details/88574773
缘起
日前,项目中有个页面是需要下拉框能够选出来一些数据库的字典选项,如下图
其中的选项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)