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!")
            });
相关推荐
未来之窗软件服务14 分钟前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友1 小时前
什么是断言?
前端·后端·安全
FIN66682 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4952 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1242 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树2 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66682 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER2 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰2 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木2 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js