javascript封装树数据处理插件treejs

 我们在做项目的时候经常会遇到管誉组织、部分、分类、等树结构的数据，在数据结构里面算是复杂类型的数据，处理起来会有点麻烦，一般都会使用到递归，最近自己在做项目的时候页遇到类似的需求，于是自己花了点时间封装了一个专门处理树数据的小插件，里面集成了一些常见的树处理方法，可以直接调用使用。代码不到300行，小巧易用，由于本人水平有限，可能写的不是很好，或者有些小bug，欢迎各位在使用过程中遇到问题指正错误，或者有更好的想法都可以留言交流。代码已经上传到gitee上了，有时间或者新的功能我会更新上去。欢迎下载使用。

TREEJS专门用于处理树数据的插件，包含创建树、新增节点、修改节点、删除节点、查询节点、获取节点层级等常见功能，插件小巧易用。

调用：

const OBJ = new $TREE('pid', 'children', 'name', 0);
let tree = OBJ.create(db);
console.log('树数据==', tree);
console.log('tree数据==', OBJ.sortTreeNodeChildrenByKey(tree, 2, 'name'));
let parentNode = OBJ.getParentNode(tree, 5);
console.log('父节点node==', parentNode);
let node = OBJ.getTreeNodeById(tree, 5);
console.log('节点node==', node);
let level = OBJ.getLevelNode(tree, 5);
console.log('层级节点node==', level);
OBJ.setTreeNodeValue(tree, 5, 'zyc', [1, 2, 3, 4]);
console.log('设置节点node==', tree);
let value = OBJ.getTreeNodeValueByKey(tree, 5, 'zyc');
console.log('获取节点node-value==', value);
OBJ.delTreeNodeKey(tree, 5, 'zyc');
console.log('删除key的树节点数据==', tree);
OBJ.appendChildrenNode(tree, 5, {id: 3232, pid: 21, name: '新增子节点1'});
OBJ.appendChildrenNode(tree, 5, {id: 4324, pid: 21, name: '新增子节点2'});
console.log('删除key的树节点数据==', tree);
OBJ.clearChildrenNode(tree, 5);
console.log('清空树子节点数据==', tree);
let nodeLevel = OBJ.getNodeLevel(tree, 5);
console.log('树节点层级==', nodeLevel);
let childrens = OBJ.getParentNodes(tree, 5);
console.log('树节子子节点==', childrens);

运行结果如下：

下载地址： csdn下载地址

码云地址：treejs

源码如下：

