<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
class utils {
//下载图片
downloadImage(imgsrc, name) {
var image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function () {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
var a = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "图片"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc + "?rom=" + Math.random();
}
//字节转换
getFileSize(longSize) {
if (!longSize) return;
var size = parseFloat(longSize);
var units = ["B", "KB", "MB", "GB", "TB", "PB"];
var mod = 1024;
var i = 0;
while (size >= mod) {
size /= mod;
i++;
}
return size.toFixed(2) + units[i];
}
//递归-从上往下
//固定结构:{id: item.id,name: item.name,parentId: "0",type: 1(可选)}
recursionGetChilds(data, rootId) {
let resultArray = [];
let getChilds = function (pid, parent) {
let childs = [];
for (const child of data) {
if (child.parentId === pid) {
childs.push(child);
}
}
if (childs.length <= 0) {
if (parent) {
delete parent.children;
}
return;
}
for (const c of childs) {
let v;
if (!parent) {
v = { label: c.name, children: [], data: c };
resultArray.push(v);
} else {
v = { label: c.name, children: [], data: c };
parent.children.push(v);
}
getChilds(c.id, v);
}
};
getChilds(rootId);
return resultArray;
}
//递归-从下往上
recursionGetRoot(data, childId) {
let rootReusltArray = [];
let getRoot = function (id) {
if (id == null || id == "0") {
return;
};
for (const item of data) {
if (item.id === id) {
rootReusltArray.push(item);
getRoot(item.parentId);
return;
}
}
}
getRoot(childId);
return rootReusltArray;
}
//递归搜索
recursionFilter(data, keyword) {
let rootReusltArray = [];
//通过关键字筛选出的数据集合
let matchData = data.filter(a => a.name.includes(keyword));
for (const item of matchData) {
let rootArray = this.recursionGetRoot(data, item.id);
rootReusltArray.push(...rootArray);
}
//ES6合并去重
rootReusltArray = Array.from(new Set(rootReusltArray))
rootReusltArray = this.recursionGetChilds(rootReusltArray, "0");
return rootReusltArray;
}
}
window.onload = function () {
var data = [{ "id": "01", "parentId": "0", "name": "后端编程语言" },
{ "id": "02", "parentId": "0", "name": "前端编程语言" },
{ "id": "03", "parentId": "0", "name": "嵌入式开发" },
{ "id": "0101", "parentId": "01", "name": ".NET" },
{ "id": "010101", "parentId": "0101", "name": "C#语言" },
{ "id": "010102", "parentId": "0101", "name": "F#语言" },
{ "id": "01010102", "parentId": "010101", "name": "C#2.0" },
{ "id": "01010101", "parentId": "010101", "name": "C#1.0" },
{ "id": "0102", "parentId": "01", "name": "Java" },
{ "id": "010201", "parentId": "03", "name": "Android" },
{ "id": "0102012323", "parentId": "0103", "name": "G0.1" },
{ "id": "0103", "parentId": "01", "name": "Go" },
{ "id": "0201", "parentId": "02", "name": "Javascript" },
{ "id": "0202", "parentId": "02", "name": "Typescript" }
];
let util = new utils();
//递归从上往下
let arr1 =util.recursionGetChilds(data,'0');
console.log(arr1);
//递归从下往上
let arr2 =util.recursionGetRoot(data,'0201');
console.log(arr2);
//递归搜索
let arr3 =util.recursionFilter(data,'C#');
console.log(arr3);
}
</script>
</head>
<body>
</body>
</html>
