layui 集成 ztree异步加载

首先,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.mfbz.cn/a/68260.html

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

相关文章

【C语言】文件操作

目录 前言&#xff1a;一.为什么使用文件二.什么是文件三.文件的打开和关闭1.文件指针2.文件的打开和关闭 四.文件的顺序读写1.顺序读写函数介绍2.一组函数对比3.fwrite函数与fread函数 五.文件的随机读写1.fseek2.ftell3. rewind 六.文本文件和二进制文件七.文件读取结束的判定…

Selenium 自动化 | 案例实战篇

Chrome DevTools 简介 Chrome DevTools 是一组直接内置在基于 Chromium 的浏览器&#xff08;如 Chrome、Opera 和 Microsoft Edge&#xff09;中的工具&#xff0c;用于帮助开发人员调试和研究网站。 借助 Chrome DevTools&#xff0c;开发人员可以更深入地访问网站&#xf…

dotNet 之数据库sqlite

Sqlite3是个特别好的本地数据库&#xff0c;体积小&#xff0c;无需安装&#xff0c;是写小控制台程序最佳数据库。NET Core是同样也是.NET 未来的方向。 **硬件支持型号 点击 查看 硬件支持 详情** DTU701 产品详情 DTU702 产品详情 DTU801 产品详情 DTU802 产品详情 D…

【工作记录】docker安装gitlab、重置密码@20230809

前言 本文记录下基于docker安装gitlab并重置管理员密码的过程。 作为记录的同时也希望能帮助到需要的朋友们。 搭建过程 1. 准备好docker环境并启动docker [rootslave-node1 docker-gitlab]# docker version Client:Version: 18.06.1-ceAPI version: 1.38…

星河双子塔对面万科星火城市更新规划出炉

龙岗区坂田街道欧威尔空调厂城市更新单元“工业上楼”项目规划&#xff08;草案&#xff09;已经龙岗区“工业上楼”项目工作专班2023年第四次审批会议审议通过。根据《中华人民共和国城乡规划法》《深圳经济特区城市更新条例》《深圳市城市更新办法实施细则》《深圳市“工业上…

主数据管理案例-北京燃气

1、 背景介绍及难点分析 主数据作为数据资源中最重要、基础的一部分&#xff0c;是北京燃气实现数据资源管理的切入点&#xff0c;对北京燃气而言&#xff0c;实现主数据的集中统一管理也是解决集团信息化建设中“信息孤岛”现象&#xff0c;实现系统集成和业务协同需求最迫切的…

单机游戏防破解方案解析

近年来&#xff0c;游戏市场用户规模趋于稳定&#xff0c;游戏市场进入了存量时代&#xff0c;各赛道“人满为患”&#xff0c;如何在一片红海中站稳脚跟成了厂商的必修课。 而在快节奏的社会环境下&#xff0c;脱离了网游社交粘性&#xff0c;主打清爽、自由的单机游戏&#…

javascript获取设置输入框内容

代码&#xff0c; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>获取设置输入框内容</title> </head> <body><button onclick"getinput()">click me</button><div id&qu…

【手撕C语言】多线程

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言,Linux基础,ARM开发板&#xff0c;软件配置等领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff01;送给自己和读者的一句鸡汤&#x1f914;&…

docker版jxTMS使用指南:使用jxTMS采集数据之一

本文讲解了如何jxTMS的数据采集与处理框架并介绍了如何用来采集数据&#xff0c;整个系列的文章请查看&#xff1a;docker版jxTMS使用指南&#xff1a;4.4版升级内容 docker版本的使用&#xff0c;请查看&#xff1a;docker版jxTMS使用指南 4.0版jxTMS的说明&#xff0c;请查…

大麦订单截图 一键生成订单截图

新版付款图样式展示 这个样式图就是在大麦刚付款完的一个订单截图&#xff0c;它的状态是等待卖家发货 下滑下载源码 下载源码&#xff1a;https://pan.baidu.com/s/16lN3gvRIZm7pqhvVMYYecQ?pwd6zw3

山东布谷科技直播软件源码探索高效、稳定直播传输的技术介绍:流媒体传输技术

今天我们探索的是让直播软件源码平台在直播时能够高效、稳定的进行直播传输的技术&#xff0c;而这个技术就是直播软件源码平台的流媒体传输技术&#xff0c;在直播软件源码平台中&#xff0c;流媒体传输技术会将直播的图像、视频、音频等相关的流媒体信号通过网络传递到用户的…

Textnow注册防封,如何免费获取收发信息的美国手机号

TextNow和Google voice一样&#xff0c;是美国的一款免费的网络通信应用程序&#xff0c;可用于免费收发短信和无限制拨打电话&#xff0c;对于那些希望节省通讯费用的人&#xff0c;尤其是那些需要在跨境商务通讯频繁、跨境推广需要短信收发的用户来说&#xff0c;TextNow非常…

服装行业多模态算法个性化产品定制方案 | 京东云技术团队

一、项目背景 AI赋能服装设计师&#xff0c;设计好看、好穿、好卖的服装 传统服装行业痛点 • 设计师无法准确捕捉市场趋势&#xff0c;抓住中国潮流 • 上新周期长&#xff0c;高库存滞销风险大 • 基本款居多&#xff0c;难以满足消费者个性化需求 解决方案 • GPT数据…

线性表之链表

前言&#xff1a; 在计算机科学中&#xff0c;链表是一种常见的数据结构&#xff0c;用于存储和组织数据。相比于顺序表&#xff0c;链表具有更高的灵活性和动态性。 在本博客中&#xff0c;我们将深入讨论链表的概念、分类以及实现方法。我们将从链表的基本概念开始&#xff0…

Maven安装与配置

目录 一、Maven简介1.1 概述1.2 作用1.3 仓库 二、安装三、配置3.1 配置环境变量3.2 环境变量测试3.3 配置仓库 一、Maven简介 1.1 概述 Maven是一个开源的项目管理工具&#xff0c;用于构建和管理Java项目&#xff0c;基于项目对象模型&#xff08;POM&#xff09;的概念。它…

Jpa与Druid线程池及Spring Boot整合(一): spring-boot-starter-data-jpa 搭建持久层

(一)Jpa与Druid连接池及Spring Boot整合作为持久层,遇到系列问题,下面一 一记录&#xff1a; pom.xml 文件中加入必须的依赖: <!--设置spring-boot依赖的版本 --> <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot…

elementui表格数据加载即勾选

搜索关键字&#xff1a;elementui表格数据加载即勾选|elementui表格勾选 1、关键点&#xff1a; 需要使用watch和nextTick,直接参考官方案例&#xff0c;在数据返回时候设置勾选不好使。 2、表格定义 <el-table :height"570" :data"roleTableData" st…

第一章 SpringBoot入门

1.SpringBoot简介 1.1.简介 Spring Boot来简化spring应用开发&#xff0c;约定大于配置去繁从简&#xff0c;just run就能创建一个独立的&#xff0c;产品级别的应用。 背景&#xff1a;J2EE笨重开发&#xff0c;繁多的配置、低下开发效率、复杂的部署流程、第三方技…

vue2.7如何使用vue-i18n

版本&#xff1a; vue&#xff1a;2.7.0 vue-i18n&#xff1a;8.28.2 一、下载 npm i vue-i18n8.28.2二、新建 新建一个文件&#xff0c;例如&#xff1a;lang&#xff0c;项目结构如下&#xff1a; index.js&#xff1a; import Vue from vue import VueI18n from vue-i18n…