((w) => {
let $TREE = w.$TREE;
if (!w.$TREE) {
w.$TREE = {};
}
// 排序函数
function objSortBykey(objArr, key) {
let result = objArr.slice(0);
return result.sort((a, b) => a[key] - b[key]);
}
function TREEOBJ (pidKey, childrenKey, label, topPid) {
// 对象主体
this.pidKey = pidKey; // 所属父节点id key
this.topPid = topPid; // 顶级父节点id
this.childrenKey = childrenKey; // 子节点children
this.label = label; // 节点labe 的key值
// data 传进的树数据列表 pidKey 所属父级id对应的key值
this.create = function (data, pidKey = this.pidKey, pid) {
pid = pid || this.topPid; // 0为最高父级节点父id
let list = [];
data.map(item => {
if (item[pidKey] == pid) {
item[childrenKey] = this.create(data, pidKey, item.id);
list.push(item);
}
});
return list;
};
// 将树型结构数据处理成二位数组返回
this.getTreeDataList = function (data) {
const res = [];
function getData(data) {
data.forEach(v => {
res.push(v);
if (v[childrenKey]) {
getData(v[childrenKey]);
}
});
}
getData(data);
return res;
};
// 获取树节点的数量
this.getTreeNodeCount = function (data) {
return this.getTreeDataList(data).length || null;
};
// 根据对树节点的子节点根据key值进行排序
this.sortTreeNodeChildrenByKey = function (data, id, key) {
this.getTreeItem(data, id, item => {
if (item) {
item[childrenKey] = objSortBykey(item[childrenKey], key);
}
});
return data;
};
// id获取节点递归函数
this.getTreeItem = function (data, id, callBack) {
data.map(item => {
if (item.id == id) {
callBack && (typeof callBack == 'function') && callBack(item);
} else {
if (item[childrenKey]) {
this.getTreeItem(item[childrenKey], id, callBack);
}
}
});
};
// 根绝树节点id获取树节点的值
this.getTreeNodeById = function (data, id) {
let result = null; // 运行结果
this.getTreeItem(data, id, item => {
result = item;
});
return result;
};
// 设置修改树中的key对象值
this.setTreeNodeValue = function (data, id, key, value) {
this.getTreeItem(data, id, item => {
item[key] = value;
});
};
// 根据id获取对应树中的key值
this.getTreeNodeValueByKey = function (data, id, key) {
let value = null;
this.getTreeItem(data, id, item => {
value = item[key];
});
return value;
};
// 根据id删除对应树中的key值
this.delTreeNodeKey = function (data, id, key) {
let value = null;
this.getTreeItem(data, id, item => {
value = item[key];
if (key in item) {
delete item[key];
}
});
return value;
};
// 往树里面追加子节点
this.appendChildrenNode = function (data, id, node = {}) {
this.getTreeItem(data, id, item => {
if (item) {
if (item[childrenKey]) {
item[childrenKey].push(node);
} else {
item[childrenKey] = [];
item[childrenKey].push(node);
}
}
});
return data;
};
// 根据id 清空子节点
this.clearChildrenNode = function (data, id) {
this.getTreeItem(data, id, item => {
if (item) {
item[childrenKey] = [];
}
});
};
// 通过子节点id删除子节点
this.delChildrenNodeById = function (data, id, childId) {
this.getTreeItem(data, id, item => {
if (item) {
(item[childrenKey] || []).forEach((v, idx) => {
if (v.id == childId) {
item[childrenKey].splice(idx, 1);
}
});
}
});
};
// 获取父级节点
this.getParentNode = function (data, id) {
let currentNode = null;
let parentNode = null;
this.getTreeItem(data, id, item => {
if (item) {
currentNode = item;
}
});
if (currentNode) {
this.getTreeItem(data, currentNode[this.pidKey], item => {
if (item) {
parentNode = item;
}
});
}
return parentNode;
};
// 获取父级及祖先节点
this.getParentNodes = function (data, id) {
let parentNodes = this.getLevelNode(data, id);
return parentNodes;
};
// 获取子节点及子孙所有节点
this.getChildrenNodes = function (data, id) {
let res = [];
let childrens = [];
this.getTreeItem(data, id, item => {
if (item) {
childrens = item[childrenKey];
}
});
function getChs (data) {
for (let i = 0, len = data.length; i res.push(data[i]);
if (data[i][childrenKey] && data[i][childrenKey].length > 0) {
getChs(data[i][childrenKey]);
}
}
}
getChs(childrens);
return res;
};
// 获取子节点及子节点
this.getChildrenNode = function (data, id) {
let childrens = [];
this.getTreeItem(data, id, item => {
if (item) {
childrens = item[childrenKey];
}
});
return childrens;
};
// 辅组查询层级递归遍历函数
this.getTreeLevelNode = function (data, id, topPid = this.topPid, result, pidKey = this.pidKey) {
let currentId = id;
let node = this.getTreeNodeById(data, currentId);
result.push(node);
if (node && node[pidKey] && node[pidKey] !== topPid) {
this.getTreeLevelNode(data, node[pidKey], topPid, result, pidKey);
}
};
// 根据id获取当前树节点的层级节点数据（倒序）, topPid 最顶级父节点id
this.getLevelNode = function (data, id, topPid = this.topPid, pidKey = this.pidKey) {
let result = [];
this.getTreeLevelNode(data, id, topPid, result, pidKey);
return result || [];
};
// 获取当前节点层级
this.getNodeLevel = function (data, id) {
const res = this.getLevelNode(data, id);
return res.length || 0;
};

}
w.$TREE = TREEOBJ;
})(window);