zTree的使用

zTree的使用


zTree官方API文档

zTree方法

$.fn.zTree

init(obj, zSetting, zNodes)

init(obj, zSetting, zNodes)接口返回值是一个zTree对象,提供操作zTree的各种方法

  • 可用全局变量保存
// 全局变量
var zTreeObj;
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  • 也可直接通过$.fn.zTree.getZTreeObj()方法随时获取
// 参数为树的容器的id,比如:
// <ul id="treeDemo" class="ztree"></ul>
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
destory(treeId)

可以销毁指定treeId的zTree

  • 调用方法

  • zTreeObj.destory();

  • 销毁指定id的树

    • $.fn.zTree.destory(“treeDemo”);
  • 销毁所有的zTree

    • $.fn.zTree.destory();
_z:{tools, view, event, data}

zTree v3.x内部的全部方法都可以通过$.fn.zTree._z;进行调用

如无特殊需求不要使用此对象

zTreeObj.addNodes(parentNode, index, newNodes, isSilent)
// 增加根节点时parentNode为null
// index=-1时,插入到最后
// newNodes为Json对象
// isSilent 设定增加节点后是否自动展开父节点
var newNodes = [{name:"newNode1"}, {name:"newNode2"}, {name:"newNode3"}];
zTreeObj.addNodes(null, -1, newNodes);

返回值Array(JSON)zTree最终添加的节点数据集合,返回值中的数据对象 是 newNodesclone后的,所以绝对不相等!

copyNode(targetNode, node, moveType, isSilent)

moveType中"inner":成为子节点,“prev”:成为同级前一个节点,“next”:成为同级后一个节点

// 将根节点中第二个节点复制成为第一个节点的子节点
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();
treeObj.copyNode(nodes[0], nodes[1], "inner");
// 将根节点中第二个节点 复制成为 第一个节点的前一个节点
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();
treeObj.copyNode(nodes[0], nodes[1], "before");

对节点进行操作,必须先调用getNodes()接口

var nodes = zTreeObj.getNodes();
zTreeObj.editName(nodes[0]);
getSelectedNodes()

获取当前选择的节点

//  展开当前选择的第一个节点(包括其全部子节点)
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
if (nodes.length>0) {
	treeObj.expandNode(nodes[0], true, true, true);
}
getNodes()

获取zTree的全部节点数据

返回值Array(JSON)

​ 1、Array 仅仅是根节点的集合(默认情况子节点都处于 children 属性下);

​ 2、如需遍历全部节点需要利用递归,或利用 transformToArray 方法 将数据变成简单的 Array 集合

​ 3、对于异步加载模式下,尚未加载的子节点是无法通过此方法获取的。

getNodeByParamFuzzy(key, value, parentNode)

  • 根据节点数据的属性搜索,获取条件模糊匹配的节点数据JSON对象
getNodeByParam(key, value, parentNode)

根据节点数据的属性搜索,获取条件完全匹配的节点数据JSON对象

返回值为JSON

如有多个节点满足查询条件,只返回第一个匹配到的节点

// key:需要精确匹配的属性名称
// value: 需要精确匹配的属性值,可以是任何类型,只要保证与key指定的属性值保持一致即可
// parentNode:搜索范围,指定在某父节点下的子节点中进行搜索。null表示在全部节点中搜索
// 查找 id = 1 的节点数据
var treeObj = $.fn.zTree.getZTreeObj("tree");
var node = treeObj.getNodeByParam("id", 1, null);

var node = zTreeObj.getNodeByParam("name", "test1_1", null);
getNodeByTId(tId)

根据zTree的唯一标识tId快速获取节点JSON数据对象

  • ​ 通过内部的cache获取,不需要遍历节点
// 获取 tId = "tree_10" 的节点数据
var treeObj = $.fn.zTree.getZTreeObj("tree");
var node = treeObj.getNodeByTId("tree_10");
getNodeIndex(node)

获取某节点在同级节点中的序号(从0开始)

重要

getNodesByFilter(filter, isSingle, parentNode, invokeParam)

filter: Function。自定义过滤器函数 function filter(node) {…}

  • ​ filter 参数:node (节点数据 JSON)

  • ​ filter 返回值:boolean (true 表示符合搜索条件;false 表示不符合搜索条件)

isSingle = true 表示只查找单个节点,isSingle = false 表示查找节点集合,忽略此参数,表示查找节点集合

