ztree结合hmap使用经验分享

项目背景

在建德封控拦截系统（Vue3+antd@2.x）为追求更快的地图初始化体验，在尝试了hmap2.5.0版本以及2.6.3版本后，由于这两个版本在现场电脑的初始化速度不够流畅，最终使用的是hmap2.1.3版本。同时由于布控选设备（树结构）存在子节点较多的情况（1000+），导致antd@2.x版本的tree组件在进行加载节点和勾选操作时回显卡顿，结合基线项目类似功能确定使用ztree插件来解决此问题。

使用场景

通过按钮出发弹窗，弹窗中两个tab项：目录选择和地图选择。

在这里插入图片描述

结合使用存在的问题

安装ztree插件，并在对应的vue文件中使用。此时如果在public中的index.html文件中通过script标签已经引入了hmap2.3.0.js文件，控制台会报错：

在这里插入图片描述

问题原因

引入本地hmap2.3.0.js文件修改了数组原型Flat方法，同时ztree插件中引入的jquery也需要使用原生的Flat方法。由于前者，导致ztree在使用的时候初始化树节点报错，无法创建树节点。

解决方案

  1. 在App.vue文件的onMounted钩子函数中对引入hamp2.3.0.js文件后的原型Flat方法进行缓存

    <script setup>
import { useStore } from 'vuex';
const store = useStore();
    
onMounted(() => {
	store.commit('setFlatFunc', Array.prototype.flat);
});
</script>

  2. 在树组件中的mounted钩子函数中重置数组原型Flat方法：

在这里插入图片描述

  1. 在使用到ztree时，先重置flat方法；使用结束后，在onUnmounted钩子函数进行flat方法重置为缓存中的flat函数。

    <script>
