①带有父子关系的标准
zTreeNodes
举例:
Js代码
1.var zTreeNodes = [
2.{"id":1, "name":"test1", "nodes":[
3.{"id":11, "name":"test11", "nodes":[
4.{"id":111, "name":"test111"}
5."id":12, "name":"test12"}
②带有父子关系的简单
Array
格式
(isSimpleData)的zTreeNodes
举例：
Js代码
1.var treeNodes = [
2. {"id":1, "pId":0, "name":"test1"},
3.{"id":11, "pId":1, "name":"test11"},
4. {"id":12, "pId":1, "name":"test12"},
5. {"id":111, "pId":11, "name":"test111"},
例子：
(Java代码)
①在页面引用
zTree的js和css：
Html代码
1.
<!-- ZTree树形插件 -->
2.<link
rel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"type
="text/css">
3.<!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css"> -->
4.<script ype="text/javascript"src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"
></script>
自实现树形菜单使用html+css+js实现了树形菜单，具体的实现思路如下：
html中定义包含树形菜单的容器节点
规划好树形菜单的样式以及图标
使用js构建html结构以及绑定事件，实现树形菜单的点击折叠
实现效果图如下：
核心的实现是构建html结构，组织树状结构的数据，使用递归构建树，在本次实现中html的组织有两种形式，具体如下所述：
- 子菜单和父菜单逻辑上形成父子关系，结构上是分离的
- 子菜单和父菜单逻辑以及机构上都是父子关系
在刚一开始，我实际上是实现的第一种形式的，该形式的html结构体现如下：
<ul>
<li>菜单1</li>
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
</ul>1234567
后来又补充了下一种形式的（这种更常见），该形式的html结构体现如下：
<ul>
<li>
<span>菜单1</span>
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
</li>
</ul>123456789
递归形成树形菜单结构的代码如下（第二种形式）：
tool.menuView = function(parentNode, menu) {
if (!parentNode || parentNode.nodeType !== 1 || !Array.isArray(menu)) return
for (let i = 0i <menu.lengthi++) {
let option = menu[i], name = option.name,
children = option.children,
liNode = tool.createElement('li')
tool.append(parentNode, liNode)
if (children &&children.length >0) {
let ulNode = tool.createElement('ul')
tool.menuView(ulNode, children)
let [iNode, spanNode] = tool.createElement(['i', 'span'])
spanNode.innerText = name
iNode.className = 'fa fa-play'
tool.append([liNode, parentNode, liNode], [[iNode, spanNode], [liNode], [ulNode]])
} else {
liNode.innerText = name
}
}
}12345678910111213141516171819
需要传入的数据形式如下：
data = [
{
name: '菜单1',
children: [
{
name: '子菜单1'
},
{
name: '子菜单2
}
]
}
]12345678910111213
构建树形结构是关键的一步，之后就是对交互的处理，
