PHP递归函数 + Layui树形组件实现无限极分类
2、递归分类数据
demo.php
<?php
$connect = mysqli_connect('localhost', 'root', 'root', '你的数据库名称');
if (!$connect) {
echo '数据库连接失败';
exit;
}
$sql = "SELECT * FROM area";
$query = mysqli_query($connect, $sql);
$data = [];
while ($rs = mysqli_fetch_assoc($query)) {
$data[] = $rs;
}
// 调用 getCity() 方法开始递归分类数据，传值 -1 代表从省份开始分类（数据表中省份的 parentId 为 -1）
$r = getCity($data, -1);
// 输出 json 格式的数据供 JS 使用
echo json_encode($r);
function getCity($data, $pid)
{
$result = [];
foreach ($data as $k => $v) {
if ($v['parentId'] == $pid) {
// Layui 树形组件需要 title 字段作为节点标题显示
$v['title'] = $v['areaName'];
// Layui 树形组件需要 children 字段储存子节点
$v['children'] = getCity($data, $v['areaId']);
$result[] = $v;
}
}
return $result;
}
3、下载 Layui
（1）点击前往 Gitee 获取
（2）点击前往 GitHub 获取
4、在你的 HTML 页面中引入 Layui 以及 jQuery
<link rel="stylesheet" href="layui/dist/css/layui.css">
1
<script src="js/jquery-3.5.1.min.js"></script>
<script src="layui/dist/layui.js"></script>
1
2
5、执行 Ajax 请求获取递归数据并渲染树形组件
<script type="text/javascript">
$.ajax({
url: "demo.php",
type: "GET",
data: {},
success: function (r) {
var res = JSON.parse(r)
layui.use('tree', function(){
var tree = layui.tree;
//渲染
tree.render({
elem: '#app' //绑定元素
,data: res
});
});
}
});
</script>
6、完整 HTML 代码
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP递归函数 + Layui树形组件实现无限极分类</title>
<link rel="stylesheet" href="layui/dist/css/layui.css">
</head>
<body>
<!-- Layui 树形组件容器 -->
<div id="app"></div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="layui/dist/layui.js"></script>
<script type="text/javascript">
$.ajax({
url: "demo.php",
type: "GET",
data: {},
success: function (r) {
var res = JSON.parse(r)
layui.use('tree', function(){
var tree = layui.tree;
//渲染
tree.render({
elem: '#app' //绑定元素
,data: res
});
});
}
});
</script>
</body>
</html>
数据格式：
data: [{title: '江西' //一级菜单
,children: [{title: '南昌' //二级菜单
,children: [{title: '高新区' //三级菜单
//…… //以此类推，可无限层级
}]
}]
浙公网安备 33010602011771号