级联介绍与实践

一、级联的介绍和理解

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("网络请求错误")}})
}