jsvascript使用dhtmlXTreeObject的loadJSONObject绘制目录树

文章目录

1,引入dhtmlXTreeObject的css和js文件

注意: js的引用顺序很关键!!!

2,创建一棵目录树

2.1,let tree = new dhtmlXTreeObject(id-dhtmltree-0, "100%", "100%", 0);

2.2,设置图片根目录(后续使用到的图片都是相对于该目录的)

复制代码
tree.setImagePath("/common/dhtmlxTree/imgs/");


3,代码

javascript 复制代码
            let tree = new dhtmlXTreeObject(`id-dhtmltree-${this.groupId}`, "100%", "100%", 0);
            tree.setImagePath("/common/dhtmlxTree/imgs/");
            //tree.enableCheckBoxes(1);
            let jsonobj = {
                id:0, 
                item:[
                    {
                        id:1,
                        text:"root",
                        im0:"common/dhtmlxtree_icon.gif",
                        im1:"common/dhtmlxtree_icon.gif",
                        im2:"common/dhtmlxtree_icon.gif",
                        item:[
                            {id:2,text:"first"},
                            {id:3, text:"middle", 
                                item:[
                                    {id:"31", text:"child"}
                                ]},
                            {id:4,text:"last"}
                        ]
                    }
                ]
            }
            console.log(tree)
            tree.loadJSONObject(jsonobj, function(){
                console.log("load json to tree success!")
            });
相关推荐
heartmoonq1 分钟前
npm 包抽象封装并发布完整指南
前端
红衣信2 分钟前
深入剖析 hooks-todos 项目:前端开发的实用实践
前端·react.js·面试
今禾2 分钟前
深入理解 JavaScript 事件监听机制
前端·javascript
FogLetter2 分钟前
从饼干到Cookie:前端存储的身份密码本
前端·javascript
Spider_Man6 分钟前
🎭 React受控与非受控组件:一场"控制权"的争夺战
前端·react.js
Mintopia11 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李13 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
Code季风13 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录14 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia15 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js