ztree结合hmap使用经验分享

news2024/11/18 6:01:11

项目背景

在建德封控拦截系统（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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

c语言练习第11周（1~5）

c语言练习第11周（1~5）

数列 1 1 2 3 5 8 13 21 ... 被称为斐波纳数列。 输入若干个正整数N&#xff0c;输出这个序列的前 N 项的和。 题干数列 1 1 2 3 5 8 13 21 ... 被称为斐波纳数列。 输入若干个正整数N&#xff0c;输出这个序列的前 N 项的和。输入样例3 5 4 1输出样例…
阅读更多...
ftp服务器（filezilla服务端软件）下载、安装、使用

ftp服务器（filezilla服务端软件）下载、安装、使用

下载 通过360软件管家下载 输入filezilla&#xff0c;点击搜索&#xff0c;点击安装 修改安装路径 等待安装完成 配置服务端 启动配置 双击打开&#xff0c;点击软件中间按钮 不用输入密码&#xff0c;因为安装的时候没有设置密码 如果在安装的时候设置了密码&#xff0c;…
阅读更多...
可以为一个servlet定义多个servlet-mapping、或url-pattern

可以为一个servlet定义多个servlet-mapping、或url-pattern

在web描述符文件web.xml文件中&#xff0c;可以为同一个servlet定义多个servlet-mapping&#xff1b;也可以在同一个servlet-mapping中&#xff0c;定义多个url-pattern。也就是说&#xff0c;可以把多个地址&#xff08;相对于上下文路径&#xff09;映射到同一个servlet处理。…
阅读更多...
基于MATLAB的关节型六轴机械臂轨迹规划仿真

基于MATLAB的关节型六轴机械臂轨迹规划仿真

笛卡尔空间下的轨迹规划&#xff0c;分为直线轨迹规划和圆弧轨迹规划&#xff0c;本文为笛卡尔空间下圆弧插值法的matlab仿真分析 目录 1 实验目的 2 实验内容 2.1标准D-H参数法 2.2实验中使用的Matlab函数 3 全部代码 4 仿真结果 1 实验目的 基于机器人学理论知识&…
阅读更多...
最全面的软考架构师复习资料（历时2年整理）

最全面的软考架构师复习资料（历时2年整理）

一、面向服务的架构 1.请分别用200字以内文字说明什么是面向服务架构&#xff08;SOA&#xff09;以及ESB在SOA的作用与特点 面向服务的体系架构&#xff08;SOA&#xff09;是一种粗粒度、松耦合的服务架构&#xff0c;服务之间通过简单、精确定义接口进行通信。他可以根据需求…
阅读更多...
【操作系统】4.2 文件系统

【操作系统】4.2 文件系统

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…
阅读更多...
[CISCN 2023 西南]do_you_like_read

[CISCN 2023 西南]do_you_like_read

打开题目&#xff0c;大概是一个购买书籍的网站&#xff0c;有登陆的功能 我们可以先分析下给的源码 在admin.php中会验证是否为admin用户 我们尝试爆破下密码&#xff0c;爆出来为admin123 登陆后发现存在文件上传漏洞 我们分析下源码 存在文件后缀检测&#xff0c;如果为p…
阅读更多...
【第四章】软件设计师 之 计算机网络

【第四章】软件设计师 之 计算机网络

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 1、七层模型 2、网络技术标准与协议 中介 别…
阅读更多...
信捷 XDH 输出点流水灯

信捷 XDH 输出点流水灯

本文以XDH 为例&#xff0c;实现输出点流水灯&#xff0c;测试输出点是否正常。 用到了FOR NEXT循环和偏移量实现。 程序下载链接如下&#xff1a; https://download.csdn.net/download/weixin_39926429/88527971
阅读更多...
Python的基础语句大全

Python的基础语句大全

以下是Python的基础语句大全&#xff1a; 变量定义语句&#xff1a; var_name var_value输出语句&#xff1a; print(var_name)输入语句&#xff1a; var_name input()条件语句&#xff1a; if condition:// do something if condition is True elif condition:// do somethi…
阅读更多...
手机地磁传感器与常见问题

