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!")
            });
相关推荐
拾光拾趣录5 分钟前
虚拟DOM
前端·vue.js·dom
爱学习的茄子5 分钟前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神6 分钟前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao7 分钟前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风8 分钟前
JS执行机制-event loop
javascript
止观止9 分钟前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
摆烂为不摆烂10 分钟前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神10 分钟前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵10 分钟前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
合作小小程序员小小店10 分钟前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app