LayUI使用distpicker.js插件实现三级联动
LayUI使用distpicker.js插件实现三级联动
本文前端是采用layui模板，三级联动采用的是distpicker.js插件
distpicker.js插件地址下载distpicker文件后，dist文件夹中的不能用（这是编译压缩后的文件），只能用src文件夹中的
1、新增页面
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>distpicker三级联动</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"><link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
</head><body> <form class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px 0 0 0;"><div class="layui-row layui-col-space10 layui-this layuiadmin-card-list userDetail" style="text-align: left;"> <div class="layui-col-lg3 layui-col-md4 layui-col-sm4 layui-col-xs6"><label class="layui-form-label"><span style="color: red;">* </span>地区</label><div class="layui-input-inline" data-toggle="distpicker" style="display: flex;"><div class="form-group"><select class="form-control" lay-filter="province" id="province" lay-verify="required" data-province="-- 省 --"></select></div><div class="form-group"><select class="form-control" lay-filter="city" id="city" lay-verify="required" data-city="-- 市 --"></select></div><div class="form-group"><select class="form-control" lay-filter="district" id="district" lay-verify="required" data-district="-- 区 --"></select></div></div></div> </div><div class="layui-form-item layui-hide" ><input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认"></div></form><script src="../../../layuiadmin/layui/layui.js"></script><!-- 下面的jquery.min.js和 distpicker.js插件是必须要的，并且不能用下载distpicker文件中压缩后的，只能用src中的原本的--><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="../../../layuiadmin/layui/lay/modules/distpicker.js"></script> <!-- 注意路径 --><script>layui.config({base: '../../../layuiadmin/' //静态资源所在路径}).extend({index: 'lib/index'//主入口模块});</script><script>layui.use(['index', 'form','element','jquery'], function(){var form = layui.form,$ = layui.$;//监听地址，用来渲染加载三级联动中的地址form.on('select(province)', function (data) {$("#province").val(data.value).change();form.render();});form.on('select(city)', function (data) {$("#city").val(data.value).change();form.render();});form.on('select(district)', function (data) {$("#district").val(data.value).change();form.render();});});</script>
</body></html>
2、编辑页面
编辑页面的其他内容使用了layui的layptl模板，所以三级联动的js模块在加载时一定要放在layptl模板之后，否则地址三级联动的下拉框中的地址内容加载不进去
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>编辑distpicker三级联动</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"><link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
</head>
<body><script id="layuiAdmin-form-edit" type="text/html" style="padding: 20px 0 0 0;"><form class="layui-form" action=""><div class="layui-row layui-col-space10 layui-this layuiadmin-card-list userDetail" style="text-align: left;"><div class="layui-col-lg3 layui-col-md4 layui-col-sm4 layui-col-xs6"><label class="layui-form-label"><span style="color: red; ">* </span>角色</label><div class="layui-input-inline" style="width: 182px;"><select name="roleId">{{# if (layui.sessionData('roleNumber').roleNumber== '1') { }}<option value="2" {{# if(d.userEdit.roleId == "2"){ }} selected {{# } }} >管理员</option><option value="3" {{# if(d.userEdit.roleId == "3"){ }} selected {{# } }}>代理商</option><option value="4" {{# if(d.userEdit.roleId == "4"){ }} selected {{# } }}>医生</option>{{# } else if (layui.sessionData('roleNumber').roleNumber== '2') { }}<option value="3" {{# if(d.userEdit.roleId == "3"){ }} selected {{# } }}>代理商</option><option value="4" {{# if(d.userEdit.roleId == "4"){ }} selected {{# } }}>医生</option>{{# } else { }}<option value="4" {{# if(d.userEdit.roleId == "4"){ }} selected {{# } }}>医生</option>{{# } }}</select></div></div><div class="layui-col-lg3 layui-col-md4 layui-col-sm4 layui-col-xs6"><label class="layui-form-label"><span style="color: red; ">* </span>地区</label><div class="layui-input-inline" data-toggle="distpicker" id="distpicker" style="display: flex;"><div class="form-group"><select class="form-control" lay-filter="province" id="province" lay-verify="required"></select></div><div class="form-group"><select class="form-control" lay-filter="city" id="city" lay-verify="required"></select></div><div class="form-group"><select class="form-control" lay-filter="district" id="district" lay-verify="required"></select></div></div></div></div><div class="layui-form-item lay-hide" ><div class="layui-input-block" style="display: none;"><button type="button" ></button></div></div><div class="layui-form-item"><div class="layui-input-block"><button type="submit" class="layui-btn" lay-submit="" lay-filter="LAY-user-edit-submit">确定</button><button type="button" class="layui-btn layui-btn-primary" lay-href="user/user/list.html">取消</button></div></div></form>
</script><div class="layui-fluid"><div class="layui-row layui-col-space15"><div class="layui-col-sm12"><div class="layui-card"><div class="layui-card-header">编辑</div><div class="layui-card-body" id="view"></div></div></div></div>
</div><div id="view"></div><script src="../../../layuiadmin/layui/layui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../../../layuiadmin/layui/lay/modules/distpicker.js"></script><script>layui.config({base: '../../../layuiadmin/' //静态资源所在路径}).extend({index: 'lib/index' //主入口模块})
</script><script>
layui.use(['index', 'laydate', 'layer', 'form', 'element', 'admin', 'laytpl'], function(){var laydate = layui.laydate,layer = layui.layer,form = layui.form,$ = layui.$,laytpl = layui.laytpl,admin = layui.admin;//获取url search值function getSearch(name) {var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');var r = window.location.search.substr(1).match(reg);if (r != null) {return unescape(r[2]);}return null;}var userId = getSearch("userId");admin.req({url:layui.setter.url + 'user/getUserInfo',type: 'post',data: {LOGINTOKEN:layui.data('tokenName').LOGINTOKEN,userId:userId,PageNum:1,PageSize:1},done: function(res){var data = {"userEdit":res.data};//加载模板var getTpl=document.getElementById('layuiAdmin-form-edit').innerHTML,view = document.getElementById('view');laytpl(getTpl).render(data, function(html){view.innerHTML = html;});//地址三级联动$("#distpicker").distpicker('destroy');$("#distpicker").distpicker({autoSelect: false,placeholder: false});//从后台获取数据后并进行分割，然后填充到前端页面let myArea = res.data.area.split('-');$("#province").val(myArea[0]);$("#province").trigger("change");$("#city").val(myArea[1]);$("#city").trigger("change");$("#district").val(myArea[2]);$("#district").trigger("change");//插件显示form.render();}});//监听地址form.on('select(province)', function (data) {$("#province").val(data.value).change();form.render();});form.on('select(city)', function (data) {$("#city").val(data.value).change();form.render();});form.on('select(district)', function (data) {$("#district").val(data.value).change();form.render();});// 监听提交form.on('submit(LAY-user-edit-submit)', function(data){//获取三级联动地址提交的字段并进行拼接var myProvince = $("#province option:selected").val();var myCity = $("#city option:selected").val();var myDistrict = $("#district option:selected").val();data.field.area = myProvince + '-' + myCity + '-' + myDistrict;data.field.LOGINTOKEN = layui.data('tokenName').LOGINTOKEN;data.field.userId = userId;let userString = JSON.stringify(data.field);data.field.userString = userString;return false;});
});
</script></body>
</html>