//  查找 level = 2 & name 中包含 "test" 的节点数据
function filter(node) {
    return (node.level == 2 && node.name.indexOf("test")>-1);
}
......
var treeObj = $.fn.zTree.getZTreeObj("tree");
var node = treeObj.getNodesByFilter(filter, true); // 仅查找一个节点
var nodes = treeObj.getNodesByFilter(filter); // 查找节点集合
reAsyncChildNodes(parentNode, reloadType, isSilent, callback)

强行异步加载父节点的子节点。[setting.async.enable = true 时有效],已经加载过的父节点可反复使用此方法重新加载。

  • parentNode:json 指定需要异步加载的父节点 JSON 数据

    1、parentNode = null 时,相当于从根节点 Root 进行异步加载

    2、parentNode.isParent = false 时,不进行异步加载

    3、请务必保证此节点数据对象 是 zTree 内部的数据对象

  • reloadType: string

    • reloadType = “refresh” 表示清空后重新加载。
    • reloadType != “refresh” 时,表示追加子节点处理。
  • callback: function

    • 刷新完成后的回调函数。
// 重新异步加载 zTree
var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.reAsyncChildNodes(null, "refresh");

// 重新异步加载当前选中的第一个节点
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
if (nodes.length>0) {
	treeObj.reAsyncChildNodes(nodes[0], "refresh");
}
async: {
        enable: true,                      //设置启用异步加载
        type: "get",                       //异步加载类型:post和get
        contentType: "application/json",   //定义ajax提交参数的参数类型,一般为json格式
        url: "/temp/test.json",                //定义数据请求路径
        autoParam: ["id=id", "name=name"]  //定义提交时参数的名称,=号前面标识节点属性,后面标识提交时json数据中参数的名称
    }
refresh()

刷新zTree

没有特殊必要,尽量不要用该方法

单个节点更新使用updateNode方法,异步加载模式下请使用reAsyncChildNodes方法

removeChildNodes(parentNode)

清空某父节点的子节点

1、清空子节点后,父节点会自动变为叶子节点,如需要父节点保持父节点状态,请设置 setting.data.keep.parent 属性。

2、请勿用此方法清空根节点,如果需要清空根节点,直接初始化 zTree,并且设置初始节点为 null 即可。

3、此方法不会触发任何事件回调函数。

removeNode(node, callbackFlag)

删除节点

node: 需要被删除的节点数据

callbackFlag:

​ callbackFlag = true 表示执行此方法时触发 beforeRemove & onRemove 事件回调函数

​ callbackFlag = false 表示执行此方法时不触发事件回调函数

selectNode(node, addFlag, isSilent)

选中指定节点

addFlag = true 表示追加选中,会出现多点同时被选中的情况

addFlag = false (默认)表示单独选中,原先被选中的节点会被取消选中状态

isSilent = true 选中节点时,不会让节点自动滚到到可视区域内

isSilent = false (默认)表示选中节点时,会让节点自动滚到到可视区域内

setEditable(editable)

设置zTree进入/取消编辑状态

true 表示进入 编辑状态

false 表示取消 编辑状态

var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.setEditable(true);
transformToArray(nodes)

zTree使用的标准JSON嵌套格式的数据转换为简单Array格式。(免去用户自行编写递归遍历全部节点的麻烦)

// 将 zTree 节点数据转换为简单 Array 格式
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.transformToArray(treeObj.getNodes());

transformTozTreeNodes(simpleNodes)

将简单 Array格式数据转换为 zTree使用的标准 JSON嵌套数据格式。

使用此方法,请务必设置节点唯一标识属性名称 setting.data.simpleData.idKey 和 父节点唯一标识属性名称 setting.data.simpleData.pIdKey,并且让数据满足父子关系。

// 将简单 Array 格式转换为zTree使用的标准格式

var setting = {
	data: {
		simpleData: {
			enable: true,
			idKey: "id",
			pIdKey: "pId",
			rootPId: 0
		}
	}
};
var simpleNodes = [
    {"id":1, "pId":0, "name":"test1"},
    {"id":11, "pId":1, "name":"test11"},
    {"id":12, "pId":1, "name":"test12"},
    {"id":111, "pId":11, "name":"test111"}
];
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.transformTozTreeNodes(simpleNodes);
updateNode(node, checkTypeFlag)

更新某节点数据,主要用于该节点显示属性的更新

1、可针对 name、target、 url、icon、 iconSkin、checked、nocheck 等这几个用于显示效果的参数进行更新,其他用于 zTreeNodes 的参数请不要随意更新,对于展开节点,还请调用 expandNode方法,因此请勿随意修改 open 属性。

