jsvascript使用dhtmlXTreeObject的loadJSONObject绘制目录树

文章目录

  • 1,引入dhtmlXTreeObject的css和js文件
  • 2,创建一棵目录树
    • 2.1,let tree = new dhtmlXTreeObject(`id-dhtmltree-0`, "100%", "100%", 0);
    • 2.2,设置图片根目录(后续使用到的图片都是相对于该目录的)
  • 3,代码

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/129241.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux---(五)三大工具yum、vim、gcc/g++

文章目录 一、yum工具1.Linux中安装软件的方法:2.什么是yum?3.yum源更新 二、Linux编辑器--vim1.IDE例子2.vim(1)vim的常用模式及切换模式(2)底层模式常用命令(3)插入模式常用命令(…

网工内推 | 运维工程师,软考认证优先,全额社保

01 北京中科网威信息技术有限公司 招聘岗位:运维工程师 职责描述: 1 熟悉网络安全标准,等级保护管理制度 2 负责等级保护管理制度的的企业管理要求编写; 3 熟系网络组网和相关安全产品; 4 负责用户需求挖掘、分析和…

大数据-之LibrA数据库系统告警处理(ALM-12036 license文件即将过期)

告警解释 系统每天零点检查一次当前系统中的license文件,如果当前时间距离过期时间不足60天,则license文件即将过期,产生该告警。 当重新导入一个正常license,告警恢复。 说明: 如果当前集群使用节点数小于等于10节…

Python数据容器(字符串)

字符串 1.字符串 字符串也是数据容器的一种,字符串是字符的容器,一个字符串可以存放任意数量的字符。 2.字符串的下标索引 从前向后,下标从0开始从后向前,下标从-1开始 # 通过下标索引获取特定位置的字符 name python print(na…

P1529 [USACO2.4] 回家 Bessie Come Home 题解

文章目录 题目描述输入格式输出格式样例样例输入样例输出 提示完整代码 题目描述 现在是晚餐时间,而母牛们在外面分散的牧场中。 Farmer John 按响了电铃,所以她们开始向谷仓走去。 你的工作是要指出哪只母牛会最先到达谷仓(在给出的测试数…

半导体高加速应力测试及标准

半导体高加速应力测试及标准 随着电气和电子元件变得越来越密集,现在对零件和材料的高度加速应力测试的需求更大。 高加速应力测试系统(HAST 室)主要设计用于使用设定的施加电压和信号进行偏置测试。 控制功能可选择标准的不饱和控制和湿饱和…

Python MySQL 数据库查询:选择数据、使用筛选条件、防止 SQL 注入

从表格中选择数据 要从MySQL中的表格中选择数据,请使用"SELECT"语句: 示例选择"customers"表格中的所有记录,并显示结果: import mysql.connectormydb mysql.connector.connect(host"localhost"…

【PostgreSql本地备份为dump文件与恢复】使用脚本一键备份为dump文件

环境:windows数据库:postgresql 1.准备脚本 backUpDb.bat 脚本为备份脚本,双击运行,右键可以选择编辑;restoreDb.bat 脚本为恢复脚本,双击运行,右键选择编辑; 1.1 脚本介绍 如上图…

Flink之SQL客户端与DDL操作

SQL客户端与DDL操作 Flink SQLSQL客户端1.启动Flink2.启动Flink的SQL客户端3.HELP命令4.验证连接5.结果显示模式6.执行配置 数据库操作1.创建数据库2.查询数据库3.修改数据库4.删除数据库 表操作1.创建表表列属性表Watermark属性列PRIMARY KEY属性列PARTITIONED BY属性列WITH选…

c: struct sort descending and ascending in windows and Ubuntu

/*** file StudentStructSort.h* author geovindu,Geovin Du,涂聚文 (geovindu163.com)* ide: vscode c11,c17 Ubuntu 22.4* brief 结构体排序示例* date 2023-11-05* version 0.1* copyright geovindu 站在巨人的肩膀上 Standing on the Shoulders of Giants**/#ifnd…

matplotlib从起点出发(11)_Tutorial_11_TightLayout

如何使用紧凑的而已来干净利落地将绘图放入图形中。 tight_layout会自动调整子图参数,使子图适合图区域。这是一项实验性功能,在某些情况下可能不起作用。它仅检查刻度标签、轴标签和标题的范围。 tight_layout的替代方法是constrained_layout。 1 简…

10. GPIO中断

10. GPIO中断 回顾stm32中断系统STM32中断向量表中断向量偏移NVIC中断控制器 Cortex_A7 中断系统中断向量表GIC控制器中断IDGIC逻辑分块CP15协处理器c0寄存器c1寄存器c12寄存器c15寄存器 中断使能中断优先级设置优先级数配置 GICC_PMR抢占优先级和子优先级位数设置 GICC_BPR优先…

【C++】异常 智能指针

C异常 & 智能指针 1.C异常1.1.异常的抛出与捕获1.2.异常体系1.3.异常安全与规范1.4.异常优缺点 2.智能指针2.1.RAII2.2.智能指针的使用及原理2.2.1.auto_ptr2.2.2.unique_ptr2.2.3.shared_ptr2.2.4.shared_ptr的循环引用问题 & weak_ptr 2.3.定制删除器 1.C异常 C异常…

UML类图绘制指南

目录 类图简介 什么是类图 类图的作用 应用场景 类图中的元素 类和接口 六大关系 强弱关系 依赖关系: 关联关系: 聚合关系: 组合关系: 实现关系: 继承关系: 画图注意事项 总结 类图的重要…

NIO讲解

一:什么是NIO? 二:NIO三大组件 1. channel channel 有一点类似于 stream,它就是读写数据的双向通道,可以从 channel 将数据读入 buffer,也可以将 buffer 的数据写入 channel,而之前的 stream 要么是输入…

P1547 [USACO05MAR] Out of Hay S 题解

文章目录 题目描述输入格式输出格式样例样例输入样例输出 完整代码 题目描述 Bessie 计划调查 N N N( 2 ≤ N ≤ 2 000 2 \leq N \leq 2\,000 2≤N≤2000)个农场的干草情况,它从 1 1 1 号农场出发。农场之间总共有 M M M( 1 ≤…

阻塞队列+定时器+常见的锁策略

1)阻塞队列:是一个线程安全的队列,是可以保证线程安全的 1.1)如果当前队列为空,尝试出队列,进入阻塞状态,一直阻塞到队列里面的元素不为空 1.2)如果当前队列满了,尝试入队列,也会产生阻塞,一直阻…

(论文阅读24/100)Visual Tracking with Fully Convolutional Networks

文献阅读笔记(sel - CNN) 简介 题目 Visual Tracking with Fully Convolutional Networks 作者 Lijun Wang, Wanli Ouyang, Xiaogang Wang, and Huchuan Lu 原文链接 http://202.118.75.4/lu/Paper/ICCV2015/iccv15_lijun.pdf 【DeepLearning】…

easyexcel==省市区三级联动

省市区三级联动,不选前面的就没法选后面的 package com.example.demoeasyexcel.jilian2; import com.alibaba.excel.write.metadata.holder.WriteSheetHolder; import com.alibaba.excel.write.metadata.holder.WriteWorkbookHolder; import org.apache.poi.ss.use…

IT 基础设施监控工具

IT 基础架构监控作为一个整体,是关于跟踪网络环境中所有 IT 资产的运行状况和性能,网络管理系统收集有关各种指标的数据,例如可用性、运行状况、性能和利用率,然后,IT 基础架构监控将这些数据转换为有用的统计数据&…