layui自定义模块实现下拉框，读取数据字典数据

项目中页面很多下拉框，都是调用数据字典表数据，例如性别：男，女，；删除状态：已删除，正常。

如果每个地方都用ajax调用，过于麻烦，代码越多，维护工作就越麻烦。故使用layui自定义模块实现统一操作。

先看下效果：

项目情况

因为我项目使用的springboot+tymeleaf+layui，layui扩展用了layuimini.

直接上代码

项目结构如下：

1.新建dict.js

/*** 扩展layui组件*/layui.define(["element","jquery"], function(exports){var element = layui.element,$ = layui.$;FsForm = function () {}FsForm.prototype.renderDictAll = function (formId, b) {var element = layui.element,$ = layui.$;$.ajaxSettings.async = false; //设置为同步，否则layui会先渲染表格，导致数据显示不出来//此处拿到的dict即字典code，可以通过此字典code去数据库或者redis中查询相应的字典数据并加载到select中的option中。$('.selDict').each(function(){var _this = $(this);var dict = _this.attr("dict");console.log(dict)$.get("/sys/dict/getDictItems/"+dict, function(data){//后台获取数据，这里需要根据返回数据，自己调整。我这里返回数据见下面代码console.log(data);if(data.result!=null){$.each(data.result,function(index,m){_this.append("<option value='"+m.value+"'>"+m.title+"</option>");});}});//模拟假数据// _this.append("<option value='1>111</option>");// _this.append("<option value='2>222</option>");})$.ajaxSettings.async = true; //ajax恢复为异步}var fsForm = new FsForm();exports("dict", fsForm);})

数据字典接口返回数据

{"success": true,"message": "操作成功！","code": 0,"result": [{"value": "1","text": "男","title": "男"},{"value": "2","text": "女","title": "女"},{"value": "3","text": "未知","title": "未知"}],"timestamp": 1588152327329
}

2.配置lay-config.js,添加数据字典扩展模块

添加dict:'dict'新增加模块

/*** date:2019/08/16* author:Mr.Chung* description:此处放layui自定义扩展* version:2.0.4*/window.rootPath = (function (src) {src = document.scripts[document.scripts.length - 1].src;return src.substring(0, src.lastIndexOf("/") + 1);
})();layui.config({base: rootPath + "lay-module/",version: true
}).extend({miniAdmin: "layuimini/miniAdmin", // layuimini后台扩展miniMenu: "layuimini/miniMenu", // layuimini菜单扩展miniTab: "layuimini/miniTab", // layuimini tab扩展miniTheme: "layuimini/miniTheme", // layuimini 主题扩展miniTongji: "layuimini/miniTongji", // layuimini 统计扩展step: 'step-lay/step', // 分步表单扩展treetable: 'treetable-lay/treetable', //table树形扩展tableSelect: 'tableSelect/tableSelect', // table选择扩展iconPickerFa: 'iconPicker/iconPickerFa', // fa图标选择扩展echarts: 'echarts/echarts', // echarts图表扩展echartsTheme: 'echarts/echartsTheme', // echarts图表主题扩展wangEditor: 'wangEditor/wangEditor', // wangEditor富文本扩展layarea: 'layarea/layarea', //  省市县区三级联动下拉选择器dict: 'dict', //  layui数据字典模块扩展
});

3在页面中test.html添加下拉框

            性别：<select class="selDict" dict="sex"></select><br/>删除状态：<select class="selDict" dict="del_flag"></select>

4.页面加载时，渲染数据字典test.html

<script th:src="@{/layuimini/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=2.0.0}" charset="utf-8"></script>
<script src="/js/core.util.js"></script>
<script th:inline="none">layui.use(['table','laypage', 'layer','laydate','tree','transfer','dict'], function () {var form = layui.form;   var $ = jQuery = layui.jquery;var dict=layui.dict; //获取自定义模块dict.renderDictAll(); //渲染//重新渲染select数据form.render('select');})

layui自定义模块实现下拉框，读取数据字典数据相关推荐

java下拉框读取数据库数据_在一个jsp页面实现二级下拉框联动，实时读取数据库数据...
在一个jsp(SUN企业级应用的首选)页面实现二级下拉框联动,实时读取数据库数据,这个方法非常使用,只需要修改很小的地方就可以使用.设计的文件,serch.jsp(SUN企业级应用的首选),main. ...
java下拉框读取数据库数据_下拉框读取数据库数据库
一起谈.NET技术,Visual Studio 2008单元测试_数据库测试我们开发一个系统必须与数据库打交道,需要写N个SQL.存储过程.自定义函数.视图等,那么能否使用Visual Studio ...
laravel5.4 关于select下拉框读取数据库数据案例
首先需要做一个select下来框 <select name="cate_pid"><option value="0">==顶级分类==& ...
layui 使用xm-select实现下拉框多选
记录:layui 使用xm-select实现下拉框多选使用示例: <script src="__STATIC__/plugs/layui-v2.5.6/ext/xm-select.j ...
jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示在线预览下载地址实例代码 <!DOCTYPE html> <html lang="en& ...
layui 如何取得select下拉框选中的值
var addressid = $('#addressid[name=addressid]').val() form.on('select(filter)', function(data){conso ...
html6+树状下拉列表,layui+ztree 树状下拉框
一.效果图 [关闭] [展开] 二.代码 [HTML]注:布局一定要用DIV不是select否则效果···· 部门 @* *@ [js] ① 以下为固定方法 function initSelectTr ...
Easyexcel生成excel并通过自定义注解实现下拉框以及动态下拉框(将数据库中的数据显示在excel下拉框中)
首先需要定义excel实体类 @Data @ColumnWidth(22) @HeadRowHeight(30) public class ExcelProductDTO {//动态下拉框,可以查询数 ...
可自定义的vue下拉框组件
创建Select.vue组件 //创建Select.vue组件<template><div class="selects"><!-- 选择框 --&g ...

layui自定义模块实现下拉框，读取数据字典数据

项目情况

1.新建dict.js

数据字典接口返回数据

2.配置lay-config.js,添加数据字典扩展模块

3在页面中test.html添加下拉框

4.页面加载时，渲染数据字典test.html

layui自定义模块实现下拉框，读取数据字典数据相关推荐

最新文章

热门文章