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最终添加的节点数据集合，返回值中的数据对象 是 newNodes被 clone后的，所以绝对不相等！

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
	}
};