数据库多级联动源码

数据库多级联动通常是指在一个Web应用程序中，通过数据库查询实现多个层级之间的数据关联和动态展示。例如，在一个地区选择器中，用户选择了省份后，城市选项会自动更新为该省份下的城市列表；再选择城市后，区县选项也会相应更新。这种功能常见于地址选择、分类筛选等场景。

基础概念

多级联动主要依赖于数据库中的层级关系数据，通过前端和后端的配合实现数据的动态加载和展示。后端负责根据前端的请求查询数据库，返回相应的层级数据；前端则负责根据返回的数据更新界面。

优势

用户体验：用户无需手动输入，通过选择即可完成数据的填充，提高了操作的便捷性。
数据准确性：通过数据库查询确保数据的准确性和实时性。
灵活性：可以根据需求灵活调整层级关系和展示方式。

类型

静态多级联动：预先将所有层级数据加载到前端，通过JavaScript实现联动效果。
动态多级联动：每次选择时向后端发送请求，获取下一层级的数据并展示。

应用场景

地址选择器
分类筛选
组织架构选择
产品目录选择

示例代码

以下是一个简单的动态多级联动的示例，假设我们有一个地区表regions，包含id、name和parent_id字段。

后端（Python + Flask）

from flask import Flask, jsonify, request
import sqlite3

app = Flask(__name__)

def get_children(parent_id):
    conn = sqlite3.connect('regions.db')
    cursor = conn.cursor()
    cursor.execute("SELECT id, name FROM regions WHERE parent_id = ?", (parent_id,))
    children = cursor.fetchall()
    conn.close()
    return children

@app.route('/get_children', methods=['GET'])
def get_children_route():
    parent_id = request.args.get('parent_id')
    children = get_children(parent_id)
    return jsonify(children)

if __name__ == '__main__':
    app.run(debug=True)

前端（HTML + JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多级联动示例</title>
</head>
<body>
    <select id="province" onchange="loadCities()">
        <option value="">请选择省份</option>
    </select>
    <select id="city" onchange="loadDistricts()">
        <option value="">请选择城市</option>
    </select>
    <select id="district">
        <option value="">请选择区县</option>
    </select>

    <script>
        async function loadProvinces() {
            const response = await fetch('/get_children?parent_id=');
            const provinces = await response.json();
            const provinceSelect = document.getElementById('province');
            provinces.forEach(province => {
                const option = document.createElement('option');
                option.value = province.id;
                option.textContent = province.name;
                provinceSelect.appendChild(option);
            });
        }

        async function loadCities() {
            const provinceId = document.getElementById('province').value;
            const response = await fetch(`/get_children?parent_id=${provinceId}`);
            const cities = await response.json();
            const citySelect = document.getElementById('city');
            citySelect.innerHTML = '<option value="">请选择城市</option>';
            cities.forEach(city => {
                const option = document.createElement('option');
                option.value = city.id;
                option.textContent = city.name;
                citySelect.appendChild(option);
            });
        }

        async function loadDistricts() {
            const cityId = document.getElementById('city').value;
            const response = await fetch(`/get_children?parent_id=${cityId}`);
            const districts = await response.json();
            const districtSelect = document.getElementById('district');
            districtSelect.innerHTML = '<option value="">请选择区县</option>';
            districts.forEach(district => {
                const option = document.createElement('option');
                option.value = district.id;
                option.textContent = district.name;
                districtSelect.appendChild(option);
            });
        }

        loadProvinces();
    </script>
</body>
</html>