要想了解完整的ztree的使用方法，还是要去仔细看看api
记录一个今天的需求就是获取当前选择节点下的全部子节点id或者name
1、创建初始化设置
var setting = {
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: treenodeClick
}
}
// 2、创建点击响应事件
function treenodeClick(event, treeId, treeNode, clickFlag) {
//此处treeNode 为当前节点
var str = ''
str = getAllChildrenNodes(treeNode, str)
// 加上被选择节点自己
str = str + ',' + treeNode.id
// 去掉最前面的逗号
var ids = str.substring(1, str.length)
// 得到所有节点ID 的数组
var idsArray = ids.split(',')
// 得到节点总数量
var length = idsArray.length
}
// 递归，获取所有子节点
function getAllChildrenNodes(treeNode, result) {
if (treeNode.isParent) {
var childrenNodes = treeNode.children
if (childrenNodes) {
for (var i = 0; i < childrenNodes.length; i++) {
result += ',' + childrenNodes[i].id
result = getChildNodes(childrenNodes[i], result)
}
}
}
return result
}
但是今天业务里面有一个问题就是需要获取当前节点下面的所有子节点的name值，准确的来说是获取当
前节点下面不含有children属性的所有子项的name值，以下是我给出的假数据弄得例子
var obj = {
id: 1,
name: 'aaa',
level: 0,
children: [
{
id: 2,
name: 'asd',
level: 1,
children: [
{
id: 6,
name: 'asdcxz',
level: 2,
children: [
{ id: 18, name: 'zxcq', level: 3 },
{ id: 19, name: 'qeqwe', level: 3 },
{ id: 20, name: 'asdggw', level: 3 }
]
},
{
id: 7,
name: '二期车间',
level: 2,
children: [
{ id: 21, name: 'tuy', level: 3 },
{ id: 22, name: '1#fhh', level: 3 },
{ id: 23, name: 'hfghfgh', level: 3 }
]
},
{
id: 8,
name: '组装一车间',
level: 2,
children: [
{ id: 24, name: 'kjhky', level: 3 },
{ id: 25, name: 'qdlska', level: 3 },
{ id: 26, name: 'qdkjpc', level: 3 }
]
}
]
},
{
id: 3,
name: 'jzlcijp2',
level: 1,
children: [
{
id: 9,
name: '1354zcxz',
level: 2,
children: [
{ id: 27, name: '54wfs', level: 3 },
{ id: 28, name: '9879xzcxzc', level: 3 },
{ id: 29, name: '8646zxcxz', level: 3 }
]
},
{
id: 10,
name: 'egtgt',
level: 2,
children: [
{ id: 30, name: 'pkjjhj', level: 3 },
{ id: 31, name: 'fbege', level: 3 },
{ id: 32, name: 'zxcxzvw', level: 3 }
]
},
{
id: 11,
name: '1354zx3cxz',
level: 2,
children: [
{ id: 33, name: 'zxcqrf', level: 3 },
{ id: 34, name: 'nbmbnm', level: 3 },
{ id: 35, name: 'nmurege', level: 3 }
]
}
]
},
{
id: 4,
name: 'ertdfg',
level: 1,
children: [
{
id: 12,
name: 'bcvfghrt',
level: 2,
children: [
{ id: 36, name: 'cvbertw', level: 3 },
{ id: 37, name: 'dafgsdh', level: 3 },
{ id: 38, name: 'zxhhhwe', level: 3 }
]
},
{
id: 13,
name: 'zfgstety',
level: 2,
children: [
{ id: 39, name: 'qdxzcb', level: 3 },
{ id: 40, name: 'awqfzc', level: 3 },
{ id: 41, name: 'qedqdxz', level: 3 }
]
},
{
id: 14,
name: 'igcbcv',
level: 2,
children: [
{ id: 42, name: 'icahkasxc', level: 3 },
{ id: 43, name: 'pzxcaxc', level: 3 },
{ id: 44, name: 'vqqdzxc', level: 3 }
]
}
]
},
{
id: 5,
name: 'qdcxz1cxzc',
level: 1,
children: [
{
id: 15,
name: 'qwdwqd1z2cz',
level: 3,
children: [
{ id: 45, name: '435qdqdxz', level: 3 },
{ id: 46, name: 'qfxzcz13', level: 3 },
{ id: 47, name: 'gregher13', level: 3 }
]
},
{
id: 16,
name: '装备二期',
level: 3,
children: [
{ id: 48, name: 'qwrtcx5', level: 3 },
{ id: 49, name: 'bheher8', level: 3 },
{ id: 50, name: 'jytj7', level: 3 }
]
},
{
id: 17,
name: 'ojhkh8',
level: 3,
children: [
{ id: 51, name: 'xcvdsfs5', level: 3 },
{ id: 52, name: 'iyukjbg9', level: 3 },
{ id: 53, name: 'fgdfhdf5', level: 3 }
]
}
]
}
]
}
现在可以把需求换一下，换成获取level为3的数据并且封装为一个方法，level为3的数据项没有
children属性，此时可以用递归的方法获取数据
var tempArr = obj.children
var arr1 = []
var arr2 = []
var list = { name: '', id: '' }
function deepSearch(tree) {
for (var i = 0; i < tree.length; i++) {
// console.log(tree[i]);
if (tree[i].children && tree[i].children.length > 0) {
deepSearch(tree[i].children)
}
if (!tree[i].children) {
arr1.push(tree[i].id)
list.id = arr1.join(',')
arr2.push(tree[i].name)
list.name = arr2.join(',')
}
}
return list
}
var res = deepSearch(tempArr)
// console.log(res)
console.log(res.id)
console.log(res.name)
用递归的好处可以深度去遍历每一项有没有children属性，然后得到自己要的数据，该方法适用于
无论你又多少层的数据都可以去使用
但是ztree.js里面有个属性可以更加方便去使用得到自己想要的数据，在你的check事件里面直接写
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = treeObj.getCheckedNodes(true)
此时得到的nodes项去遍历
for(var i = 0;i<nodes.length;i++){
console.log(nodes[i])
此时的nodes[i]就是你选择的项以及下面的所有子项，若是只想获取到不含有children属性
的子项，可以直接加一个判断为
if(nodes[i].children == 'undefine'|| nodes[i].children == null){
console.log(nodes[i])此时就是自己想要的数据了
}
}
