zTree常用方法

1、获取zTree对象的全部方法：

$.fn.zTree.getZTreeObj("tree");

getZTreeObj()方法的参数是DOM元素的ID，返回 zTree 对象，提供操作 zTree 的各种方法，对于通过 js 操作 zTree 来说必须通过此对象。

2、获取全部节点的数据

var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();

使用getNodes()方法可以返回全部树节点的数据。

 

3、新增一个或多个根节点

<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/zTree/jquery.ztree.core.js"></script>
<script src="js/zTree/jquery.ztree.excheck.js"></script>
<script src="js/zTree/jquery.ztree.exedit.js"></script>

<ul id="tree" class="ztree"></ul>
<button id="addTree">添加</button>

function addTree() {
    let addTree = document.getElementById("addTree");
    addTree.onclick = function() {
        let length = $.fn.zTree.getZTreeObj("tree").getNodes().length;
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        var newNode = {name: "newNode" + length};
        newNode = treeObj.addNodes(null, newNode);        
    }
}

       

 

4、获取选中的节点的json对象

获取指定节点的json数据对象，可通过getNodeByTId()方法来获取，该方法接收一个参数，参数的值为ztree内的唯一表示tId。示例

var treeObj = $.fn.zTree.getZTreeObj("tree");
var node = treeObj.getNodeByTId("tree_10");

给每个树节点绑定点击事件之后，可以获取到this值，this.id就是ztree对象的tid。

 

5、删除指定节点

删除指定的树节点，使用 removeNode()方法，使用示例：

多个节点：

var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
for (var i=0, l=nodes.length; i < l; i++) {
	treeObj.removeNode(nodes[i]);
}

单个节点：

let zTree = $.fn.zTree.getZTreeObj("tree");
let thisObj = zTree.getNodeByTId(这里写上节点的tID);    
zTree.removeNode(thisObj, true);

removeNode方法的第二个参数是一个布尔值，为true时，会触发beforeRemove事件回调函数，如果不写该参数则默认为false。

6、重命名节点名称

重命名节点名称的方法是：editName()，调用示例：

let zTree = $.fn.zTree.getZTreeObj("tree");
let thisObj = zTree.getNodeByTId(这里写上节点的tID);
zTree.editName(thisObj);

zTree也有自带的重命名按钮，如果不想使用默认自带的按钮，可以通过事件重写。

7、自定义节点的icon图标

在节点的json对象中添加属性：icon为通用图标，即不管打开还是关闭节点，都是显示这个图标，iconOpen为父节点打开时显示的图标，iconClose为父节点关闭时显示的图标。使用示例：

let newNode = {
    name: 'rootNode',
    icon: 'css/zTreeStyle/img/node.png',
    iconClose: 'css/zTreeStyle/img/diy/7.png',
    iconOpen: 'css/zTreeStyle/img/diy/5.png'
};

icon、iconOpen、iconClose为key，value值是图标的路径。

效果：

  

8、zTree修改选中节点时的样式

方法一：

直接修改css文件里面的样式，如：

.ztree li a.curSelectedNode {padding-top:0px; /*background-color:#FFE6B0;*/ color:black; height:16px; border:1px #FFB951 solid; /*opacity:0.8;*/}

这里修改的只是背景和透明度，可以根据不同需求来修改就好了。

修改前后效果：

前

后

原文件示意图：

 

方法二：

直接创建一个新的样式类名，然后在js文件里修改。示例：

window.onload = function() {
    $.fn.zTree.consts.node.CURSELECTED = "newClassName";
}

newClassName必须是一个css的类名，且已经定义了相应的样式，否则无效。

 

9、zTree隐藏节点后面的按钮

在setting对象里面的edit中，设置为：

删除按钮：showRemoveBtn: false,

编辑名称按钮：showRenameBtn: false，为false表示不显示

添加节点按钮（在setting对象里面的view中）：addHoverDom: false,这一个属性不写，或者写为false都行，但是如果是写为：addHoverDom: addHoverDom,这样的话，就会显示添加按钮。所以直接不写是最好。