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

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.lryc.cn/news/163395.html

相关文章:

  • PYTHON 3.10中文版官方文档
  • TLS协议深度解析:挖掘现代网络安全防御的底层技术
  • python的time各种用法
  • Vue中使用vue-router
  • uni-app之android原生插件开发
  • javaee spring aop实现事务 项目结构
  • 9.9校招 实习 内推 面经
  • 互联网医院App开发:构建医疗服务的技术指南
  • 阅读分享--重读Youtube深度学习推荐系统论文,字字珠玑,惊为神文
  • 使用Python操作CSV文件,方便又快捷
  • 深入探索KVM虚拟化技术:全面掌握虚拟机的创建与管理
  • javaee springMVC model的使用
  • Spring与Docker:如何容器化你的Spring应用
  • 试图替代 Python 的下一代AI编程语言:Mojo
  • 【数据结构】栈、队列和数组
  • python算法调用方案
  • 《微服务架构设计模式》第二章
  • taro vue3 ts nut-ui 项目
  • 【群答疑】jmeter关联获取上一个请求返回的字符串,分割后保存到数组,把数组元素依次作为下一个请求的入参...
  • Shell 函数详解(函数定义、函数调用)
  • git-命令行显示当前目录分支
  • pgsql 报错 later table “drop column” is not supported now
  • 如何制定私域流量布局计划?
  • yolov8 模型部署--TensorRT部署-c++服务化部署
  • 自适应迭代扩展卡尔曼滤波算法AIEKF估计SOC VS 扩展卡尔曼估计SOC
  • 2023-亲测有效-git clone失败怎么办?用代理?加git?
  • An Empirical Study of GPT-3 for Few-Shot Knowledge-Based VQA
  • 2023高教社杯数学建模B题思路分析 - 多波束测线问题
  • 02-docker network
  • 栈和队列经典笔试题