当前位置：文江博客话题详情

layui tree组件如何异步加载数据，动态添加树节点

发布于 2021-12-01 06:28:31 字数 42 浏览 920 评论 1

layui在点击树节点时从后台请求数据，并动态在点击的节点下添加子节点

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜司空 2021-12-02 18:52:06

<?php

   $data = [
       [ 'id' => 1, 'name' => '江苏省', 'pid' => 0],
       [ 'id' => 2, 'name' => '徐州市', 'pid' => 1],
       [ 'id' => 3, 'name' => '睢宁县', 'pid' => 2],
       [ 'id' => 4, 'name' => '双沟镇', 'pid' => 3],
       [ 'id' => 5, 'name' => '王集镇', 'pid' => 3],
       [ 'id' => 6, 'name' => '铜山区', 'pid' => 2],
       [ 'id' => 7, 'name' => '张集镇', 'pid' => 6],
       [ 'id' => 8, 'name' => '大黄山镇', 'pid' => 6],
       [ 'id' => 9, 'name' => '南京市', 'pid' => 1],
       [ 'id' => 10, 'name' => '江宁区', 'pid' => 9],
       [ 'id' => 11, 'name' => '鼓楼区', 'pid' => 9],
       [ 'id' => 12, 'name' => '浙江省', 'pid' => 0],
       [ 'id' => 13, 'name' => '杭州市', 'pid' => 12],
       [ 'id' => 14, 'name' => '西湖区', 'pid' => 13]
   ];

   $res = [];
   $tree = [];
   //整理数组
   foreach ($data as $key => $value) {
       $res[$value['id']] = $value;
       $res[$value['id']]['children'] = [];
   }

   unset ($data);
   //查询子孙
   foreach ($res as $key => $value) {
       if($value['pid'] != 0){
           $res[$value['pid']]['children'][] = &$res[$key];
       }
   }
   //去除杂质
   foreach ($res as $key => $value) {
       if ($value['pid'] == 0){
           $tree[] = $value;
       }
   }
   unset($res);

   $tree = json_encode($tree);？>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>树模块 - layui</title>
<link rel="stylesheet" href="layui-master/build/css/layui.css">
<style>
body{padding: 50px 100px;}
</style>
</head>
<body>
<?php require 'mytree.php'; ?>

layui.use('tree', function(){
var tree = layui.tree({
    elem: '#demo' //指定元素
    //,check: 'checkbox' //勾选风格
    ,skin: 'as' //设定皮肤
    ,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
    ,drag: true
    ,click: function(item){ //点击节点回调
      console.log(item)
    }
    ,nodes: <?php echo $tree; ?>
});

});
</script>
</body>
</html>

回复收藏 0

~没有更多了~