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.mzph.cn/news/31988.shtml

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

相关文章

Ajax-概念、Http协议、Ajax请求及其常见问题

Ajax Ajax概念Ajax优缺点HTTP协议请求报文响应报文 Ajax案例准备工作express基本使用创建一个服务器 发送AJAX请求GET请求POST请求JSON响应 Ajax请求出现的问题IE缓存问题Ajax请求超时与网络异常处理Ajax手动取消请求Ajax重复发送请求问题 Ajax概念 AJAX 全称为Asynchronous J…

干货 | 详述 Elasticsearch 向量检索发展史

1. 引言 向量检索已经成为现代搜索和推荐系统的核心组件。 通过将复杂的对象&#xff08;例如文本、图像或声音&#xff09;转换为数值向量&#xff0c;并在多维空间中进行相似性搜索&#xff0c;它能够实现高效的查询匹配和推荐。 图片来自&#xff1a;向量数据库技术鉴赏【上…

安科瑞物联网表在虚拟电厂的应用

安科瑞 崔丽洁 应用场景 一般应用于控制中心 功能 能计量当前组合有功电能&#xff0c;正向有功电能&#xff0c;反向有功电能&#xff0c;正向无功电能&#xff0c;反向无功电能&#xff1b; ADW300支持RS485通讯、LORA通讯、NB、4G及Wifi通讯&#xff1b; 三套时段表,一年可以…

[oeasy]python0081_[趣味拓展]ESC键进化历史_键盘演化过程_ANSI_控制序列_转义序列_CSI

光标位置 回忆上次内容 上次了解了 新的转义模式 \033 逃逸控制字符 escape 这个字符 让字符串 退出标准输出流进行控制信息的设置 可以设置 光标输出的位置 ASR33中的ALT MODE 是 今天的ESC键吗&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#x1f914; 查询文档…

关于APP备案、小程序备案的问题,如何备案?

近日&#xff0c;工信部发布了关于开展移动互联网应用程序备案工作的通知。为落实相关法律法规要求&#xff0c;促进互联网行业规范健康发展&#xff0c;进一步做好移动互联网信息服务管理&#xff0c;现组织开展移动互联网应用程序&#xff08;以下简称 APP&#xff09;备案工…

安灯Andon系统的应用与优势

安灯系统是一款与硬件相结合&#xff0c;实时了解机台与工位状态&#xff0c;让异常的信息得到快速、高效的解决的系统软件&#xff0c;同时记录每次异常报警的种类、响应时间和处理问题用时&#xff0c;提供改善生产管理和人员考核的数据参考&#xff0c;实现透明、快速的生产…

做软件测试,掌握哪些技术才能算作“测试大佬”?

一、过硬的基础能力 其实所有的测试大佬都是从底层基础开始的&#xff0c;随着时间&#xff0c;经验的积累慢慢变成大佬。要想稳扎稳打在测试行业深耕&#xff0c;成为测试大牛&#xff0c;首当其冲的肯定就是拥有过硬的基础&#xff0c;所有的基础都是根基&#xff0c;后期所有…

iOS开发Swift开发UI页面链式调用库推荐

首页链接 https://github.com/zhiguangqiao/ChainableUIKit 安装方法 pod ChainableUIKit调用片段 UIButton import ChainableUIKitprivate let button UIButton().chain.setTitleColor(.init(hex: "#9583EB"), state: .normal).setTitle("全部视频",…

fetch-github-hosts间隔一年大更新v2.6发布,多端支持

前言 fetch-github-hosts是一款同步 github hosts 的工具&#xff0c;用于帮助您解决github时而无法访问的问题。在间隔了一年之久的时间&#xff0c;最近抽空将fetch-github-hosts的依赖及UI进行了一波大更新&#xff0c;同时也增加了一些实用的功能。 主要更新 更新了基础依…

MySQL 视图、索引

视图&#xff1a;根据某个实表查询出来的结果&#xff0c;而生成的一个虚表。 1.视图既然作为一张虚表存在&#xff0c;那么对实表的增删改查操作&#xff0c;视图同样成立。 2.视图既然根据实表得到&#xff0c;那对视图的增删改查操作&#xff0c;也会影响实表。 3.视图在查询…

