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!")
            });
相关推荐
清风细雨_林木木16 分钟前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
大熊猫侯佩18 分钟前
iOS 26 仅需几行代码让 SwiftUI 7 液态玻璃界面焕发新春
前端·swiftui·apple
BillKu1 小时前
Vue3应用执行流程详解
前端·javascript·vue.js
欧阳天风1 小时前
链表运用到响应式中
javascript·数据结构·链表
Codebee1 小时前
OneCode 移动套件多平台适配详细报告
前端·人工智能
你知唔知咩系timing啊1 小时前
🎙️ 站在巨人肩膀上:基于 SenseVoice.cpp 的前端语音识别实践
前端
一位搞嵌入式的 genius1 小时前
前端开发核心技术与工具全解析:从构建工具到实时通信
前端·笔记
littleplayer1 小时前
Redux 中›ABC三个页面是如何通信的?
前端
安卓开发者1 小时前
鸿蒙NEXT的Web组件网络安全与隐私保护实践
前端·web安全·harmonyos