级联介绍与实践
一、级联的介绍和理解
1、级联概念
下面是百度百科对级联的解释和理解：
概念：级联（cascade）在计算机科学里指多个对象之间的映射关系，建立数据之间的级联关系提高管理效率
理解：级联还指用来设计一对多关系。例如一个表存放老师的信息:表A（姓名，性别，年龄），姓名为主键。还有一张表存放老师所教的班级信息:表B（姓名，班级）。他们通过姓名来级联。级联的操作有级联更新，级联删除。 在启用一个级联更新选项后，就可在存在相匹配的外键值的前提下更改一个主键值。系统会相应地更新所有匹配的外键值。如果在表A中将姓名为张三的记录改为李四，那么表B中的姓名为张三的所有记录也会随着改为李四。级联删除与更新相类似。如果在表A中将姓名为张三的记录删除，那么表B中的姓名为张三的所有记录也将删除。
本人通俗理解：当你对某个数据进行操作的时候，会影响这个数据关联的所有数据，会对这些数据进行对应的操作，以达到目的效果。
二、实践：select标签级联操作
1、效果展示：
说明：选了机构名，会根据机构名去同步对应机构名的表名，让后选择表名就是这个机构名对应的表名…。
2、核心代码（只展示机构和表之间的关系）
2.1 前端核心代码
<form class="form-horizontal m" id="add-form-fieldConfig" name="add-form-fieldConfig">
<div class="row">
<div class="col-sm-13">
<div class="form-group">
<label class="col-sm-3 control-label is-required"> 机构名：</label>
<div class="col-sm-8">
<select id="orgNames" required name="orgNames" class="form-control"
aria-invalid="false" onchange="changeTable(1)"
data-live-search="true">
<option th:if="${#lists.size(orgAllCodeName)} gt 1" value="">
全部
</option>
<option th:each="orgAlls,start:${orgAllCodeName}"
th:selected="${where.orgName} eq ${orgAlls.orgName}"
th:value="${orgAlls.orgName}"
th:text="${orgAlls.orgName}"></option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-13">
<div class="form-group">
<label class="col-sm-3 control-label is-required"> 表名：</label>
<div class="col-sm-8">
<select id="tableNames" required name="tableNames"
class="form-control"
aria-invalid="false" onchange="changeTable(2)">
<option th:if="${#lists.size(tableInfo)} gt 1" value="">
全部
</option>
<option th:each="table,start:${tableInfo}"
th:selected="${where.tableName} eq ${table.tableName}"
th:value="${table.tableName}"
th:text="${table.tableName}"></option>
</select>
</div>
</div>
</div>
</div>
</form>2.2 js代码
// 获取表信息
function changeTable(table) {
if (table == 1) {
//获取机构名
var orgName = $("#orgNames").val();
if (orgName == null || orgName == '') {
orgName = "none";
}
getTableRequest(table, orgName);
} else if (table == 2) {
var orgName = $("#orgNames").val();
var tableName = $("#tableNames").val();
if (tableName == null || tableName == '') {
tableName = "none";
}
if (orgName == null || orgName == '') {
orgName = "none";
}
getTableRequestInformation(table, tableName);
}
}
//进行请求方法
function getTableRequestInformation(table, orgName, tableName) {
$.ajax({
url: prefix_table + 'getTableInformation/' + orgName,
type: 'GET',
success: function (res) {
if (res.code == 0) {
var options = "<option value=''>全部</option>";
if (res.data.length > 0) {
for (let i = 0; i < res.data.length; i++) {
var option = "<option value='" + res.data[i].fieldName + "'>" + res.data[i].fieldName + "</option>";
options = options + option;
}
if (table == 1) {
$("#tableNames").html(options);
} else if (table == 2) {
$("#fieldName").html(options);
}
}
}
},
error: function () {
console.log("网络请求错误")
}
})
}说明，主要是点击相应的标签，然后通过js方法，通过ajax请求后端数据，将后端数据获取拼接为对应的，插入对应的标签里面。
2.3 后端代码
后端代码省略，思路，将数据获取，然后传给前端就可以了。
三、总结
级联操作相当于一个关联，在数据表中，类似于主键和外键的作用。在实际开发中，级联也有很大的作用和用途，比如城市的多级筛选等。
解决思路，为一个事件设计其联动效果，当操作这个事件，会引起其他事件的联动操作。（事件：操作的对象，可以是下拉框，按钮等。 操作：点击，聚焦，滑动等）
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
