Ztree的日常使用记录

1. 树节点名称中使用超文本标签

view.nameIsHTML设置为true即可

var setting = {view: {nameIsHTML: true},check: {enable: true},data : {simpleData : {enable : true}}
};

2. 使用自定义的title显示

view.showTitle设置为true, 在data.key中声明title对应的字段名即可

var setting = {view: {showTitle: true},check: {enable: true},data : {simpleData : {enable : true},key : {title: 'title'}}
};

3. 节点点击事件监听

callback.onClick设置回调函数即可

var setting = {check: {enable: true},data : {simpleData : {enable : true}},callback : {onClick : function (event, treeId, treeNode) {console.log(treeNode.name);}}
};

4. 使用编辑、删除、拖拽移动功能

edit中设置相关按钮的显示

var setting = {check: {enable: true},edit: {drag: {isMove: true        // 打开移动功能,鼠标左键点击后拖拽},enable: true,                       //编辑节点必须设置该字段,并且编辑状态包括修改和删除,所以如果设置trueeditNameSelectAll : true,           //删除按钮和修改按钮都会出现showRenameBtn : true,               //默认值就是true,可以不写的removeTitle: "删除节点",             //删除按钮名称renameTitle: "修改节点",             //修改按钮名称showRemoveBtn: function showRemoveBtn(treeId,treeNode){     //选做,可以删除这一行return treeNode.pId != '0'; // 根节点不显示删除按钮}},data : {simpleData : {enable : true}},callback : {beforeRemove : function (treeId, treeNode){//删除前的回调函数return true;},onRemove: function(treeId, treeNode) {//删除回调函数console.log(treeId + "被删除");},beforeDrop: function (treeId, treeNodes, targetNode, moveType) {// 拖拽回调 moveType为inner、prev、nextconsole.log(treeId + "被拖拽");return true;},beforeRename :  function (treeId, treeNode, newName, isCancel){//修改前的回调函数return true;},  onRename: function (treeId, treeNode, newName, isCancel){//修改回调函数console.log(treeId + "的新名字" + newName);}}
};

5. 获得所有选中节点

function getChecks() {var treeObj = $.fn.zTree.getZTreeObj("zTree");var nodes = treeObj.getCheckedNodes(true);var array = new Array();for (var i = 0; i < nodes.length; i++) {array.push(nodes[i].id); //获取选中节点的值}return array.join(",");
}

6. 节点勾选事件监听

callback.onCheck设置回调函数即可

var setting = {check: {enable: true},data : {simpleData : {enable : true}},callback : {onCheck : function (event, treeId, treeNode) {console.log(treeNode.checked);}}
};

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

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

相关文章

力扣:83. 删除排序链表中的重复元素(Python3)

题目&#xff1a; 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚…

群晖NAS:通过Docker 部署宝塔面板【注册表:cyberbolt/baota】

群晖NAS&#xff1a;通过 Docker 部署宝塔面板【注册表&#xff1a;pch18/baota】 由于 docker 源地址被墙&#xff0c;在面板里面查询不到注册表&#xff0c;使用 ssh 命令行拉取 1、打开 SSH&#xff0c;链接后打开命令行 这里不赘述&#xff0c;具体自行百度 2、下载 镜像…

origin中optimal cluster安装报错解决

1.在安装之后程序运行出错&#xff0c;报错信息为缺少numpy包。解决办法&#xff1a;打开窗口-脚本窗口&#xff0c;用pip安装numpy&#xff0c;其他缺少的包可用同样方法解决。 2.有的包在外部python中才有&#xff0c;通过origin无法下载。解决办法&#xff1a;在连接-python…

PHP对接阿里云虚拟号的实现(号码隐私保护)

fastadmin 封装框架 实现功能&#xff1a;AXN隐私号绑定、解绑&#xff1b; 场景&#xff1a;为店铺手机号开通虚拟号&#xff0c;用户联系店铺展示虚拟号码&#xff1b; 官方开放文档地址&#xff1a;https://help.aliyun.com/document_detail/59655.html?spma2c4g.111742…

营销邮件主题怎么写?编写邮件主题的技巧?

如何创建营销邮件主题&#xff1f;制作EDM邮件主题的方法策略&#xff1f; 营销邮件主题在整个营销邮件中起着至关重要的作用&#xff0c;它是吸引读者打开邮件的第一步。蜂邮EDM将分享一些关于如何撰写令人惊艳的营销邮件主题的技巧&#xff0c;帮助您吸引更多的目标受众。 …

【高德地图】 覆盖物/画点/画折线/画多边形/画矩形/画圆

官方示例 https://lbs.amap.com/demo/javascript-api/example/mouse-operate-map/mouse-draw-overlayers <!doctype html> <html lang"en"><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content…

I2S/PCM知识点记录

目录 1.常见的音频采样率有两类&#xff0c;一类是48K domain&#xff0c;另一类是44.1KHz domain 2.常见采样深度 【即单声道和单slot位宽】8/12/16/24/32 bit 3.帧结构 4.I2S/PCM允许实际有效采样位宽比传输的位宽小 5.ddr存储对齐 6.sclk和mclk以及adifclk的产…

微信小程序中 vant weapp 使用外部的icon作为图标的步骤

微信小程序中 vant weapp 使用外部的icon作为图标的步骤 1. 在项目中创建静态资源文件夹2. 前往iconfont图标官网&#xff0c;添加图标并拷贝在线链接3. 下载iconfont代码&#xff0c;解压之后拷贝到小程序的目录中4. 修改iconfont.wxss 将本地链接替换为在线链接5. 在项目的ap…

L1-017 到底有多二 C++解法

题目 一个整数“犯二的程度”定义为该数字中包含2的个数与其位数的比值。如果这个数是负数&#xff0c;则程度增加0.5倍&#xff1b;如果还是个偶数&#xff0c;则再增加1倍。例如数字-13142223336是个11位数&#xff0c;其中有3个2&#xff0c;并且是负数&#xff0c;也是偶数…

Bash常见快捷键

生活在 Bash Shell 中&#xff0c;熟记以下快捷键&#xff0c;将极大的提高你的命令行操作效率。 编辑命令 Ctrl a &#xff1a;移到命令行首Ctrl e &#xff1a;移到命令行尾Ctrl f &#xff1a;按字符前移&#xff08;右向&#xff09;Ctrl b &#xff1a;按字符后移&a…

巨额亏损,股价遭受重创,Polestar极星汽车已陷入困境

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 8月31日&#xff0c;由吉利汽车&#xff08;00175&#xff09;和沃尔沃汽车合资创建的瑞典电动汽车公司Polestar极星汽车&#xff08;PSNY&#xff09;公布了2023年第二季度财报。 这家电动汽车公司在去年通过SPAC上市后&am…

Flink+Flink CDC版本升级的依赖问题总结

之前使用Flink1.13Flink CDC2.0同步MySQL数据&#xff0c;想测试一下最新的几个版本。但是各种依赖冲突的报错&#xff0c;经过一段时间的调试&#xff0c;终于解决&#xff0c;现在总结一下。 1、flink1.15前后jar包名称不一样 flink-streaming-java、flink-clients、flink-…

电子产品CE认证申请,CE-RED认证

CE认证&#xff0c;即只限于产品不危及人类、动物和货品的安全方面的基本安全要求&#xff0c;而不是一般质量要求&#xff0c;协调指令只规定主要要求&#xff0c;一般指令要求是标准的任务。 构成欧洲指令核心的"主要要求"&#xff0c;在欧共体1985年5月7日的&…

k8s集群中ETCD备份和恢复

文章目录 [toc]一、etcd 概述二、安装etcdctl工具三、kubeadm部署方式部署1&#xff09;备份2&#xff09;恢复四、定时备份 五、二进制部署备份1&#xff09;备份2&#xff09;恢复1、停止apiserver和etcd2、etcd_1恢复3、etcd_2恢复4、etcd_3恢复5、启动etcd和apiserver6、检…

java在linux环境中如何搭建xxl-job管理后台的详细步骤?

在 Linux 环境中搭建 xxl-job 的管理后台&#xff0c;你可以按照以下详细步骤进行&#xff1a; 下载并解压源码包&#xff1a;在 Linux 终端使用 wget 或 curl 命令下载 xxl-job 的源码包&#xff0c;并使用 tar 命令解压缩源码包到指定目录。 wget https://github.com/xuxueli…

使用正则表达式总结

多行匹配 使用Pattern.DOTALL | Pattern.MULTILINE参数 Pattern.CASE_INSENSITIVE&#xff1a;不区分大小写 public static void main(String[] args) {String teststr "AA aa AASSF \n\r */ DDET AA";String regStr "(?AA)\\w\\b";extracted(testst…

【linux命令讲解大全】075. 网络数据包分析工具ngrep及其应用

文章目录 ngrep补充说明安装语法选项实例 从零学 python ngrep 方便的数据包匹配和显示工具 补充说明 ngrep 命令是 grep 命令的网络版&#xff0c;它提供了更多的 grep 特性&#xff0c;用于搜索指定的数据包。由于安装 ngrep 需要使用 libpcap 库&#xff0c;因此它支持许…

map-reduce执行过程

Map阶段 Map 阶段是 MapReduce 框架中的一个重要阶段&#xff0c;它负责将输入数据转换为中间数据。Map 阶段由一个或多个 Map 任务组成&#xff0c;每个 Map 任务负责处理输入数据的一个子集。 执行步骤 Map 阶段的过程可以分为以下几个大步骤&#xff1a; 输入数据分配&a…

民安智库(北京第三方窗口测评)参展商满意度问卷如何设计

设计一个有效的参展商满意度问卷需要仔细考虑问题的选择、排列和表达方式&#xff0c;以确保获取有用的反馈信息。以下是设计参展商满意度问卷的一些建议&#xff1a; 明确调查的目标&#xff1a; 在开始设计问卷之前&#xff0c;确定满意度调查的具体目标和研究问题。明确您…

基于Java+SpringBoot+Vue前后端分离交通管理在线服务系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…