javascript - js实现懒加载树形菜单的思路

问题描述

问 题

1,使用layui这个ui框架带的树形模块tree
2，树一共有5个层级，默认展开前2级，从2级开始需要懒加载，即点击展开它的时候请求数据加载
3，用sessionstorege缓存树的数据
4，服务端开一个接口实现
5，这个树菜单是一个导航栏，展示在页面左侧，右侧是一个显示区域（类似tab切换），单击展开子节点，双击则切换显示区域的内容，如果单击的节点已经是最小子节点，执行双击的效果。
6，每个父节点上右键可以有一个右键菜单，菜单里面有一个刷新，店里刷新可以刷新这个节点下的数据。

解决方案

layui.tree({
                                elem: '#treeNav',
                                target: '_blank',
                                click: function (item) {
                                    _self.breadcrumb = [];
                                    _self.breadcrumb.push(item.name);
                                    var p = item.Pid;
                                    _self._KnowledgeTree.forEach(function (v, k) {
                                        if (v.id == p) {
                                            _self.breadcrumb.push(v.name);
                                            p = v.Pid;
                                        }
                                    })
                                    _self.breadcrumb.reverse();
                                    _self.knowledgeid = item.id;
                                    freshTable();
                                },
                                nodes: _self.KnowledgeTree
                            });

其中

_self.KnowledgeTree = parseList(d);

parseList(d);

function parseList(list) {
    var map = {};
    list.forEach(function (item) {
        if (!map[item.id]) {
            map[item.id] = item;
        }
    });
    list.forEach(function (item) {
        if (item.Pid != 0) {
            map[item.Pid].children ? map[item.Pid].children.push(item) : map[item.Pid].children = [item];
        }
    });

    return list.filter(function (item) {
        return item.Pid == 0;
    });
}

这篇关于javascript - js实现懒加载树形菜单的思路的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！