js实现树级递归,通过js生成tree树形菜单(递归算法)

admin0条评论 8,488 次浏览

需求:首先这是一个数据集—js的类型,我们需要把生成一个tree形式的对象 :

var data =[{  //模拟数据库接口返回的 分类数据
	"status": 1,
	"_id": "5b9a68538f041546600439e7",
	"title": "技术团队",
	"describe": "这是一个技术团队",
	"keywords": "技术团队",
	"pid": "0",
	"addTime": "2018-01-01T00:00:00.000Z"
}, {
	"status": 1,
	"_id": "5b9a696c3e7dc24660bd9b7e",
	"title": "数码",
	"describe": "这是数码",
	"keywords": "数码",
	"pid": "0",
	"addTime": "2018-01-01T00:00:00.000Z"
}, {
	"status": 1,
	"_id": "5b9a69a63e7dc24660bd9b7f",
	"title": "前端开发1",
	"describe": "这是前端开发",
	"keywords": "前端",
	"pid": "5b9a68538f041546600439e7",
	"addTime": "2018-01-01T00:00:00.000Z"
}, {
	"status": 1,
	"_id": "5b9a69d83e7dc24660bd9b80",
	"title": "后端开发",
	"describe": "这是后端开发",
	"keywords": "后端",
	"pid": "5b9a68538f041546600439e7",
	"addTime": "2018-01-01T00:00:00.000Z"
}, {
	"status": 1,
	"_id": "5b9a69fb3e7dc24660bd9b81",
	"title": "iphone",
	"describe": "这是iphone",
	"keywords": "iphone",
	"pid": "5b9a696c3e7dc24660bd9b7e",
	"addTime": "2018-01-01T00:00:00.000Z"
}, {
	"status": 1,
	"_id": "5b9a6a173e7dc24660bd9b82",
	"title": "华为",
	"describe": "这是华为",
	"keywords": "华为",
	"pid": "5b9a696c3e7dc24660bd9b7e",
	"addTime": "2018-01-01T00:00:00.000Z"
}, {
	"status": 1,
	"_id": "5b9a79f13e7dc24660bd9b83",
	"title": "iphone6s",
	"describe": "这是iphone6s",
	"keywords": "iphone6s",
	"pid": "5b9a69fb3e7dc24660bd9b81",
	"addTime": "2018-01-01T00:00:00.000Z"
}]

id,与pid之间的对应关系,当pid不存在,或pid:0的时候,这一项,应该为树的顶端,那么我们需要去重新建一次索引,怎么建呢,,,以原数据集的id的值,重新生成一个数据如下:

[{
	"status": 1,
	"_id": "5b9a68538f041546600439e7",
	"title": "技术团队",
	"describe": "这是一个技术团队",
	"keywords": "技术团队",
	"pid": "0",
	"addTime": "2018-01-01T00:00:00.000Z",
	"children": [{
		"status": 1,
		"_id": "5b9a69a63e7dc24660bd9b7f",
		"title": "前端开发1",
		"describe": "这是前端开发",
		"keywords": "前端",
		"pid": "5b9a68538f041546600439e7",
		"addTime": "2018-01-01T00:00:00.000Z"
	}, {
		"status": 1,
		"_id": "5b9a69d83e7dc24660bd9b80",
		"title": "后端开发",
		"describe": "这是后端开发",
		"keywords": "后端",
		"pid": "5b9a68538f041546600439e7",
		"addTime": "2018-01-01T00:00:00.000Z"
	}]
}, {
	"status": 1,
	"_id": "5b9a696c3e7dc24660bd9b7e",
	"title": "数码",
	"describe": "这是数码",
	"keywords": "数码",
	"pid": "0",
	"addTime": "2018-01-01T00:00:00.000Z",
	"children": [{
		"status": 1,
		"_id": "5b9a69fb3e7dc24660bd9b81",
		"title": "iphone",
		"describe": "这是iphone",
		"keywords": "iphone",
		"pid": "5b9a696c3e7dc24660bd9b7e",
		"addTime": "2018-01-01T00:00:00.000Z",
		"children": [{
			"status": 1,
			"_id": "5b9a79f13e7dc24660bd9b83",
			"title": "iphone6s",
			"describe": "这是iphone6s",
			"keywords": "iphone6s",
			"pid": "5b9a69fb3e7dc24660bd9b81",
			"addTime": "2018-01-01T00:00:00.000Z"
		}]
	}, {
		"status": 1,
		"_id": "5b9a6a173e7dc24660bd9b82",
		"title": "华为",
		"describe": "这是华为",
		"keywords": "华为",
		"pid": "5b9a696c3e7dc24660bd9b7e",
		"addTime": "2018-01-01T00:00:00.000Z"
	}]
}]

js转换为上面数据集,实现数树级递归方法:

 function toTreeAndMap(data) { //递归树算法 将pid-id的数据库返回的json 转为树json
        // 删除 所有 children,以防止多次调用
        data.forEach(function (item) {
            delete item.children;
        });

        // 将数据存储为 以id为KEY的map索引数据列 
        let map = {};
        data.forEach(function (item) {
            map[item._id] = item;
        });
        // console.log(map);

        let val = [];
        data.forEach(function (item) {
            // 以当前遍历项,的pid,去map对象中找到索引的id
            var parent = map[item.pid];
            // 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
            if (parent) {
                (parent.children || ( parent.children = [] )).push(item); //这里更改的是map对象的数据(索引数据)
                // console.log(map);
            } else {
                //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级
                val.push(item);
            }
        });

      
        return {
            treeData:val, //树结构json数据 可以渲染html
            map    //索引数据 方便通过ID查找所有子节点ID
        };
    }
let jsonData = toTreeAndMap(data); 
console.log(jsonData.treeData);  //将data数据 转换成树
console.log(jsonData.map);  //将data数据 转换成 map索引对象

js通过pid 查找所有子节点方法:

    function getAllChildrenNodes(treeParentNode,result = []){ //已知父节点  获取所有子节点ID 参数一 map对象(索引数据)父节点 参数二 存放子节点的数组
        if (treeParentNode.children) { //如果是父节点
            var childrenNodes = treeParentNode.children;
            if (childrenNodes) {
                childrenNodes.forEach((v,i)=>{
                    result.push(v);
                    result = getAllChildrenNodes(v, result);
                });
            }
        }
        return result;
    }
let result =  getAllChildrenNodes(jsonData.map['5b9a696c3e7dc24660bd9b7e']);   //通过父节点ID 查找所有子节点
console.log(result);

分类目录