类似于一个目录树的问题求解

进入页面后端会发送一些数据遍历到页面上都有自己的id 点击哪个就执行一个函数A{里面是id}就会给后端发送
后端会返回这个id对应的一些数据需要将这些数据遍历到这个div下层再点击其中也执行函数发送id
类似于目录树但是后端消息是一条一条发的不是直接一个对象或者数组
有解答吗该怎么写呢

然后，你的问题是？

你的意思是进入页面前端发个请求给后端，后端返回第一层级的数据给前端渲染
然后前端再遍历第一层级渲染好的div的id，开始遍历发请求给后端获取每个遍历到的第一层div所对应的第二层需要渲染的数据
然后是第三层级，这样，每一层往下渲染，然后每一层内部是遍历。

你想改成每一层不用遍历，直接发每层所有的数组id给后端这样把

那么就需要该三个地方：
1.需要改写一下你的函数A，首先他需要接收一个id数组
2.然后需要改写一下你的后端，原本根据id去找他自己所对应的下一层数据，那么现在就需要根据数组中一次型找出该数组中所有id对应的下一层数据
3.其次需要改写一下后端接口请求返回数据后的渲染逻辑

<?php
if(isset($_POST['id'])){
    $arr['code']=1;
    $arr['data']=array(array('id'=>1,'name'=>'第一'),array('id'=>2,'name'=>'第二'),array('id'=>3,'name'=>'第三'),array('id'=>4,'name'=>'第四'));
    exit(json_encode($arr));
}
?>
<script src="js/jquery-1.10.2.js"></script>
<div>
    <ul id="fu">
        
    </ul>
</div>
<script>
$.ajax({
//请求方式
    type:'POST',
    //发送请求的地址以及传输的数据
    url:'test1.php',
    //服务器返回的数据类型
    dataType:'json',
    data:{'id':0},
    success:function(data){
        if(data.code==1){
            var arr=data.data
            //请求成功函数内容
            for(var i in arr){
            $('#fu').append('<li><a class="pclass" rel="'+arr[i].id+'">'+arr[i].name+'</a></li>');
            }
        }
    },
    error:function(jqXHR){
        //请求失败函数内容
    }
});
$('#fu').on("click",".pclass",function(e){
    var obj=$(this);
    var id=obj.attr('rel');
    $.ajax({
    //请求方式
        type:'POST',
        //发送请求的地址以及传输的数据
        url:'test1.php',
        //服务器返回的数据类型
        dataType:'json',
        data:{'id':id},
        success:function(data){
            if(data.code==1){
                var arr=data.data
                //请求成功函数内容
                for(var i in arr){
                 obj.parent().append('<div><ul><li><a class="pclass" rel="'+arr[i].id+'">'+arr[i].name+'</a></li></ul></div>');
                }
            }
        },
        error:function(jqXHR){
            //请求失败函数内容
        }
    });
})
</script>

效果：

建议使用elementui的表格懒加载。点击父级节点调用后端接口展示子节点。

<el-table ref="multipleTable" :data="list" style="width: 100%" size="small" v-loading="listLoading" border
                row-key="id" :tree-props="{children: 'children'}" :indent="20">
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="ID" v-if="false"></el-table-column>
        <el-table-column label="页面路径" prop="page"></el-table-column>
        <el-table-column label="路由" prop="path"></el-table-column>
        <el-table-column label="图标" align="center" width="150">
          <template slot-scope="scope">
            <svg-icon v-if="scope.row.icon"  class="svg-icon-M2class" :icon-class="scope.row.icon"  />
          </template>
        </el-table-column>
        <el-table-column label="顺序" align="center" prop="seq" width="100">
        </el-table-column>
        <el-table-column label="类型" prop="type" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.type==0">目录</span>
            <span v-if="scope.row.type==1">菜单</span>
            <span v-if="scope.row.type==2">按钮</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="editHandle(scope.row)" icon="el-icon-edit">修改
            </el-button>
            <el-button type="danger" size="mini" @click="deleteHandle(scope.row)" icon="el-icon-delete">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

这种很麻烦，你请求一次你要重新进行一次布局，相当于每次请求都有把所以布局重新排列一遍，最好是后端返回所有的目录，然后用你来决定展示或不展示。
可以规定一个数据结构，后端使用递归方式生成数据。

类似于一个目录树的问题 求解

类似于一个目录树的问题求解