js ?? || 使用方法

平时很常用的就是||,比如调用接口的时候&#xff0c;接口报错了需要给个默认值 const data(await getData())||{};今天遇到了一个场景&#xff0c;正常后端返回的就是false&#xff0c;如果接口报错要默认设置成true&#xff0c;但如果用了 || &#xff0c;如下&#xff0c;那…

Flutter:文件上传与下载(下载后预览)

Dio dio是一个强大的Dart Http请求库&#xff0c;提供了丰富的功能和易于使用的API&#xff0c;支持文件上传和下载。 这个就不介绍了&#xff0c;网上有很多的封装案例。 background_downloader 简介 适用于iOS&#xff0c;Android&#xff0c;MacOS&#xff0c;Windows和L…

GitHub中readme.md文件的编辑和使用

GitHub中readme.md文件的编辑和使用 | YuuiChungs BlogGitHub - guodongxiaren/README: README文件语法解读&#xff0c;即Github Flavored Markdown语法介绍

Arcgis地图实战二:地图实时轨迹展示

1.最终效果预览 2.定时器执行方法 进入页面执行执行器 this.locationInterval setInterval(() > {this.getCurrentPosition();}, this.conf.LocateInterval);离开页面销毁 clearInterval(this.locationInterval);this.conf.LocateInterval为获取的数据同步中的定时器间隔…

机器学习笔记 - 使用CLIP在没有数据的情况下创建图像分类器

想象一下,如果我们现在需要对人们是否戴眼镜进行分类,但您没有数据或资源来训练自定义模型。该怎么办?这里我们了解如何使用预先训练的 CLIP 模型来创建自定义分类器,而无需任何培训。这种方法称为零样本图像分类,它可以对原始 CLIP 模型训练期间未明确看到的类别图像进行…

Talk | ICCV‘23清华大学刘世隆:From Detection to Grounding-迈向更强的开集目标检测

本期为TechBeat人工智能社区第521期线上Talk&#xff01; 北京时间8月10日(周四)20:00&#xff0c;清华大学博士生—刘世隆的Talk已准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “From Detection to Grounding-迈向更强的开集目标检测”&#xff0c;他分…

栈和队列(二) 队列操作详解及栈与队列的相互实现

文章目录 四、队列1、什么是队列2、队列的基本操作Queue.hQueue.c初始化队列队尾入队列队头出队列获取队列头部元素获取队列队尾元素获取队列中有效元素个数检测队列是否为空&#xff0c;如果为空返回非零结果&#xff0c;如果非空返回0销毁队列 五、设计循环队列六、栈与队列的…

gcc-buildroot-9.3.0 和 gcc-arm-10.3 的区别

gcc-buildroot-9.3.0 和 gcc-arm-10.3 是两个不同的 GCC (GNU Compiler Collection) 版本&#xff0c;主要用于编译 C、C 和其他语言的程序。它们之间的区别主要体现在以下几个方面&#xff1a; 版本号&#xff1a;gcc-buildroot-9.3.0 对应的是 GCC 9.3.0 版本&#xff0c;而 …

前端面试自我介绍

前端面试自我介绍精选篇1 各位面试官大家好&#xff0c;我叫__&#xff0c;就读于__大学__学&#xff0c;大学本科学历&#xff0c;我的求职意向是与金融专业相关的职位&#xff0c;本人拥有较强的学习能力&#xff0c;能快速适应工作环境&#xff0c;兴趣爱好广泛&#xff0c…

MyBatis学习笔记3

日志 1.日志工厂 如果一个数据库的操作&#xff0c;出现了异常&#xff0c;我们需要排错。日志就是最好的工具。 日志工厂&#xff1a;SLF4JLOG4J(掌握&#xff09;LOG4J2JDK_LOGGINGCOMMONS_LOGGINGSTDOUT_LOGGING&#xff08;掌握&#xff09;NO_LOGGING 2.分页 减少数据…