layui 集成 ztree异步加载

news2024/12/30 3:08:22

首先,layui环境搭建,ztree环境引入
ztree的js和css都要引入,我这里暂时用的是core包在这里插入图片描述>在这里插入图片描述
在这里插入图片描述在这里插入图片描述

静态,一句话就够了


	      <!-- 左侧菜单树形组件 -->
	      <div class="layui-col-md3">
	        <div class="layui-footer ">
	       	 <h1>左侧菜单树形组件</h1>
	          <ul id="menuTree" class="ztree"></ul>
	        </div>
	      </div>
	

js,这里主要就是格式要跟ztree对应
childNodes[i].isParent = childNodes[i].isParent; 千万不要忽略这个参数

// 定义菜单树的模块
var MenuTree = {
    init: function () {
	
		// 初始化菜单树
	   var setting = {
			view: {
				selectedMulti: false
			},
			async: {
				enable: true,
				url:"youurl",
				autoParam:["id=node"],
				otherParam:{"otherParam":"zTreeAsyncTest"},
				dataFilter: filter
			},
			callback: {
				beforeClick: beforeClick,
				beforeAsync: beforeAsync,
				onAsyncError: onAsyncError,
				onAsyncSuccess: onAsyncSuccess
			}
		};

		function filter(treeId, parentNode, childNodes) {
			if (!childNodes) return null;
			
			for (var i=0, l=childNodes.length; i<l; i++) {
				childNodes[i].name = childNodes[i].text;
				childNodes[i].pId = childNodes[i].parentId;
				childNodes[i].isParent = childNodes[i].isParent;
			}
			
	
			return childNodes;
		}
		
		function beforeClick(treeId, treeNode) {
			if (!treeNode.isParent) {
				alert("请选择父节点");
				return false;
			} else {
				return true;
			}
		}
		var log, className = "dark";
		function beforeAsync(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeAsync ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
			return true;
		}
		function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
			showLog("[ "+getTime()+" onAsyncError ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
		}
		function onAsyncSuccess(event, treeId, treeNode, msg) {
			showLog("[ "+getTime()+" onAsyncSuccess ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
		}
		
		function showLog(str) {
			if (!log) log = $("#log");
			log.append("<li class='"+className+"'>"+str+"</li>");
			if(log.children("li").length > 8) {
				log.get(0).removeChild(log.children("li")[0]);
			}
		}
		function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds(),
			ms=now.getMilliseconds();
			return (h+":"+m+":"+s+ " " +ms);
		}

		function refreshNode(e) {
			var zTree = $.fn.zTree.getZTreeObj("menuTree"),
			type = e.data.type,
			silent = e.data.silent,
			nodes = zTree.getSelectedNodes();
			if (nodes.length == 0) {
				alert("请先选择一个父节点");
			}
			for (var i=0, l=nodes.length; i<l; i++) {
				zTree.reAsyncChildNodes(nodes[i], type, silent);
				if (!silent) zTree.selectNode(nodes[i]);
			}
		}


			$.fn.zTree.init($("#menuTree"), setting);
			$("#refreshNode").bind("click", {type:"refresh", silent:false}, refreshNode);
			$("#refreshNodeSilent").bind("click", {type:"refresh", silent:true}, refreshNode);
			$("#addNode").bind("click", {type:"add", silent:false}, refreshNode);
			$("#addNodeSilent").bind("click", {type:"add", silent:true}, refreshNode);
	}
};

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

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

相关文章

Leetcode 977. 有序数组的平方

题目&#xff1a; Leetcode 977. 有序数组的平方 描述&#xff1a; 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序 思路&#xff1a; 双指针法 数组其实是有序的&#xff0c; 只不过负数平方之…

Gradio入门,并搭个鸡兔同笼问题小应用,附源码(MindOpt)

应用链接&#xff1a; https://979427749bc9ceec34.gradio.live 是公开访问链接&#xff0c;3天有效。在modelscope中的创空间怎么长期发布我还在研究。后面补上。 应用图如下&#xff0c;源代码见正文。 知道Gradio AI大模型快速生成应用的工具&#xff0c; 在Huggingface …

使用 Docker 部署 canal 服务实现MySQL和ES实时同步

参考 ClientAdapter: Canal的Adapter配置项目 Sync ES&#xff1a;Canal的Adapter中ES同步的配置项 使用 Docker 部署 canal 服务 docker canal-server canal-adapter mysql Canal&#xff08;基于Docker同步mysql数据到elasticsearch&#xff09; Canal部署过程中的错误 0. 环…

dns的负载分配是什么

DNS 负载分配是使用 DNS 系统对传入的网络流量进行分配的一种技术。这可以是基于多种策略来分配的&#xff0c;从简单的轮询到更复杂的基于地理位置或服务器健康状况的分配。下面是 DNS 负载分配的几种常见形式&#xff1a; 轮询&#xff08;Round Robin&#xff09;&#xff1…

【LeetCode】102. 二叉树的层序遍历、107. 二叉树的层序遍历 II

作者&#xff1a;小卢 专栏&#xff1a;《Leetcode》 喜欢的话&#xff1a;世间因为少年的挺身而出&#xff0c;而更加瑰丽。 ——《人民日报》 102. 二叉树的层序遍历 102. 二叉树的层序遍历 给你二叉树的根节点 root &#xff0c;返回其节…

详解双向带头循环链表