2、用此方法修改 checked 勾选状态不会触发 beforeCheck / onCheck 事件回调函数。

checkTypeFlag

checkTypeFlag = true 表示按照 setting.check.chkboxType 属性进行父子节点的勾选联动操作

checkTypeFlag = false 表示只修改此节点勾选状态,无任何勾选联动操作

treeNode

click

最简单的click事件操作。相当于οnclick=“…”的内容。如果操作比较复杂,请调用onClick事件回调函数

// 设置某节点点击时,弹出信息框
var nodes = [
	{ "id":1, "name":"Google CN", "url":"http://g.cn", "click":"alert('test');"},
	......
]
getPath()

获取treeNode节点所有父节点(包括自己)

返回值: JSON

初始化节点数据时,由 zTree 增加此属性,请勿提前赋值

// 获取当前被选中的节点的所有父节点
var treeObj = $.fn.zTree.getZTreeObj("tree");
var sNodes = treeObj.getSelectedNodes();
if (sNodes.length > 0) {
	var node = sNodes[0].getPath();
}
url

节点链接的目标URL

1、编辑模式 (setting.edit.enable = true) 下此属性功能失效,如果必须使用类似功能,请利用 onClick 事件回调函数自行控制。

2、如果需要在 onClick 事件回调函数中进行跳转控制,那么请将 URL 地址保存在其他自定义的属性内,请勿使用 url

// 设置某节点点击时,跳转到 g.cn
var nodes = [
	{ "id":1, "name":"Google CN", "url":"http://g.cn"},
	......
]
*DIY*

用于保存节点的其他自定义数据信息,不要与 zTree 使用的属性相同即可,用户可随意设定。

// 设置节点的备用英文名称
var node = { "id":1, "name":"test1", "ename":"test eName"};

setting

dataFilter

用于对 Ajax 返回数据进行预处理的函数。[setting.async.enable = true 时生效]

默认值:null

Function 参数说明

  • treeId:String

    对应 zTree 的 treeId,便于用户操控

  • parentNode:JSON

    进行异步加载的父节点 JSON 数据对象

    对根进行异步加载时,parentNode = null

  • responseData:Array(JSON) / JSON / String

    异步加载获取到的数据转换后的 Array(JSON) / JSON / String 数据对象

    v3.4开始 支持 XML 数据格式的 String

  • 返回值:Array(JSON) / JSON

    返回值是 zTree 支持的JSON 数据结构即可。

    v3.x 支持单个 JSON 节点数据进行加载

    // 修改异步获取到的节点name属性
    function ajaxDataFilter(treeId, parentNode, responseData) {
        if (responseData) {
          for(var i =0; i < responseData.length; i++) {
            responseData[i].name += "_filter";
          }
        }
        return responseData;
    };
    var setting = {
    	async: {
    		enable: true,
    		url: "http://host/getNode.php",
    		dataFilter: ajaxDataFilter
    	}
    };
    

data

render

用于使用自定义的方法动态渲染节点名称

// name 对应zTree利用setting.key.name获取到的节点名称
// treeNode 待渲染节点的JSON数据对象
var setting = {
    data:{
        render: function(name, treeNode){
            return name + treeNode.id;
        }
    }
}

// title 对应zTree利用setting.key.title获取到的节点标题
var setting = {
    data:{
        render: function(title, treeNode){
            return title + treeNode.id;
        }
    }
}

view

nameIsHTML

设置name属性是否支持HTML脚本

如果允许 HTML 脚本,请根据自己的需求做校验,避免出现 js 注入等安全问题。

// 设置 name 属性支持 HTML 脚本
var setting = {
	view: {
		nameIsHTML: true
	}
};
var node = {"name":"<font color='red'>test</font>"};
nodeClasses

使用 className 设置文字样式,只针对 zTree 在节点上显示的对象。便于 css 与 js 解耦

默认值:{add: [], remove: []}

// 1. 设置全部节点 name 显示为红色
var setting = {
	view: {
		nodeClasses : {add: ['highlight']}
	}
};

// 2. 删除节点 name 指定的 className:highlight
var setting = {
	view: {
		nodeClasses : {remove: ['highlight']}
	}
};

// 3. 设置 level=0 的节点 name 显示为红色
function setNodeClasses(treeId, treeNode) {
	return treeNode.level == 0 ? {add: ['highlight']} : {remove: ['highlight']};
};
var setting = {
	view: {
		nodeClasses: setNodeClasses
	}
};
  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值