layui源码详细分析之树形菜单_玉案轩窗的博客-CSDN博客_layui源码

baacloud免费翻墙vpn注册使用

来源: layui源码详细分析之树形菜单_玉案轩窗的博客-CSDN博客_layui源码

前言
今天分析的是layui框架内置模块tree.js,该模块的功能是构建树形菜单,具体的形式(layui官网该模块的具体形式)如下:

自实现树形菜单
使用html+css+js实现了树形菜单,具体的实现思路如下:

html中定义包含树形菜单的容器节点
规划好树形菜单的样式以及图标
使用js构建html结构以及绑定事件,实现树形菜单的点击折叠
实现效果图如下:

核心的实现是构建html结构,组织树状结构的数据,使用递归构建树,在本次实现中html的组织有两种形式,具体如下所述:
– 子菜单和父菜单逻辑上形成父子关系,结构上是分离的
– 子菜单和父菜单逻辑以及机构上都是父子关系

在刚一开始,我实际上是实现的第一种形式的,该形式的html结构体现如下:

<ul>
<li>菜单1</li>
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
</ul>
1
2
3
4
5
6
7
后来又补充了下一种形式的(这种更常见),该形式的html结构体现如下:

<ul>
<li>
<span>菜单1</span>
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
</li>
</ul>
1
2
3
4
5
6
7
8
9
递归形成树形菜单结构的代码如下(第二种形式):

tool.menuView = function(parentNode, menu) {
if (!parentNode || parentNode.nodeType !== 1 || !Array.isArray(menu)) return;
for (let i = 0; i < menu.length; i++) {
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;
}
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
需要传入的数据形式如下:

data = [
{
name: ‘菜单1’,
children: [
{
name: ‘子菜单1’
},
{
name: ‘子菜单2
}
]
}
];
1
2
3
4
5
6
7
8
9
10
11
12
13
构建树形结构是关键的一步,之后就是对交互的处理,该模块的具体代码组织如下图:

本次实现较大的缺点:

可扩展性不强,对于树形菜单的css样式没有考虑作为模块来调用的形式,传入的容器id写死了(css样式)
下面来分析下layui内置的tree.js模块的具体实现以及模块代码组织结构,tree.js的代码组织如下图所示:

基本的使用形式是:layui.tree(options),简洁易用。该内置模块内容使用JQuery,对于树形结构的形成同样是采用递归形式生成,不过该内置模块还提供皮肤模式的选择等,对于扩展性等方面非常不错。

该内置模块的源码详细注释以及自实现demo一如既往会上传到我的Github上,每天都要接触新的知识点,将知识变为自己的永远是最好的。
————————————————
版权声明:本文为CSDN博主「玉案轩窗」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/s1879046/article/details/77071940

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