Ztree的日常使用记录

news/2024/6/16 23:59:18 标签: 前端, javascript, 开发语言

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

view.nameIsHTML设置为true即可

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

2. 使用自定义的title显示

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

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

3. 节点点击事件监听

callback.onClick设置回调函数即可

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

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

edit中设置相关按钮的显示

javascript">var setting = {
    check: {
        enable: true
    },
    edit: {
        drag: {
            isMove: true        // 打开移动功能,鼠标左键点击后拖拽
        },
        enable: true,                       //编辑节点必须设置该字段,并且编辑状态包括修改和删除,所以如果设置true
        editNameSelectAll : 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、next
            console.log(treeId + "被拖拽");
            return true;
        },
        beforeRename :  function (treeId, treeNode, newName, isCancel){//修改前的回调函数
            return true;
        },  
        onRename: function (treeId, treeNode, newName, isCancel){//修改回调函数
            console.log(treeId + "的新名字" + newName);
        }
    }
};

5. 获得所有选中节点

javascript">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设置回调函数即可

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


http://www.niftyadmin.cn/n/5019330.html

相关文章

动静态库生成使用

&#x1f525;&#x1f525; 欢迎来到小林的博客&#xff01;&#xff01;       &#x1f6f0;️博客主页&#xff1a;✈️林 子       &#x1f6f0;️博客专栏&#xff1a;✈️ Linux       &#x1f6f0;️社区 :✈️ 进步学堂       &#x1f6f0…

Flink DataStream 体系

前言 本文隶属于专栏《大数据技术体系》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见大数据技术体系 思维导图 正文 对 Flink 这种以流为核心的分布式计…

Go基础16-defer的运作机制及常见用法

defer的运作离不开函数&#xff0c;这至少有两层含义&#xff1a; ● 在Go中&#xff0c;只有在函数和方法内部才能使用defer&#xff1b; ● defer关键字后面只能接函数或方法&#xff0c;这些函数被称为deferred函数。defer将它们注册到其所在goroutine用于存放deferred函数…

MATLAB入门-数据的导入和导出

MATLAB入门-数据的导入和导出 注&#xff1a;本篇文章是课程学习笔记&#xff0c;课程链接为&#xff1a;头歌 常见的几个导入数据的方法 load函数 load函数专门用于引入MATLAB的.mat格式数据&#xff0c;十分的简单方便。 例如&#xff1a;一个-ASCII编码形式存储的数据文件…

算法与设计分析--实验一

蛮力算法的设计与分析&#xff08;暴力&#xff09; 这次是某不知名学院开学课程的第一次实验&#xff0c;一共5道题&#xff0c;来自力扣 第一题.216组合总和*力扣题目链接 第一道题是经典的树型回溯 class Solution { public:vector<vector<int>> combinatio…

C语言学习系列-->字符函数和字符串函数

文章目录 一、字符函数1、字符分类函数2、字符转换函数 二、字符串函数1、strlen概述模拟实现 2、strcpy概述模拟实现 3、strcat概述模拟实现 3、strcmp概述模拟实现 4、有限制的字符串函数strncpystrncatstrncmp 4、strstr概述模拟实现 一、字符函数 1、字符分类函数 包含头…

两数乘积:输出1~100整数乱序列表中两数乘积是目标整数的最小下标对

给定1~100整数的乱序列表&#xff0c;查找并输出乘积是用户指定整数的两个整数下标对。 (本笔记适合熟练掌握Python列表的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教…

nginx-日志处理

access.log #正常请求的日志 error.log #访问错误日志&#xff0c;404&#xff0c;500等请求在这里 buffer&#xff1a;设置缓冲区&#xff0c;访问日志不会直接打到磁盘上&#xff0c;而是先积攒到缓冲区&#xff0c;缓冲区满了后在统一往…