今天给大家分享的数据结构中的链表的双向带头循环链表结构&#xff01;听到这个链表大家可能心中一颤&#xff0c;其实他就是个纸老虎&#xff0c;看着比较难搞&#xff0c;实际上非常简单易懂&#xff0c;创建该结构链表的大佬可谓是真的牛&#xff0c;因为该结构比起单链表要…

Java课题笔记~ HTTP协议(请求和响应)

Servlet最主要的作用就是处理客户端请求&#xff0c;并向客户端做出响应。为此&#xff0c;针对Servlet的每次请求&#xff0c;Web服务器在调用service()方法之前&#xff0c;都会创建两个对象 分别是HttpServletRequest和HttpServletResponse。 其中HttpServletRequest用于封…

8.10论文阅读

文章目录 The multimodal MRI brain tumor segmentation based on AD-Net摘要本文方法损失函数 实验结果 max-vit - unet:多轴注意力医学图像分割摘要本文方法实验结果 The multimodal MRI brain tumor segmentation based on AD-Net 摘要 基于磁共振成像(MRI)的多模态胶质瘤…

SpringBoot笔记:SpringBoot 集成 Dataway 多数据源配置(二)

文章目录 前言核心代码和配置yml 配置注入多数据源常用Spi实现swagger 配置自定义 Udf指定数据源进行查询 前言 之前简单介绍了一下 Dataway 使用&#xff0c;本文继续介绍一下它的多数据源配置和使用。 核心代码和配置 yml 配置 # springboot多环境配置 #端口&#xff0c;…

SpringBoot中间件使用之EventBus、Metric、CommandLineRunner

1、EventBus 使用EventBus 事件总线的方式可以实现消息的发布/订阅功能&#xff0c;EventBus是一个轻量级的消息服务组件&#xff0c;适用于Android和Java。 // 1.注册事件通过 EventBus.getDefault().register(); // 2.发布事件 EventBus.getDefault().post(“事件内容”); …

【HarmonyOS】Java如何引用外部jar包

【关键字】 Java、引用jar包​ 【写在前面】 使用API6和API7开发HarmonyOS应用时&#xff0c;因为应用中只能引用SDK中开放的功能接口&#xff0c;但是部分jdk自带的接口功能在SDK中并未封装&#xff0c;要想在工程中使用jdk开放的接口功能&#xff0c;需要将jdk中的jar包通过…

【华秋干货铺】电源PCB设计汇总

在《PCB设计丨电源设计的重要性》一文中&#xff0c;已经介绍了电源设计的总体要求&#xff0c;以及不同电路的相关布局布线等知识点&#xff0c;那么本篇内容&#xff0c;小编将以RK3588为例&#xff0c;为大家详细介绍其他支线电源的PCB设计。 电源PCB设计 VDD_CPU_BIG0/1 …

uniapp 格式化时间刚刚,几分钟前,几小时前,几天前…

效果如图&#xff1a; 根目录下新建utils文件夹&#xff0c;文件夹下新增js文件&#xff0c;文件内容&#xff1a; export const filters {dateTimeSub(data) {if (data undefined) {return;}// 传进来的data必须是日期格式&#xff0c;不能是时间戳//将字符串转换成时间格式…

63、64、65、66项目实战

erp项目启动&#xff1a; nohup java -jar lemon_erp.jar & 或 java -jar lemon_erp.jar 把node_exporter监控收集器启动&#xff1a; nohup ./node_exporter & 监控机器上&#xff1a; 启动 grafana 和 prometheus 启动grafana&#xff1a; systemctl restart grafana…

机器学习实战2-决策树算法

文章目录 决策树算法核心是要解决两个的关键问题sklearn中的决策树模型sklearn建模步骤分类树Criterionrandom_state && splitter剪枝参数max_depthmin_samples_leaf&&min_samples_splitmax_features&&min_impurity_decrease确认最优剪枝参数目标权重参…

谈谈Spring与字节码生成技术

Java程序员几乎都了解Spring。 它的IoC&#xff08;依赖反转&#xff09;和AOP&#xff08;面向切面编程&#xff09;功能非常强大、易用。而它背后的字节码生成技术&#xff08;在运行时&#xff0c;根据需要修改和生成Java字节码的技术&#xff09;就是一项重要的支撑技术。 …

spring之AOP简单介绍

1.AOP的概念 AOP&#xff0c;Aspect Oriented Programming&#xff0c;面向切面编程&#xff0c;是对面向对象编程OOP的升华。OOP是纵向对一个 事物的抽象&#xff0c;一个对象包括静态的属性信息&#xff0c;包括动态的方法信息等。而AOP是横向的对不同事物的抽象&#xff0c;…

云原生之深入解析Redis的原理分析与环境部署

一、Redis 简介 ① 什么是 Redis &#xff1f; REmote DIctionary Server&#xff08;Redis&#xff09;是一个由 Salvatore Sanfilippo 写的 key-value 存储系统&#xff0c;是跨平台的非关系型数据库。Redis 是一个开源的使用 ANSI C 语言编写、遵守 BSD 协议、支持网络、可…

Linux —— 基础I/O(一)

目录 一&#xff0c;背景介绍 二&#xff0c;系统接口函数 open 打开或创建文件 close 关闭文件 read 读取文件 write 写入文件 三&#xff0c;文件描述符 结构体指针files 结构体指针files指向的表files_struct 文件结构体 一&#xff0c;背景介绍 狭义的文件存放在…

爆肝整理,接口测试-Fiddler对Jmeter请求抓包(详细实战)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 使用Fiddler结合J…