三级双向联动+自动选中
需求分析
- 三级双向联动
我想要实现房间类型和房间入住人数随着房间的改变而改变，当然由于房间类型的改变，房间的范围也根据房间类型的改变而改变。我叫它三级双向联动。 - 自动选中
当点击一个房间时，自动跳转到办理入住页面，并自动选中该房间信息（房间类型、房间编号、房间可入住人数） - 三级双向联动+自动选中
顾名思义，就是将上面两个方面结合起来。
具体请看文章开头的视频【需求分析看着费劲】
第一种方法：Vue
其实我第一次实现的是第二种方法，但是觉得正规的项目应该使用Vue实现，故又用vue实现了一遍。
<!-- HTML部分代码 -->
<div class="layui-form-item">
<label class="layui-form-label">请选择房间类型</label>
<div class="layui-input-block">
<select lay-filter="typeId" id="categoryId">
<option value="0">所有类型</option>
<option th:each="obj,Obj:${list}" th:value="${obj.categoryId}"
th:text="${obj.categoryName}" th:selected="${ obj.categoryId == roomTypeId}"></option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">请选择房间</label>
<div class="layui-input-block">
<select id="roomId" lay-filter="roomId" name="roomId" lay-search="" lay-verify="required" v-model="selected">
<option value="">请选择房间</option>
<option v-for="obj in roomList" :value="obj.id" :key="obj.id">{{obj.name}}</option>
<option id="xuan" th:value="${roomId}" hidden></option>
<!--<option th:each="obj,Obj:${roomList}" th:value="${obj.id}"-->
<!-- th:text="${obj.name}" th:selected="${ obj.id == roomId}"></option>-->
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">可入住</label>
<div class="layui-input-block">
<input type="text" readonly class="layui-input" id="size" placeholder="可入住人数">
</div>
</div>
js部分，本来打算粘贴到一块，不过可能太长，就分开了
// js部分
<script type="text/javascript" src="\vue@2.6.0"></script>
<script>
var app = new Vue({
el: '#roomId',
data: {
roomList: [],
selected: $('#xuan').val()
},
updated() {
layui.use('form', function () {
var form = layui.form;
form.render();
}
)
},
})
layui.use(['form', 'laydate'], function () {
var form = layui.form
, layer = layui.layer
, laydate = layui.laydate
, $ = layui.$;
//选中房间类型事件
// 联动框
form.on('select(typeId)', function (data) {
app.roomList = null;
app.selected = null;
$("#roomMoney").val("");
$("#size").val("");
$.post("/reception/order/getRoomList", {categoryId: data.value}, function (res) {
app.roomList = res;
});
});
// ============一进入该页面，自动触发一次房间是否被选中,自动根据房间选择人数/类型============
// 一进来，房间为 *所有类型* 时，可选房间
// if ($("#categoryId").val() == 0){
$.post("/reception/order/getRoomList", {categoryId: $("#categoryId").val()}, function (res) {
console.log("res:::::")
console.log(res)
app.roomList = res;
});
// }
if ($("#roomId").val() != ""){
//根据房间ID查询可住人数
$.post("/reception/order/getSize", {id: $("#roomId").val()}, function (data) {
$("#size").val(data);
});
//根据房间ID查询房间类型
$.post("/reception/order/getRoomCategoryInfo", {id: $("#roomId").val()}, function (data1) {
$('#categoryId').find('option[value="data1.categoryId"]').prop('selected',true);//选中value="2"的option
// 根据当前类型，显示满足条件的房间
$.post("/reception/order/getRoomList", {categoryId: data1.categoryId}, function (data) {
app.roomList = data;
// form.render("select");
});
});
}else{
$("#size").val(null);
// $("#categoryId").val("0");
}
//选中房间事件
form.on('select(roomId)', function (data) {
// 将其值设置为roomId【为空时，可入住人数也空】
$("#size").val(data.value);
if (data.value == "") {
return false;
}
//根据房间ID查询可住人数
$.post("/reception/order/getSize", {id: data.value}, function (data) {
$("#size").val(data);
});
// ====================== 选中该房间的类型就变，并根据类型缩小房间的选择范围 =====================
$.post("/reception/order/getRoomCategoryInfo",{id: data.value}, function (data3) {
var typeId = data3.categoryId;
// 下面一行不可用,但是上面用这行就行，离了个大谱【 ???????????????????】
// $('#categoryId').find('option[value="typeId"]').prop('selected',true);//选中value="2"的option
var obj = document.getElementById("categoryId");
for(var i=0;i<obj.length;i++){
if(obj[i].value==typeId){
obj[i].selected = true;
break;
}
}
// 根据当前类型，出现满足条件的房间
$.post("/reception/order/getRoomList", {categoryId: typeId}, function (data2) {
app.roomList = data2;
// 并选中当前房间
app.selected = data.value;
});
});
});
})
</script>
由于控制器部分是共用的，故就粘贴到最后了
第二种方法：JS
<!-- HTML部分代码 -->
<div class="layui-form-item">
<label class="layui-form-label">请选择房间类型</label>
<div class="layui-input-block">
<select lay-filter="typeId" id="categoryId">
<option value="0">所有类型</option>
<option th:each="obj,Obj:${list}" th:value="${obj.categoryId}"
th:text="${obj.categoryName}" th:selected="${ obj.categoryId == roomTypeId}"></option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">请选择房间</label>
<div class="layui-input-block">
<select id="roomId" lay-filter="roomId" name="roomId" lay-search="" lay-verify="required">
<option value="">请选择房间</option>
<option th:each="obj,Obj:${roomList}" th:value="${obj.id}"
th:text="${obj.name}" th:selected="${ obj.id == roomId}"></option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">可入住</label>
<div class="layui-input-block">
<input type="text" readonly class="layui-input" id="size" placeholder="可入住人数">
</div>
</div>
js部分，理由同上
// js部分
<script>
layui.use(['form', 'laydate'], function () {
var form = layui.form
, layer = layui.layer
, laydate = layui.laydate
, $ = layui.$;
//选中房间类型事件
form.on('select(typeId)', function (data) {
$("#roomMoney").val("");
$("#size").val("");
$.post("/reception/order/getRoomList", {categoryId: data.value}, function (data) {
var content = "<option value=''>请选择房间</option>";
for (var i = 0; i < data.length; i++) {
content += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"
}
$("#roomId").html(content);
form.render("select");
});
return false;
});
// ============一进入该页面，自动触发一次房间是否被选中,自动根据房间选择人数/类型============
if ($("#roomId").val() != ""){
//根据房间ID查询可住人数
$.post("/reception/order/getSize", {id: $("#roomId").val()}, function (data) {
$("#size").val(data);
});
//根据房间ID查询房间类型
$.post("/reception/order/getRoomCategoryInfo", {id: $("#roomId").val()}, function (data1) {
$('#categoryId').find('option[value="data1.categoryId"]').prop('selected',true);//选中value="2"的option
// 根据当前类型，出现满足条件的房间
$.post("/reception/order/getRoomList", {categoryId: data1.categoryId}, function (data) {
var content = "<option value=''>请选择房间</option>";
for (var i = 0; i < data.length; i++) {
content += "<option selected=\"$(\"#roomId\").val() == data[i].id\" value='" + data[i].id + "'>" + data[i].name + "</option>"
}
$("#roomId").html(content);
form.render("select");
});
});
}else{
$("#size").val(null);
$("#categoryId").val("0");
}
//选中房间事件
form.on('select(roomId)', function (data) {
// 将其值设置为roomId【为空时，可入住人数也空】
$("#size").val(data.value);
if (data.value == "") {
return false;
}
//根据房间ID查询可住人数
$.post("/reception/order/getSize", {id: data.value}, function (data) {
$("#size").val(data);
});
// ====================== 选中该房间的类型，并根据类型缩小房间的选择范围 =====================
$.post("/reception/order/getRoomCategoryInfo",{id: data.value}, function (data3) {
var typeId = data3.categoryId;
// 下面一行不可用,但是上面用这行就行，离了个大谱【 ???????????????????】
// $('#categoryId').find('option[value="typeId"]').prop('selected',true);//选中value="2"的option
var obj = document.getElementById("categoryId");
for(var i=0;i<obj.length;i++){
if(obj[i].value==typeId){
obj[i].selected = true;
break;
}
}
// 根据当前类型，出现满足条件的房间
$.post("/reception/order/getRoomList", {categoryId: typeId}, function (data2) {
var content1 = "<option value=''>请选择房间</option>";
for (var i = 0; i < data2.length; i++) {
content1 += "<option selected=\"$(\"#roomId\").val() == data2[i].id\" value='" + data2[i].id + "'>" + data2[i].name + "</option>"
}
$("#roomId").html(content1);
form.render("select");
});
});
return false;
});
})
</script>
控制器
// 控制器部分
/**
*根据房间类型查询所有可办理入住房间
*/
@PostMapping("/getRoomList")
@ResponseBody
public List<Room> getRoomList(int categoryId) {
QueryWrapper<Room> queryWrapper = new QueryWrapper<>();
if (categoryId != 0) {
queryWrapper.eq("category_id", categoryId);
}
queryWrapper.eq("room_status", 1);
return roomService.list(queryWrapper);
}
/**
* 根据房间ID查询 房间类型
*/
@PostMapping("/getRoomCategoryInfo")
@ResponseBody
public Category getRoomCategoryInfo(int id) {
Room room = roomService.getById(id);
if (room != null) {
Category category = categoryService.getById(room.getCategoryId());
// return category == null ? "0" : category.getCategoryName();
return category;
}
return null;
}
/**
* 根据房间ID查询可入住人数
*/
@PostMapping("/getSize")
@ResponseBody
public int getCategoryInfo(int id) {
Room room = roomService.getById(id);
if (room != null) {
Category category = categoryService.getById(room.getCategoryId());
return category == null ? 0 : category.getPerson();
}
return 0;
}
里面的技术虽然很常见，但是我感觉有巧妙的地方
好几个月没写了，本以为忘完了，没想到是去沉淀了。
我要将它写进我的论文！！！
本文为原创作品，转载请注明出处
扫一扫
4011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
