您的位置：首页 > 产品设计 > UI/UE

layui三级联动下拉框，附ssm后台代码

2019-01-14 15:07 501 查看

这是公司的一个项目，前端ui用的layui，后台用的ssm框架，数据库sqlserver，先看效果图

医院是一级下拉框，科室分为两个

直接附上代码吧，

[code]<body>
<div class="x-body">
<form class="layui-form" id="auf">
<input type="hidden" name="id" value="${user.id }" id="id" />
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" required lay-verify="required"
placeholder="请输入姓名" autocomplete="off" class="layui-input"
value="${doctor.name}">
</div>
</div>

<div class="layui-form-item">
<label class="layui-form-label">性別</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男"
<c:if test="${doctor.sex==0}">checked</c:if>> <input
type="radio" name="sex" value="1" title="女"
<c:if test="${doctor.sex==1}">checked</c:if>>
</div>
</div>
<!--联动框  -->
<div class="layui-form-item">
<label class="layui-form-label">医院</label>
<div class="layui-input-inline">
<select name="quiz1" lay-filter="hospitalsel">
<option value="">--请选择--</option>
<c:forEach items="${listhos}" var="item">
<option value="${item.id }" >${item.hospitalName}</option>
</c:forEach>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">科室</label>
<div class="layui-input-inline">
<select name="division1" lay-filter="divisionsel" id="division1">
<option value="">--请选择--</option>

</select>
</div>
<div class="layui-input-inline">
<select name="division2" id="division2">
<option value="">--请选择--</option>

</select>
</div>
</div>

<div class="layui-form-item layui-form-text">
<label class="layui-form-label">职称</label>
<div class="layui-input-block">
<input type="text" name="job" required lay-verify="required"
placeholder="请输入职称" autocomplete="off" class="layui-input"
value="${doctor.job}">
</div>
</div>

<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="updateDoctor">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</body>

医院下拉框是加载这个页面时就已经从后台获取到了的，科室的下拉框没有加载数据。

下面就是三级框联动的js代码

[code]layui.use('form', function() {
var form = layui.form;

form.render('select');

//医院下拉选事件,获取科室下拉选
form.on('select(hospitalsel)', function(data) {
var hosid = data.value;
//alert(hosid);
$.ajax({
type : "post",
url : "${pageContext.request.contextPath}/userManger/getDivision1",
data : {hosid:hosid},
dataType : "json",
success : function(d) {
var tmp = '<option value="">--请选择--</option>';
//改变医院时第三级下拉框回复原样
$("#division2").html(tmp);
for ( var i in d) {
tmp += '<option value="' + d[i].id +  '">' + d[i].divisionName + '</option>';
}
$("#division1").html(tmp);
form.render();
},
error:function(){
layer.alert('请求失败，稍后再试', {icon: 5});
}

});
});

//一级科室事件，获取二级科室
form.on('select(divisionsel)',function(data){
var division1id = data.value;
$.ajax({
type : "post",
url : "${pageContext.request.contextPath}/userManger/getDivision2",
data : {division1id:division1id},
dataType : "json",
success : function(d) {
var tmp = '<option value="">--请选择--</option>';
for ( var i in d) {
tmp += '<option value="' + d[i].id +  '">' + d[i].divisionName + '</option>';
}
$("#division2").html(tmp);
form.render();
},
error:function(){
layer.alert('请求失败，稍后再试', {icon: 5});
}

});

});
});

现在附上后台ssm代码

这是controller层代码，service层就贴了，没什么业务逻辑

[code]//根据医院id获取一级科室
@RequestMapping(value = "/getDivision1", method = RequestMethod.POST )
@ResponseBody
public List<Division>  getDivision1(String hosid) {
List<Division>  list = userMangerService.getDivision1(hosid);
return list;
}

//根据一级科室id获取二级科室
@RequestMapping(value = "/getDivision2",method = RequestMethod.POST )
@ResponseBody
public List<Division>  getDivision2(String division1id) {
List<Division>  list = userMangerService.getDivision2(division1id);
return list;
}

这是mapper.xml的代码

[code]<resultMap type="com.eyou.esd.entity.Division" id="DivResultMap">
<id column="ID" property="id" jdbcType="INTEGER" />
<result column="ParentID" property="parentID" jdbcType="INTEGER" />
<result column="DivisionName" property="divisionName" jdbcType="VARCHAR" />
</resultMap>

<select id="getDivision1" parameterType="java.lang.String" resultMap="DivResultMap">
select * from Base_Division
<where>
HospitalID = #{hosid,jdbcType=INTEGER} and ParentID = 0
</where>

</select>

<select id="getDivision2" parameterType="java.lang.String" resultMap="DivResultMap">
select * from Base_Division
<where>
ParentID = #{division1id}
</where>

</select>

你动态加载了layui的表单一定要用form.render()对表单进行更新，

具体api文档查看点击这里——>layui表单

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航