手机地磁传感器与常见问题

在手机中&#xff0c;存在不少传感器&#xff0c;例如光距感&#xff0c;陀螺仪&#xff0c;重力加速度&#xff0c;地磁等。关于各传感器&#xff0c;虽功能作用大家都有所了解&#xff0c;但是在研发设计debug过程中&#xff0c;却总是会遇到很多头疼的问题。关于传感器&…
阅读更多...
链表的实现（文末附完整代码）

链表的实现（文末附完整代码）

链表的概念及结构 链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的 我们在上一篇文章所学习的顺序表是连续存储的 例如&#xff1a; 顺序表就好比火车上的一排座位&#xff0c;是连续的 而链表就好比是火车…
阅读更多...
字节面试：请说一下DDD的流程，用电商系统为场景

字节面试：请说一下DDD的流程，用电商系统为场景

说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业字节、如阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 谈谈你的DDD落地经验&#xff1f; 谈谈你对DDD的理解&…
阅读更多...
matlab GUI界面实现ZieglerNicholas调节PID参数

matlab GUI界面实现ZieglerNicholas调节PID参数

1、内容简介 略 11-可以交流、咨询、答疑 ZieglerNicholas、PID、GUI 2、内容说明 GUI界面实现ZieglerNicholas调节PID参数 通过ZieglerNicholas调节PID参数&#xff0c;设计了GUI 3、仿真分析 略 4、参考论文 略 链接&#xff1a;https://pan.baidu.com/s/1yQ1yDfk-_…
阅读更多...
vue+mongodb+nodejs实现表单增删改查

vue+mongodb+nodejs实现表单增删改查

ExpressMongodbVue实现增删改查 效果图 前言 最近一直想学下node,毕竟会node的前端更有市场。但是光看不练&#xff0c;感觉还是少了点什么&#xff0c;就去github上看别人写的项目&#xff0c;收获颇丰&#xff0c;于是准备自己照葫芦画瓢写一个。 作为程序员&#xff0c;一…
阅读更多...
电容的作用

电容的作用

文章目录 总结1.降压2.滤波3.延时4.耦合5.旁路电容 总结 1.降压 问题&#xff1a; 直接连接灯泡会烧掉 解决方案 进一步为了防止电容放电&#xff0c;伤人&#xff0c;加入一个大电阻 2.滤波 直流的情况 交流的情况 频率与容抗的关系 3.延时 4.耦合 滤除直流成分&#xf…
阅读更多...
学习c#的第七天

学习c#的第七天

目录 C# 封装 概念 Public 访问修饰符 Private 访问修饰符 Protected 访问修饰符 Internal 访问修饰符 Protected Internal 访问修饰符 总结 C# 封装 概念 在面向对象程序设计中&#xff0c;封装是一种将数据和方法包含在一个单元中&#xff0c;并控制对这些数据和方…
阅读更多...
LeetCode算法心得——高级访客（模拟枚举+小窗口）

LeetCode算法心得——高级访客（模拟枚举+小窗口）

大家好&#xff0c;我是晴天学长&#xff0c;今天的周赛第二题&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1) .高级访客 给你一个长度为 n 、下标从 0 开始的二维字符串数组 access_times 。对于每个 …
阅读更多...
Redis五种数据类型及命令操作（二）

Redis五种数据类型及命令操作（二）

&#x1f388;个人公众号:&#x1f388; :✨✨✨ 可为编程✨ &#x1f35f;&#x1f35f; &#x1f511;个人信条:&#x1f511; 知足知不足 有为有不为 为与不为皆为可为&#x1f335; &#x1f349;本篇简介:&#x1f349; 本篇记录Redis五种数据类型及命令操作&#xff0c;如…
阅读更多...
Oracle（2-1） Networking Overview

Oracle（2-1） Networking Overview

文章目录 一、基础知识1、Network Environ Challenges 网络环境挑战2、Simple Network :2-Tier 简单的两层网络3、Simple to Complex : N-Tier 简单到复杂&#xff1a;N层网络4、Oracle Network Solutions Oracle网络解决方案5、Key Features of Oracle Net Oracle Net的主要功…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023