当前位置:首页 »“秋了秋”个人博客 » 前端编程 » 文档树、目录树、折叠树、一维树实现方案及父子节点文件夹索引样式

文档树、目录树、折叠树、一维树实现方案及父子节点文件夹索引样式

作者:秋了秋 发表时间:2021年12月25日

用过代码编辑器的都知道,代码的层次结构可以折叠和展开,其中同级之间还有竖线条连接,这样的样式易于找到同级别元素,在很多应用场景都很适用,比如文档树、目录树。如果树的数据过大渲染太多dom到页面势必会造成性能严重损耗,那么会采取虚拟滚动技术方案只渲染可见区域的数据,所以dom tree就不能有包含父子关系否则会很难处理,最好就是拍平,在dom中表现都是同级别元素,但是在界面显示上却要有层级关系。一维dom树的解决方案我写了个组件qtree,样式大致如下:

    特点:

    1. 一维dom结构,易于做虚拟滚动和动态渲染

    2. 原生js实现,无其他任何依赖

    3. 样式美观


    使用:

    页面引入qtree.js和qtree.css之后使用renderQtreeData渲染数据

    renderQtreeData(data, document.getElementById('tree-ul'));

    容器元素必须是ul。

    data的数据结构:

    [
    	{
    		title: 'xxxxx3333333',
    		id: 3,
    		children: [
    			{
    				title: 'xxxxx3333333.1',
    				id: 4
    			},
    			{
    				title: 'xxxxx3333333.4',
    				id: 7,
    				children: [
    					{
    						title: 'xxxxx3333333.4.1',
    						id: 8
    					},
    					{
    						title: 'xxxxx3333333.4.2',
    						id: 9
    					},
    					{
    						title: 'xxxxx3333333.4.3',
    						id: 10
    					},
    				]
    			},
    		]
    	},
    	{
    		title: 'xxxxx4444444',
    		id: 12
    	}
     ];

    注意:id不能出现重复


    代码托管于github:https://github.com/mizuiren/qtree

    3
    文章作者: “秋了秋”个人博客,本站鼓励原创。
    转载请注明本文地址:http://www.mizuiren.com/blog/103.html
    目录: 前端编程标签: qtree,文档树,目录树 517次阅读

    请求播放音乐,请点击播放

    登 录
    点击获取验证码
    还没账号?点击这里