JavaScript如何使用dhtmlXTreeObject的loadJSONObject绘制目录树

 更新时间:2023年11月15日 12:05:18   作者:位面元哥  
这篇文章主要介绍了JavaScript如何使用dhtmlXTreeObject的loadJSONObject绘制目录树,需要引入dhtmlXTreeObject的css和js文件,这里还需要注意js的引用顺序,本文给大家介绍的非常详细,需要的的朋友参考下吧

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,代码

            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!")
            });

到此这篇关于jsvascript使用dhtmlXTreeObject的loadJSONObject绘制目录树的文章就介绍到这了,更多相关js dhtmlXTreeObject目录树内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript ECMAScript 6(ES2015~ES2022)所有新特性总结

    JavaScript ECMAScript 6(ES2015~ES2022)所有新特性总结

    这篇文章主要介绍了JavaScript ECMAScript 6(ES2015~ES2022)所有新特性总结,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • 关于HTTP传输中gzip压缩的秘密探索分析

    关于HTTP传输中gzip压缩的秘密探索分析

    Gzip是一种流行的文件压缩算法,现在的应用十分广泛,尤其是在Linux平台。下面这篇文章主要给大家介绍了关于HTTP传输中gzip压缩的相关资料,文中介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2018-01-01
  • javascript 不让鼠标事件触发

    javascript 不让鼠标事件触发

    div上加了onclick事件,里面又有超链a,点超链的时候能不触发div 的事件吗?
    2007-12-12
  • JavaScript点击按钮后弹出透明浮动层的方法

    JavaScript点击按钮后弹出透明浮动层的方法

    这篇文章主要介绍了JavaScript点击按钮后弹出透明浮动层的方法,可实现点击按钮弹出居中的透明浮动层的效果,涉及javascript操作鼠标事件及页面样式的相关技巧,需要的朋友可以参考下
    2015-05-05
  • 微信小程序常见页面跳转操作简单示例

    微信小程序常见页面跳转操作简单示例

    这篇文章主要介绍了微信小程序常见页面跳转操作,结合简单实例形式总结分析了微信小程序保留页面跳转、关闭页面跳转、返回上一级页面等各种常见的跳转操作实现技巧,需要的朋友可以参考下
    2019-05-05
  • zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题

    zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题

    Swipe JS 是一个轻量级的移动滑动组件,支持 1:1 的触摸移动,阻力以及防滑性能都不错,可以让移动web应用展现更多的内容,能解决我们对于移动Web对滑动的需求。下面小编给大家介绍zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题,需要朋友可以参考下
    2015-08-08
  • 在线演示常用javascript特效

    在线演示常用javascript特效

    图形显示特效鼠标驱动图片变化随机显示banner图片随意移动图片定期消失字符连续消隐文字不停变色JavaScript容错...图片循环显现QQ菜单生成器图形显示特效连续滚动的图片图片水中倒影纯JavaScript时钟图片翻滚导航星星满天闪烁左侧的极酷...
    2008-04-04
  • javascript 实现的类似hao123的多邮箱登录效果

    javascript 实现的类似hao123的多邮箱登录效果

    javascript 实现的类似hao123的多邮箱登录效果...
    2007-08-08
  • 解决js下referer兼容各大浏览器的方法

    解决js下referer兼容各大浏览器的方法

    众所周知,我们web开发人员痛恨IE浏览器,因为IE不支持标准,标准外的默认行为又和其他浏览器经常不一致,所以我们在做项目的时候,经常需要专门针对IE来做些文章,当然对于referer也不例外,今天我们就来看下如何让referer兼容主流浏览器
    2014-11-11
  • 纯JS实现简单的日历

    纯JS实现简单的日历

    这篇文章主要为大家详细介绍了纯JS实现简单日历的的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论