地区五级联动设计思路

作者: wxfeng 分类: web前端 发布时间: 2022-07-04 14:04    阅读 47 次

地区五级联动列表(省,市,区/县,街道/镇,社区/村)设计思路

数据库表结构:

CREATE TABLE `region` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `name` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '地区名称',
  `parent_id` varchar(10) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '地区父id',
  `level` int(2) DEFAULT NULL COMMENT '地区级别 1-省、自治区、直辖市 2-地级市 3-市辖区、县级市、县,4-街道,5-社区',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC COMMENT='社区表';

获取地区列表,分级显示(php)

//社区分级格式化函数
public function format($arr, $pid = 0)
{
    $list = [];
    foreach ($arr as $key => $v) {
        if ($v->parent_id == $pid) {
            $v->child = $this->format($arr, $v->id);
            $list[]   = $v;
        }
    }
    return $list;
}
$list  = DB::table('region')->get()->toArray();
$lists = $this->format($list);
return self::sucCode("获取成功", $lists);

返回结果

{
    "code": 200,
    "msg": "获取成功",
    "data": [
        {
            "id": 3,
            "name": "郑州市二七区",
            "parent_id": "0",
            "level": 3,
            "child": [
                {
                    "id": 1,
                    "name": "长江路街道",
                    "parent_id": "3",
                    "level": 4,
                    "child": [
                        {
                            "id": 2,
                            "name": "航海中路社区",
                            "parent_id": "1",
                            "level": 5,
                            "child": []
                        },
                        {
                            "id": 4,
                            "name": "航海东路社区",
                            "parent_id": "1",
                            "level": 5,
                            "child": []
                        }
                    ]
                }
            ]
        },
        {
            "id": 6,
            "name": "金水区",
            "parent_id": "0",
            "level": 3,
            "child": [
                {
                    "id": 8,
                    "name": "花园路街道",
                    "parent_id": "6",
                    "level": 4,
                    "child": [
                        {
                            "id": 9,
                            "name": "红旗区",
                            "parent_id": "8",
                            "level": 5,
                            "child": []
                        }
                    ]
                }
            ]
        },
        {
            "id": 7,
            "name": "中原区",
            "parent_id": "0",
            "level": 3,
            "child": []
        }
    ]
}

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。