当前位置: 首页 > news >正文

vue 引入zTree

下载js包解压后找个地方放文件夹内

引入

import "@/common/zTree/js/jquery-1.4.4.min"
import "@/common/zTree/js/jquery.ztree.core.min.js"
import "@/common/zTree/js/jquery.ztree.excheck.min.js"
import "@/common/zTree/css/metroStyle/metroStyle.css"
<div id="treeDemo" class="ztree"></div>

初始化

 this.ztreeObj = $.fn.zTree.init($("#treeDemo"), this.setting,this.treeData);

treeData:自己的原始数据,树结构数据,setting:设置
原始数据中,每一层添加open:true,即可自动展开
添加checked:true 即可默认选中

setting: {treeId: "id",data: {simpleData: {enable: true,idKey:'sid',pIdKey:'pid',rootPId:'-'},key:{isParent: "parent",name:'projectName', //需要显示的字段名称title:'projectName'},},check:{enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框nocheckInherit:true  //当父节点设置 nocheck = true 时,设置子节点是否自动继承 nocheck = true },callback: {// 树的点击事件onClick: this.zTreeOnClick,//点击回调onCheck: this.oncheck, //点击选中 checkboxonAsyncSuccess: this.zTreeOnAsyncSuccess,//异步加载成功的funbeforeAsync: this.zTreeBeforeAsync,//异步加载前的回调onExpand: this.expandNode//节点展开回调},edit: {//是否支持拖拽,enable我改成了false,代表此功能禁用,也可以直接删除,为了防止后续他们提这个需求,所以我还是写上了drag: {isMove: true,prev: true,next: true,inner: true},enable: false,showRemoveBtn: false,showRenameBtn: false},view:{// addHoverDom:this.addhoverdom,//ztree提供的可以自定义添加dom// removeHoverDom:this.removehoverdom,//和addHoverDom成对出现,离开节点时需要移除自定义的dom// fontCss: function (treeId, treeNode) {//设置所有节点的样式,我这里的代码的意思是,当前节点是否高亮(树节点搜索的时候会高亮命中的节点),高亮就设置节点高亮样式,否则就是普通样式//     return (!!treeNode.highlight) ? {'backgroundColor':'#F6F7F8','display':'inline-block','width':'95%','min-width':'225px','padding':'3px 0'} : {//             color: "#000000", "font-weight": "normal"//         };// },showTitle:true //是否显示titie属性(就是鼠标放到节点上是否显示html元素的title属性)},// async:{//节点很多的情况下设置懒加载//     enable:true,//是否开启异步加载模式//     contentType: "application/json",//Ajax 提交参数的数据类型//     dataType: "json",//Ajax 获取的数据类型//     // url:'/aa/bbb/ccc/loadTree',//点击树的展开节点,会重新加载子节点,这里是请求的url地址//     type:'POST',//当前的请求类型//     // autoParam:['id=parentId'],//将节点的pId值作为参数传递//     // otherParam:{'userId':()=>{return this.userId;},'userName':()=>{return this.userName;},'tenantId':()=>{return this.tenantId;}}//     otherParam:{'userId':this.userId,'userName':this.userName,'tenantId':this.tenantId,'parentId':'-'},//每次异步请求携带的参数//     dataFilter:function(treeId, parentNode, resp){//         sessionStorage.setItem('tongbunodes',JSON.stringify(resp.jsSubjects.children));//         return resp.subjects;//     }//对 Ajax 返回数据进行预处理的函数,就是异步加载返回的数据你可以处理一下再用// }
//点击
zTreeOnClick(event, treeId, treeNode){if(allSid.indexOf(treeNode.proid) != -1){this.ztreeObj.checkNode(treeNode, false, true);//取消勾选}else{            this.ztreeObj.checkNode(treeNode, true, true);//勾选}
}
//选中oncheck(event, treeId, treeNode){}

相关文章:

vue 引入zTree

下载js包解压后找个地方放文件夹内 引入 import "/common/zTree/js/jquery-1.4.4.min" import "/common/zTree/js/jquery.ztree.core.min.js" import "/common/zTree/js/jquery.ztree.excheck.min.js" import "/common/zTree/css/metroSt…...

链队列的基本操作(带头结点,不带头结点)

结构体 typedef struct linknode{int data;struct linknode* next;后继指针 }linknode; typedef struct {linknode* front, * rear;//队头队尾指针 }linkquene; 初始化队列&#xff08;带头结点&#xff09; int initquene(linkquene* q)//初始化队列 {q->front q->r…...

深入学习 Redis Cluster - 基于 Docker、DockerCompose 搭建 Redis 集群,处理故障、扩容方案

目录 一、基于 Docker、DockerCompose 搭建 Redis 集群 1.1、前言 1.2、编写 shell 脚本 1.3、执行 shell 脚本&#xff0c;创建集群配置文件 1.4、编写 docker-compose.yml 文件 1.5、启动容器 1.6、构建集群 1.7、使用集群 1.8、如果集群中&#xff0c;有节点挂了&am…...

C现代方法(第3、4章)笔记

文章目录 C现代方法笔记&#xff08;chapter3&4&#xff09;第3章 格式化输入/输出3.1 printf函数3.1.1 转换说明3.1.2 转义序列 3.2 scanf函数3.2.1 scanf函数的工作方法3.2.2 格式串中的普通字符3.2.3 易混淆的printf函数和scanf函数 问与答编程题 第4章 表达式4.1 算术运…...

R语言绘制染色体变异位置分布图,RIdeogram包

变异位点染色体分布图 今天分享的内容是通过RIdeogram包绘制染色体位点分布图&#xff0c;并介绍一种展示差异位点的方法。 在遗传学研究中&#xff0c;通过测序等方式获得了基因组上某些位置的基因型信息。 如下表&#xff0c;第一列是变异位点的ID&#xff0c;第二列是染色体…...

Vue知识系列(7)每天10个小知识点

目录 系列文章目录Vue知识系列&#xff08;1&#xff09;每天10个小知识点Vue知识系列&#xff08;2&#xff09;每天10个小知识点Vue知识系列&#xff08;3&#xff09;每天10个小知识点Vue知识系列&#xff08;4&#xff09;每天10个小知识点Vue知识系列&#xff08;5&#x…...

5分钟就能实现的API监控,有什么理由不做呢?

API深度影响着你的应用 今天的数字应用世界其实是一个以API为中心的世界&#xff0c;我们只是没有意识到这些API的重要性。比如在电子商务交易、社交媒体等对交互高度依赖的领域&#xff0c;可以说API决定了应用的质量一点也不为过。 以京东为例&#xff0c;用户的每一次操作背…...

Jmeter引入外部jar包以满足加密数据的Post请求

目录 一、把项目打成jar包 1、创建一个Maven项目&#xff0c;并保证可以正常运行。 2、把工具类放置项目中&#xff0c;确保无报错且能够正常使用。 3、打包 4、验证 jar包是否有效 5、你想打多个工具类的包 二、在jmeter中使用 1、把jar包放到jmeter仓库下&#xff0c;…...

了解冒泡排序

package com.mypackage.array;import java.util.Arrays;public class Demo07 {public static void main(String[] args) {int[] a {3,2,6,7,4,5,6,34,56,7};int[] sort1 sort1(a); //调用我们自己写的排序方法后&#xff0c;返回一个排序后的数组System.out.println(Array…...

群辉 Synology NAS Docker 安装 RustDesk-server 自建服务器只要一个容器

from https://blog.zhjh.top/archives/M8nBI5tjcxQe31DhiXqxy 简介 之前按照网上的教程&#xff0c;rustdesk-server 需要安装两个容器&#xff0c;最近想升级下版本&#xff0c;发现有一个新镜像 rustdesk-server-s6 可以只安装一个容器。 The S6-overlay acts as a supervi…...

为什么要有override

多态一定会成功吗 因为逻辑是用户编写的&#xff0c;那么肯定会有遗漏的地方&#xff0c;那就要规则来限制。就比如多态&#xff0c;都知道条件之一是子类重写了父类的虚函数&#xff0c;但是如果子类没有严格遵守这个规则&#xff0c;就无法达到目的。就比如这个代码&#xf…...

Linux界的老古董

Slackware 是由 Patrick Volkerding 制作的 Linux 发行版&#xff0c;从 1993 年发布至今也一直在 Patrick 带领下进行维护。7 月 17 日&#xff0c;Slackware 才刚刚过完它 24 岁的生日&#xff0c;看似年纪轻轻的它&#xff0c;已然是 Linux 最古老的发行版。 Slackware 的发…...

安卓逆向 - Xposed入门教程

一、引言 Xposed框架&#xff0c;是Android中Hook技术的一个著名的框架&#xff0c;拥有非常丰富的模块&#xff0c;给我们分析app提供了极大的便利&#xff0c;Xposed框架是开源的。最高支持到Android 8&#xff08;重要&#xff09; github地址&#xff1a;GitHub - rovo89…...

【嵌入式】2024届校招岗位汇总

公司岗位博世嵌入式自动化测试工程师博世嵌入式开发&#xff08;软件刷写及启动&#xff09;工程师博世Linux/C软件工程师博世自动驾驶软件开发工程师博世嵌入式软件工程师(BSP)博世嵌入式电子工程师 &#xff08;BMS&电源&#xff09;博世物联网嵌入式开发工程师 &#xf…...

Docker搭建ELK日志采集服务及Kibana可视化图表展示

架构 ES docker network create elkmkdir -p /opt/ELK/es/datachmod 777 /opt/ELK/esdocker run -d --name elasticsearch --net elk -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" -v /opt/ELK/es/plugins:/usr/share/elasticsearch/plugins -v /opt/…...

SpringBoot结合MyBatis实现多数据源配置

SpringBoot结合MyBatis实现多数据源配置 一、前提条件 1.1、环境准备 SpringBoot框架实现多数据源操作&#xff0c;首先需要搭建Mybatis的运行环境。 由于是多数据源&#xff0c;也就是要有多个数据库&#xff0c;所以&#xff0c;我们创建两个测试数据库&#xff0c;分别是…...

单个vue echarts页面

<template> <div ref"history" class"echarts"></div> </template> <script> export default{ data () { return {}; }, methods: { history(){ let myChart this.$echarts.init(this.$refs.history); // 绘制图表 myCha…...

【web开发】6、Django(1)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、Django是什么&#xff1f;二、使用步骤1.安装Django2.创建项目3.创建app4.快速上手5.模板继承 数据库操作1.安装第三方模块2.自己创建数据库3.DJango链接数据库…...

第29节-PhotoShop基础课程-滤镜库

文章目录 前言1.滤镜库2.Camera Raw滤镜 &#xff08;用来对图片进行预处理&#xff0c;最全面的一个&#xff09;3.神经滤镜&#xff08;2022插件 需要先下载&#xff09;4.液化&#xff08;胖-> 瘦 矮->高&#xff09;5.其它滤镜1.自适应广角2.镜头矫正 把图片放正3.消…...

空间(蓝桥杯)

空间 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 小蓝准备用 256MB 的内存空间开一个数组&#xff0c;数组的每个元素都是 32 位 二进制整数&#xff0c;如果不考虑程序占用的空间和维护内存需要的辅助空间&#xff0c;…...

RPA-Python与pytest-google-app-engine集成:Google App Engine测试自动化完整指南

RPA-Python与pytest-google-app-engine集成&#xff1a;Google App Engine测试自动化完整指南 【免费下载链接】RPA-Python Python package for doing RPA 项目地址: https://gitcode.com/gh_mirrors/rp/RPA-Python RPA-Python是一个功能强大的Python机器人流程自动化工…...

158.基于matlab的用于分析弧齿锥齿轮啮合轨迹的输出齿轮啮合轨迹及传递误差程序已调通

158.基于matlab的用于分析弧齿锥齿轮啮合轨迹的输出齿轮啮合轨迹及传递误差程序已调通&#xff0c;可直接运行1. 引言&#xff1a;TCA技术的重要性与挑战 弧齿锥齿轮作为机械传动系统的核心部件&#xff0c;其啮合质量直接影响整个传动装置的可靠性、效率和使用寿命。齿面接触分…...

为什么你的STM32F103工程编译失败?可能是启动文件没选对!

为什么你的STM32F103工程编译失败&#xff1f;可能是启动文件没选对&#xff01; 在嵌入式开发领域&#xff0c;STM32系列微控制器因其出色的性能和丰富的外设资源而广受欢迎。然而&#xff0c;即使是经验丰富的开发者&#xff0c;在STM32F103项目开发过程中也难免会遇到各种编…...

VSCode + CMake + MinGW 配置踩坑实录:从‘make’命令报错到一键编译调试全搞定

VSCode CMake MinGW 配置踩坑实录&#xff1a;从‘make’命令报错到一键编译调试全搞定 如果你正在尝试用VSCode搭建C开发环境&#xff0c;大概率已经看过无数篇教程&#xff0c;但依然会在某个环节卡住——可能是CMake找不到编译器&#xff0c;可能是调试器无法启动&#x…...

工厂里EtherCAT从站模块坏了别慌!手把手教你用Startup list和CoE-online快速换新(附配置顺序避坑指南)

工厂EtherCAT从站模块更换实战指南&#xff1a;Startup list与CoE-online的高效应用 当生产线上的EtherCAT从站模块突然罢工&#xff0c;设备维护工程师往往面临两难选择&#xff1a;是临时在线修改参数快速恢复生产&#xff0c;还是彻底解决"即插即用"的配置难题&am…...

数智驱动 人才筑基——拔尖创新人才与卓越工程师培养论坛举行

3月22日&#xff0c;第二届高等院校新工科人才培养暨产教融合发展大会在北京举行。大会以“科技创新 智造未来”为主题&#xff0c;来自全国各地的本科院校、职业院校、行业企业以及媒体等1000余位嘉宾参会。22日下午&#xff0c;数智驱动 人才筑基——拔尖创新人才与卓越工程师…...

电脑c盘变红了怎么清理?C盘清理工具与方法

电脑c盘变红了怎么清理&#xff1f;问题不难解决&#xff0c;关键是选对方法工具&#xff01;下面介绍实用的清理C盘方法&#xff0c;便于你解决C盘变红的问题哦&#xff01; 关于C盘清理工具&#xff0c;给大家安排一款针对C盘爆满的清理神器---Windows - Cleaner&#xff0c…...

实战jdk1.8新特性:在快马平台用lambda和stream处理订单数据

最近在重构一个老项目的订单模块时&#xff0c;决定全面升级到JDK1.8。这个版本引入的lambda和Stream API真是让人眼前一亮&#xff0c;尤其是处理集合数据时&#xff0c;代码量直接减半。今天就用InsCode(快马)平台带大家实战这些新特性&#xff0c;模拟一个订单数据处理系统。…...

Clawdbot网关配置教程:实现Qwen3-VL:30B与飞书的无缝对接

Clawdbot网关配置教程&#xff1a;实现Qwen3-VL:30B与飞书的无缝对接 1. 准备工作与环境概述 在开始配置前&#xff0c;请确保已完成以下准备工作&#xff1a; 已在CSDN星图AI云平台完成Qwen3-VL:30B的私有化部署&#xff08;参考上篇教程&#xff09;拥有飞书开放平台的企业…...

LFM2.5-1.2B-Thinking-GGUF效果展示:同一Prompt下Thinking中间态与终版回答对比图

LFM2.5-1.2B-Thinking-GGUF效果展示&#xff1a;同一Prompt下Thinking中间态与终版回答对比图 1. 模型简介 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型&#xff0c;特别适合在资源有限的环境中快速部署和使用。该模型采用GGUF格式存储&#xff0c;通过ll…...