当前位置: 首页 > news >正文

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);}
};

相关文章:

layui 集成 ztree异步加载

首先&#xff0c;layui环境搭建&#xff0c;ztree环境引入 ztree的js和css都要引入&#xff0c;我这里暂时用的是core包> 静态&#xff0c;一句话就够了 <!-- 左侧菜单树形组件 --><div class"layui-col-md3"><div class"layui-footer "…...

LeetCode面向运气之Javascript—第27题-移除元素-98.93%

LeetCode第27题-移除元素 题目要求 一个数组nums和一个值val&#xff0c;你需要原地移除所有数值等于val的元素&#xff0c;并返回移除后数组的新长度 举例 输入&#xff1a;nums [3,2,2,3], val 3 输出&#xff1a;2, nums [2,2] 输入&#xff1a;nums [0,1,2,2,3,0,4,2…...

谷歌云 | 电子商务 | 如何更好地管理客户身份以支持最佳的用户体验

【本文由Cloud Ace整理发布。Cloud Ace是谷歌云全球战略合作伙伴&#xff0c;拥有 300 多名工程师&#xff0c;也是谷歌最高级别合作伙伴&#xff0c;多次获得 Google Cloud 合作伙伴奖。作为谷歌托管服务商&#xff0c;我们提供谷歌云、谷歌地图、谷歌办公套件、谷歌云认证培训…...

行业追踪,2023-08-09

自动复盘 2023-08-09 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…...

视图、存储过程、函数、触发器

1.视图 视图就是一张基于查询的虚拟表&#xff0c;里面定义的其实就是普通的SQL语句。如果一条复杂查询的SQL语句我们频繁的使用&#xff0c;就可以定义视图&#xff0c;方便操作。创建语法如下&#xff1a; CREATE VIEW <视图名> AS <SELECT语句> 2.存储过程 存…...

数学建模学习(10):遗传算法

遗传算法简介 • 遗传算法&#xff08;Genetic Algorithms&#xff09;是基于生物进化理论的原理发展起来的一种广为 应用的、高效的随机搜索与优化的方法。其主要特点是群体搜索策略和群体中个体之 间的信息交换&#xff0c;搜索不依赖于梯度信息。它是20世纪70年代初期由美国…...

私域流量整合:社群裂变的综合策略

在私域营销的风潮下&#xff0c;社群裂变已经成为许多企业实现增长的利器。然而&#xff0c;如何通过综合策略将社群裂变的影响力最大化&#xff0c;将成为私域流量整合的重要一环。本文将从新的角度探讨社群裂变的影响力策略&#xff0c;以及如何通过整合私域流量开辟新的增长…...

Redis的RDB持久化

Redis是一个键值对数据库服务器&#xff0c;服务器中通常包含着任意个非空数据库&#xff0c;而每个非空数据库中又可以包含任意个键值对&#xff0c;为了方便起见&#xff0c;我们将服务器中的非空数据库以及它们的键值对统称为数据库状态。 举个例子&#xff0c;下图展示了一…...

三、MySql表的操作

文章目录 一、创建表&#xff08;一&#xff09;语法&#xff1a;&#xff08;二&#xff09;说明&#xff1a; 二、创建表案例&#xff08;一&#xff09;代码&#xff1a;&#xff08;二&#xff09;说明&#xff1a; 三、查看表结构&#xff08;一&#xff09;语法&#xff…...

【模型加速部署】—— Pytorch自动混合精度训练

自动混合精度 torch. amp为混合精度提供了方便的方法&#xff0c;其中一些操作使用torch.float32&#xff08;浮点&#xff09;数据类型&#xff0c;而其他操作使用精度较低的浮点数据类型&#xff08;lower_precision_fp&#xff09;&#xff1a;torch.float16(half)或torch.…...

【Qt】信号槽的三种连接方式

【Qt】信号槽的三种连接方式 文章目录 【Qt】信号槽的三种连接方式1. 使用 ui 界面控件2. Qt4 的连接语法3. Qt5 的连接语法 Qt 的信号槽最初来源于函数回调&#xff0c;但注册回调函数有一定局限&#xff0c;安全性也没有保证。所以一定程度上可以说信号槽是对回调机制进行了封…...

Jtti:Ubuntu静态IP地址怎么配置

在 Ubuntu 中配置静态 IP 地址需要编辑网络配置文件。以下是在 Ubuntu 20.04 版本中配置静态 IP 地址的步骤&#xff1a; 打开终端&#xff0c;以管理员身份登录或使用 sudo 权限。 使用以下命令打开网络配置文件进行编辑&#xff1a; sudo nano /etc/netplan/00-installer-…...

iconfont 使用

官网地址 iconfont-阿里巴巴矢量图标库 常规操作&#xff1a;注册账号 首页 搜索想要的图片 加入购物车并添加项目没有就创建一个 在线生成链接 复制生成的css 在前端软件创建相关的wxss文件 全局 import "/static/iconfont/iconfont.wxss";page {height: 100%; }…...

基于java冰雪旅游服务网设计与实现

摘 要 随着2022年北京冬奥会的成功举办&#xff0c;在冬天进行冰雪运动已经逐渐流行起来&#xff0c;人们慢慢享受到了冰雪活动给大家带来的欢乐&#xff0c;除此之外人们的身体素质也可以得到提升。虽然已经有一部分人可以接受并享受在冰雪中进行运动&#xff0c;但大不部分人…...

django处理分页

当数据库量比较大的时候一定要分页查询的 在django中操作数据库进行分页 queryset models.PrettyNum.objects.all() #查询所有 queryset models.PrettyNum.objects.all()[0:10] #查询出1-10列 queryset models.PrettyNum.objects.filter(mobile__contains136)[0:10] …...

CI+JUnit5并发单测机制创新实践

目录 一. 现状问题 二. 分析原因 三. 采取措施 四. 实践步骤 五. 效能提升 资料获取方法 一. 现状问题 针对现如今高并发场景的业务系统&#xff0c;“并发问题” 终归是必不可少的一类&#xff08;占比接近10%&#xff09;&#xff0c;每次出现问题和事故后&#xff0c…...

蚁剑antSword-maste下载-安装-使用-一句话木马

下载 https://github.com/AntSwordProject/antSword 一句话木马 hack.php脚本 <?php eval($_POST[attack]);?> 安装 1、安装完成后启动 2、初始化&#xff0c;选择有源码的目录 3、连接...

[保研/考研机试] KY80 进制转换 北京大学复试上机题 C++实现

题目链接&#xff1a; KY80 进制转换https://www.nowcoder.com/share/jump/437195121691735660774 描述 写出一个程序&#xff0c;接受一个十六进制的数值字符串&#xff0c;输出该数值的十进制字符串(注意可能存在的一个测试用例里的多组数据)。 输入描述&#xff1a; 输…...

AP2915DC-DC降压恒流驱动IC LED电源驱动芯片 汽车摩托电动车灯

AP2915 是一款可以一路灯串切换两路灯串的降压 恒流驱动器,高效率、外围简单、内置功率管&#xff0c;适用于 5-80V 输入的高精度降压 LED 恒流驱动芯片。内置功 率管输出功率可达 12W&#xff0c;电流 1.2A。 AP2915 一路灯亮切换两路灯亮&#xff0c;其中一路灯亮可 以全亮&a…...

Android 实现无预览拍照功能

Android 实现无预览拍照功能 1.权限 需要相机、读写文件、悬浮窗权限 申请相机、读写文件 manifest.xml <uses-permission android:name"android.permission.CAMERA" /> <uses-permission android:name"android.permission.READ_EXTERNAL_STORAGE…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...