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, //编辑节点必须设置该字段,并且编辑状态包括修改和删除,所以如果设置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 (event, treeId, treeNode){//修改回调函数
console.log(treeNode.id + "的新名字" + treeNode.name);
}
}
};
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);
}
}
};
7. 根据自定义规则搜索节点
getNodesByFilter(filterFunction, isSingleBoolean, parentNodeJSON, invokeParam);
Function 参数说明
filterFunction
自定义过滤器函数 function filter(node) {...}
filter 参数:node (节点数据 JSON)
filter 返回值:boolean (true 表示符合搜索条件;false 表示不符合搜索条件)
isSingleBoolean
isSingle = true 表示只查找单个节点
isSingle = false 表示查找节点集合
忽略此参数,表示查找节点集合
parentNodeJSON
可以指定在某个父节点下的子节点中搜索
忽略此参数,表示在全部节点中搜索
invokeParam任意类型
用户自定义的数据对象,用于 filter 中进行计算
function getRootNode(node) {
return node.level == 0;
}
var zTree = $.fn.zTree.getZTreeObj("zTree");
var nodeRoot = zTree.getNodesByFilter(getRootNode, true);
console.log(nodeRoot.id);
本文含有隐藏内容,请 开通VIP 后查看