html ul树形,渲染ul-li树形结构

[TOC]

>[success] # 渲染ul-li树形结构

需求：请求接口后，根据后端返回的数据进行渲染成ul li的树的结构样式。

树型数据结构：

~~~

var data = [

{

name: '1',

hasChild: false,

child: []

},

{

name: '2',

hasChild: true,

child: [

{

name: '2-2',

hasChild: false,

child: []

}

]

}

]

~~~

要实现的效果：

~~~

• 1
• 2
  • 2-2

~~~

>[success] ## 实现思路1(for循环)

~~~

这种方式虽然也能实现，但是仅限'已知层级的树形结构'，如果是无限层级的树就需要用递归的方式实现。

~~~

~~~

// 拼接变量

var str = '';

str = '

• '

for (var i = 0; i < data.length; i++) { // 循环第一层树节点

str += '

' + data[i].name;

if (data[i].hasChild && !!data[i].child) { // 是否存在子级

str += '

• '

for (var j = 0; j < data[i].child.length; j++) { // 循环第二层树节点

str += '

' + data[i].child[j].name + ''

}

str += '

'

}

str += '

'

}

str += '

'

~~~

>[success] ## 实现思路2(递归)

~~~

// 递归树

function recursive(data) {

var str = '

• ';

for (var i = 0; i < data.length; i++) { // 循环第一层树节点

str += '

' + data[i].name

if (data[i].hasChild && !!data[i].child) { // 循环第N层树节点

str += recursive(data[i].child) // 子节点拼接好return返回的数据:

• 2-2

}

str += '

'

}

str += '

';

return str

}

~~~