import { onUnmounted, computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
    
const flatFunc = computed(() => {
    return store._state.data.flatFunc;
});
onUnmounted(() => {
   Array.prototype.flat = flatFunc;
});
</script>

zTree的使用

官网： https://www.treejs.cn/v3/main.php#_zTreeInfo

样例demo： https://www.treejs.cn/v3/demo.php#_101

api文档： https://www.treejs.cn/v3/api.php

  1. 安装 zTree 插件
npm install ztree --save
  1. 在组件中引入 zTree：在需要使用 zTree 的组件中，可以通过 import 语句引入 zTree：
import $ from 'jquery';
import 'ztree/css/zTreeStyle/zTreeStyle.css';
import 'ztree/js/jquery.ztree.all.js';

  1. 此时如果控制台报错

    在这里插入图片描述

    需要在vue.config.js中添加代码：

    在这里插入图片描述

  2. 在组件的 mounted() 钩子函数中初始化 zTree：在组件加载完成后，可以在 mounted() 钩子函数中初始化 zTree：

    <template>
  <div>
    <div id="tree"></div>
  </div>
</template>
<script>
mounted() {
  this.initZTree();
},

methods: {
  initZTree() {
    const setting = {
      // zTree 的配置参数
      // ...
    };

    const zNodes = [
      // zTree 的节点数据
      // ...
    ];

    $.fn.zTree.init($("#tree"), setting, zNodes);
  }
}
</script>
异步树+后台自动加载代码实现：
<template>
  <div class="ztree tree-wrapper" id="treeWrapper"></div>
</template>
<script setup>
import $ from 'jquery';
import 'ztree/css/zTreeStyle/zTreeStyle.css';
import 'ztree/js/jquery.ztree.all.js';

import { watch, reactive, ref, onMounted, computed, onUnmounted } from "vue";

const treeObj = ref(); // 树结构对象
const expandedKeys = ref([]);
const selectedPointList = ref([]); // 需要展示的点位集合
const timer = ref(null);

// 接口数据过滤操作
const ajaxDataFilter = (treeId, parentNode, { code, data, msg }) => {
  if (code === '0') {
    return data.map(ele => ({
      ...ele,
      icon: ele.isTreeNode ? dep : device,
      isParent: ele.isTreeNode,
      checked: parentNode && parentNode.checked || selectedPointList.value.filter(item => item.indexCode === ele.indexCode).length > 0,
			type: ele.isTreeNode ? 1 : 0,
    }));
  } else {
    return message.error(msg);
  }
}

const asyncNodes = (nodes) => {
  if (!nodes) return;
  for(var i = 0, l = nodes.length; i < l; i++) {
    if (nodes[i].isParent && nodes[i].zAsync) {
      asyncNodes(nodes[i].children);
    } else {
      const node = treeObj.value.getNodeByParam('indexCode', nodes[i].indexCode, null);
      treeObj.value.reAsyncChildNodes(node, "refresh", true);
    }
  }
}

// 树节点的勾选操作
const zTreeOnCheck = (event, treeId, treeNode) => {
	// 异步树

	// 设置展开节点集合
	const _res = treeObj.value.getCheckedNodes(true).filter(ele => ele.check_Child_State === 1).map(ele => ele.indexCode);
	expandedKeys.value = Array.from(new Set([..._res, ...expandedKeys.value]));
	// 已勾选的节点（全选的节点和半选的节点）
	const checkedParentNodes = treeObj.value.getCheckedNodes(true).filter(ele => ele.check_Child_State === 2 || ele.check_Child_State === -1);
	const res = [];
	// 过滤出需要展示的节点数据
	checkedParentNodes.forEach(ele => {
		const repeatNode = checkedParentNodes.filter(item => item.indexCode === ele.parentIndexCode);
		if (repeatNode.length === 0) res.push(ele);
	});

	timer.value = setTimeout(() => {
		selectedPointList.value = res;
	}, 0);
}

// 后台加载全部节点
const asyncAll = () => {
  const a = treeObj.value.getNodes();
	const node = treeObj.value.getNodeByParam('indexCode', a[0].indexCode, null);
	treeObj.value.reAsyncChildNodes(node, "refresh", true);
	if (expandedKeys.value.length === 0) treeObj.value.expandNode(node, true, false, true, true);
	asyncNodes(treeObj.value.getNodes());
}

// zTree插件的配置项对象
const setting = {
  treeId: 'treeId',
  check: {
    enable: true,
		chkStyle: 'checkbox',
		chkboxType: {
      'Y': 'ps',
      'N': 'ps'
    }
  },
  data: {
    key: {
      name: 'name',
      isParent: 'isParent',
      children: 'children',
      checked: 'checked',
    }
  },
  view: {
    showLine: false,
		nameIsHTML: true,
		fontCss: {
			color: '#fff',
		},
		expandSpeed: '',
  },
  async: {
    enable: true,
    url: `${window.location.origin}/cirlayer/device/v2/resourceTree.do`,
    autoParam: ['indexCode'],
    otherParam: {
      'deviceType': props.deviceType,
    },
    dataType: 'text',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    dataFilter: ajaxDataFilter,
  },
  callback: {
    beforeAsync: function(treeId, treeNode) {
      return true;
    },
    onAsyncError: function(event, treeId, treeNode) {
      console.log('onAsyncError', event, treeId, treeNode);
    },
		onAsyncSuccess: function(event, treeId, treeNode, msg) {
			if (!treeObj.value) {
				// 初始化zTree实例对象
      	treeObj.value = $.fn.zTree.getZTreeObj(treeId);
				asyncAll();
			}

			// 判断当前渲染的节点是否有子节点，如果有，后台自动加载
			if (treeNode && treeNode.children.length) asyncNodes(treeNode.children);

			// 用于设置展开节点
			if (expandedKeys.value.length) {
				expandedKeys.value.forEach(ele => {
					const node = treeObj.value.getNodeByParam('indexCode', ele, null);
					treeObj.value.expandNode(node, true, false, true, true);
				});
			}
    },
		onCheck: zTreeOnCheck,
  }
}

// 向上关联父节点-取消节点状态
const cancelParentCheckNode = (tree, node) =>{
	const parentNode = node.getParentNode();
	if (parentNode !== null) {
		let isAllUnChecked = true;
		// 如果当前节点存在父节点
		const childrenNodes = parentNode.children;
		// 遍历父节点的所有子节点
		for (let i = 0; i < childrenNodes.length; i+= 1) {
			if (childrenNodes[i].checked) {
				isAllUnChecked = false;
				break;
			}
		}
		if (isAllUnChecked) {
			// 如果所有的子节点都没有选中，则更新父节点的状态
			parentNode.checked = false;
			tree.updateNode(parentNode);
			cancelParentCheckNode(tree, parentNode);
		}
	}
}
// 向下关联子节点-取消节点状态
const cancelSonCheckNode = (tree, node) =>{
	const sonNode = node.children;
	if (sonNode) {
		// 如果当前节点存在子节点
		// 遍历父节点的所有子节点
		for (let i = 0; i < sonNode.length; i+= 1) {
			const _sonChildren = tree.getNodeByParam('indexCode', sonNode[i].indexCode, null);
			treeObj.value.checkNode(_sonChildren, false, false);
			if (_sonChildren.children) {
				cancelSonCheckNode(tree, _sonChildren);
			}
		}
	}
}

onMounted(() => {
	Array.prototype.flat = function(depth = 1) {
		const res = [];
		function flatten(array, currentDepth) {
			array.forEach(item => {
				if (Array.isArray(item) && currentDepth < depth) {
					flatten(item, currentDepth + 1);
				} else {
					res.push(item);
				}
			});
		}
		flatten(Array.from(this), 0);
		return res;
	}
	$.fn.zTree.init($('#treeWrapper'), setting);
});

onUnmounted(() => {
	clearTimeout(timer.value);
	timer.value = null;
	Array.prototype.flat = flatFunc;
});
</script>

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

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

相关文章

2023年【起重机械指挥】考试试卷及起重机械指挥操作证考试

2023年【起重机械指挥】考试试卷及起重机械指挥操作证考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年起重机械指挥考试试卷为正在备考起重机械指挥操作证的学员准备的理论考试专题&#xff0c;每个月更新的起重机械指挥操作证考试祝您顺利通过起重机械指挥考试。 1、【多选题】《中华人民共和国特种设备安全法》…
阅读更多...
在CMake中打印日志信息

在CMake中打印日志信息

message([STATUS|WARNING|AUTHOR_WARNING|FATAL_ERROR|SEND_ERROR] "message to display" ...) (无) &#xff1a;重要消息 STATUS &#xff1a;非重要消息 WARNING&#xff1a;CMake 警告, 会继续执行 AUTHOR_WARNING&#xff1a;CMake 警告 (dev), 会继续执行 SEN…
阅读更多...
【hacker送书第一期】嵌入式虚拟化技术与应用

【hacker送书第一期】嵌入式虚拟化技术与应用

第一期图书推荐 前言为什么嵌入式系统需要虚拟化技术&#xff1f;专家推荐本书适用群体内容简介目录权威作者团队参与方式 前言 随着物联网设备的爆炸式增长和万物互联应用的快速发展&#xff0c;虚拟化技术在嵌入式系统上受到了业界越来越多的关注、重视和实际应用。嵌入式系…
阅读更多...
云端部署ChatGLM-6B

云端部署ChatGLM-6B

大模型这里更新是挺快的&#xff0c;我参考的视频教程就和我这个稍微有些不一样&#xff0c;这距离教程发布只过去4天而已… 不过基本操作也差不多 AutoDL算力云&#xff1a;https://www.autodl.com/home ChatGLM3&#xff1a;https://github.com/THUDM/ChatGLM3/tree/main Hug…
阅读更多...
消息队列之初识Rabbit及安装

消息队列之初识Rabbit及安装

文章目录 一、MQ的相关概念1.什么是MQ&#xff1f;2.为什么要用MQ2.1流量消峰2.2应用解耦2.3异步处理 3.MQ 的分类3.1.ActiveMQ3.2.Kafka3.3.RocketMQ3.4.RabbitMQ 4.MQ 的选择4.1.Kafka4.2.RocketMQ4.3.RabbitMQ 二、RabbitMQ的相关概念1.四大核心概念2.RabbitMQ 核心部分3.Ra…
阅读更多...
OpenMMlab导出yolov3的onnx模型并推理

OpenMMlab导出yolov3的onnx模型并推理

手动导出 直接使用脚本 import torch from mmdet.apis import init_detector, inference_detectorconfig_file ./configs/yolo/yolov3_mobilenetv2_8xb24-ms-416-300e_coco.py checkpoint_file yolov3_mobilenetv2_mstrain-416_300e_coco_20210718_010823-f68a07b3.pth mod…
阅读更多...
数据结构-堆和二叉树

数据结构-堆和二叉树

目录 1.树的概念及结构 1.1 树的相关概念 1.2 树的概念 1.3 树的表示 1.4 树在实际中的应用&#xff08;表示文件系统的目录树结构&#xff09; 2.二叉树的概念及结构 2.1 概念 2.2 特殊的二叉树 2.3 二叉树的存储 3.堆的概念及结构 4.堆的实现 初始化堆 堆的插入…
阅读更多...
仿写知乎日报第四周

仿写知乎日报第四周

本周主要修改了以往的一些bug&#xff0c;实现了一些遗漏的新功能。 无限右滑 无限右滑我听了学长的思路&#xff0c;首先在scrollView的画布大小设置多一个宽度的画布&#xff0c;然后每当滑到那个画布的时候&#xff0c;就调用一个通知&#xff0c;该通知会触发在首页的vie…
阅读更多...
【 第十三章】软件设计师 之 面向对象程序设计

【 第十三章】软件设计师 之 面向对象程序设计

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 备考资料导航 软考好处&#xff1a;软考的…
阅读更多...
有效的字母异位词

有效的字母异位词

给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 t 中每个字符出现的次数都相同&#xff0c;则称 s 和 t 互为字母异位词。 示例 1: 输入: s “anagram”, t “nagaram” 输出: true 示例 2: 输入: s “rat”, …
阅读更多...
k8s笔记资源限制，亲和和性 污点和容忍

k8s笔记资源限制，亲和和性 污点和容忍

镜像下载失败 当宿主机资源不足时&#xff0c;会把pod kill &#xff0c;在其他node 重建 在宿主机放可能多的资源 requests(请求) limits(限制) 超出百分比 容器 pod namespace级别 pod使用资源过多&#xff0c;导致宿主机资源不足&#xff0c;会导致重建pod cpu 内存限…
阅读更多...
【设计原则篇】聊聊单一职责原则

【设计原则篇】聊聊单一职责原则

因为是刚开始写软件设计相关的文章&#xff0c;这里先大概介绍下&#xff0c;软件设计相关的知识图谱。大概分类的话&#xff0c; 编程范式 软件设计相关原则 Don’t Repeat Yourself (DRY)Keep It Simple, Stupid(KISS)Program to an interface, not an implementationYou Ai…
阅读更多...
深入理解JVM虚拟机第二十四篇：详解JVM当中的动态链接和常量池的作用

深入理解JVM虚拟机第二十四篇：详解JVM当中的动态链接和常量池的作用

大神链接&#xff1a;作者有幸结识技术大神孙哥为好友&#xff0c;获益匪浅。现在把孙哥视频分享给大家。 孙哥链接&#xff1a;孙哥个人主页 作者简介&#xff1a;一个颜值99分&#xff0c;只比孙哥差一点的程序员 本专栏简介&#xff1a;话不多说&#xff0c;让我们一起干翻J…
阅读更多...
STM32 寄存器配置笔记——GPIO配置输出

STM32 寄存器配置笔记——GPIO配置输出

一、概述 本文主要介绍GPIO 作为输出时的寄存器配置。包括时钟配置&#xff0c;输出模式配置。以STM32F10xxx系列为例&#xff0c;配置PA8、PD2端口作为输出&#xff0c;输出高/低电平。 二、配置流程 1&#xff09;GPIO外设时钟 通过查找STM32F10xxx中文参考手册得知&#xf…
阅读更多...
Vant 移动端UI 组件自动引入

Vant 移动端UI 组件自动引入

Vue项目中安装Vant # Vue 3 项目&#xff0c;安装最新版 Vant npm i vant 组件按需引入配置 Vant按需引入- - -安装&#xff1a;unplugin-vue-components 插件 unplugin-vue-components 插件可以在Vue文件中自动引入组件&#xff08;包括项目自身的组件和各种组件库中的组件&…
阅读更多...
“总线仲裁”——以CAN总线为例

“总线仲裁”——以CAN总线为例

总线仲裁 1.什么是总线仲裁2.为什么要总线仲裁3.怎么进行总线仲裁&#xff08;总线仲裁机制&#xff09;3.1 如何确定冲突3.1.1 确定冲突前提3.1.2 同时冲突3.1.3 延时冲突 3.2 冲裁逻辑3.2.1 避免延时冲突3.2.1 避免同时冲突 1.什么是总线仲裁 提到总线仲裁的概念&#xff0c…
阅读更多...
设计模式1

设计模式1

![在这里插入图片描述](https://img-blog.csdnimg.cn/c9fbecf1ae89436095885722380ea460.png)一、设计模式分类&#xff1a; 1、创建型模式&#xff1a;创建与使用分离&#xff0c;单例、原型、工厂、抽象、建造者。 2、结构型模式&#xff1a;用于描述如何将对象按某种更大的…
阅读更多...
SpringBoot 自动配置原理

SpringBoot 自动配置原理

SpringBoot 自动配置原理 注: 本文使用的springboot版本为 2.7.11 1、SpringBootApplication 字面分析&#xff0c;这个注解是标注一个Spring Boot应用。 Target({ElementType.TYPE}) Retention(RetentionPolicy.RUNTIME) Documented Inherited SpringBootConfiguration En…
阅读更多...
Vue3 setup函数

Vue3 setup函数

一、setup函数介绍 setup函数是Vue3中全新的一个配置项&#xff0c;值为一个函数&#xff0c;是所有 Composition API 中“表演的舞台”。 我们在Vue2中用到的所有数据、方法&#xff0c;都需要配置在setup中。 这是我们在Vue2中的写法&#xff1a; 这是我们在Vue3 setup中的…
阅读更多...
基于斑点鬣狗算法优化概率神经网络PNN的分类预测 - 附代码

基于斑点鬣狗算法优化概率神经网络PNN的分类预测 - 附代码

基于斑点鬣狗算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于斑点鬣狗算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于斑点鬣狗优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…
阅读更多...
最新文章

Copyright @ 2022~2023