创建树dom && 转化平铺数据结构为树型结构

@根据树形数据，创建树

var data = [
    {
        name: '鬼剑士',
        id: 'aaa',
        age: 33,
        children: [
            {
                name: '红狗',
                age: 666,
                id: '111'
            },
            {
                name: '瞎子',
                id: '222',
                age: 9999,
                children: [
                    {
                        name: '吾为天帝，当镇世间一切敌！',
                        id: '2222-1'
                    }
                ]
            },
            {
                name: '鬼泣',
                age: 99999,
                id: '333'
            },
            {
                name: '剑魂',
                age: 99,
                id: '444'
            }
        ]
    },
    {
        name: '神枪手',
        age: 44,
        id: 'bbb'
    },
    {
        name: '格斗家',
        age: 55,
        id: 'ccc'
    },
    {
        name: '魔法师',
        age: 16,
        id: 'ddd'
    },
    {
        name: '暗夜使者',
        id: 'eee'
    },
];

 

// 创建树dom
function createTree(data) {
    function _fn(list) {
        var res = '';
        list.forEach(function(item){
            if(item.children && item.children.length){
                res += '<div class="margin-left"><span>'+ item.name +'</span><div>'+ _fn(item.children) +'</div></div>';
            }else{
                res += '<div class="margin-left"><span>'+ item.name +'</span></div>';
            }
        });
        return res
    }
    return '<div>'+_fn(data) +'</div>'
}

$('#tree').append(createTree(data))

 

@转化平铺数据为树形结构； 子对象需要有parentId，表示主对象的id

var data2 = [
    {
        name: '鬼剑士',
        id: 'aaa',
    },
    {
        name: '红狗',
        id: '111',
        parentId: 'aaa'
    },
    {
        name: '瞎子',
        id: '222',
        parentId: 'aaa'
    },
    {
        name: '吾为天帝，当镇世间一切敌！',
        id: '2222-1',
        parentId: '222'
    },
    {
        name: '神枪手',
        id: 'bbb'
    }
];

// 将平铺数据转化为树型结构。 

function parseDataToTree(data) {
		var max = 20;	// 最多20层树型嵌套结构，应该够用了；
		var fa = [], son = []; 	// 将第一层数据和其他子对象分开存放；
		if (!data.length) {
			return fa
		}
		data.map(function (item) {
			if (item.hasOwnProperty('pid')) {
				son.push(item)
			} else {
				fa.push(item)
			}
		});

		// 向fa中添加子对象； 添加成功返回true, 失败返回false
		function addChildren(data, child) {
			var len = data.length;
			while (len--) {
				var item = data[len];
				if (child.pid === item.rowId) {
					if (item.hasOwnProperty('children')) {
						item.children.unshift(child)
					} else {
						item.children = [child]
					}
					return true
				}
				if (item.hasOwnProperty('children')) {
					var res = addChildren(item.children, child);
					if (res) {
						return res
					}
				}
			}
			return false
		}

		// 循环子对象，将子对象添加到父对象中； 若添加成功，则从son中删除该子对象，直到子对象son数组为空；
		function findFather(child) {
			if(max < 1) {
				console.error('有子对象没有匹配到主对象，请检查数据');
				return;
			}
			max--;
			var len = child.length;
			while (len--) {
				var res = addChildren(fa, child[len]);
				if (res) {
					child.splice(len, 1)
				}
			}
			if (child.length) findFather(child);
		}

		findFather(son);

		return fa
	}

parseDataToTree(data2)