小小 前端 : 创作不易,觉得有用的小伙伴记得点赞关注一波哦!点关注不迷路
别划走呀,老铁点个关注再走!感谢老铁支持 (博主会长期更新,下面我们对table树形组件数据做个简单的小手术)
一、平铺数据转树形数据:
这个主要考察了一下递归的思想
方法一:(暴力求解)
/**
* 构造树型结构数据
* @param {*} data 数据源
* @param {*} Pid 父节点字段
* @param {*} id 子节点id
*/
function handleTree(data,Pid,id){
const list =[];
data.map(item=>{ //找到最上层的数据 父级节点为空
if(item[Pid] == ''){
list.push(item);
}
});
for(let i =0;i<list.length;i++){
setTree(list[i])
};
function setTree (row){
row.children =[];
for(let j= 0;j< data.length;j++){
if(data[j][Pid] == row[Id]){ //Id 为子id 当前数据的id
row.children.push(data[j]);
setTree(data[j]);
};
}
}
return list
}
方法一差不多我们也了解了,下面我们来看看第二个方法:
前端是一门美学,文化更是博大精深;前路漫漫,任重道远呀!
方法二:
/**
* 构造树型结构数据
* @param {*} data 数据源
* @param {*} id id字段 默认 'id'
* @param {*} parentId 父节点字段 默认 'parentId'
* @param {*} children 孩子节点字段 默认 'children'
*/
function handleTree(data, id, parentId, children) {
let config = {
id: id || 'id',
parentId: parentId || 'parentId',
childrenList: children || 'children',
};
var childrenListMap = {};
var nodeIds = {};
var tree = [];
for (let d of data) {
let parentId = d[config.parentId];
if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = [];
}
nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d);
}
for (let d of data) {
let parentId = d[config.parentId];
if (nodeIds[parentId] == null) {
tree.push(d);
}
}
for (let t of tree) {
adaptToChildrenList(t);
}
function adaptToChildrenList(o) {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]];
}
if (o[config.childrenList]) {
for (let c of o[config.childrenList]) {
adaptToChildrenList(c);
}
}
}
return tree;
}
说到这里方法二我们也大概了解了,大家还记得第一个我们写的是什么样子的吗?
下面我们就讲讲我们如何精简一下下呢。
filter 的基本用法
filter属性是前端数组中经常会用到的过滤方法(至于数组有哪些常用的方法呢?数组的处理我们在工作中应该经常会遇到吧,学好数组常用事件可以在工作中很明显的加大工作效率,这里就浅埋一个伏笔,其实很简单,关注博主下个内容我们江湖再见)
方法三:(filter 的运用):
/**
* 构造树型结构数据
* @param {*} data 数据源
* @param {*} id 子节点字段
* @param {*} pid 父节点字段
* @param {*} parentId 当前行父级id
*/
const handleTree = (data = [], id, pid, parentId) => {
const array = JSON.parse(JSON.stringify(data));
return array
.filter(item =>
parentId === undefined ? item[pid] === null || item[pid] === '' : item[pid] === parentId
)
.map(item => {
let children = handleTree(array, id, pid, item[id]);
if (children.length > 0) {
item.children = children.sort((a,b)=>a.listOrder -b.listOrder)
} else {
item.children = [];
}
return item;
});
};
这几种方法都是针对table 组件树形转换的(建议在全局引用,适用于有子级id,父级id两个字段的树形排列)。
一、树形数据转平铺数据:
方法一:(暴力求解)
下面的这个方法把数组里面的每条 数据的 "children" 属性都直接拿过来了,如果不想有children,检验把这个属性设置为 'null'。
/** 回溯、递归
* @param data // 树形数据
* @param arr // 转平铺的数组 建议传'[]'
*/
function recall(data,arr){
for(let i =0;i<data.length;i++){
arr.push(data[i]);
if(data[i].children && data[i].children.length){
recall(data[i].children,arr)
}
}
}
方法二:(利用es6 新语法)
下面这里如果是有不清楚什么是es6新语法糖的建议百度搜索一下哦,时代在进步,技术也在进步,我们要紧跟上时代的步伐。
come on! $$$
/**
* 把树形数据转为平级数据
* @param data 数据源
*/
const recall = (data = []) => {
let arr = [];
if (data.length > 0) {
data.forEach(x => {
arr = [...arr, x];
if (x.children) {
arr = [...arr, ...recall (x.children)];
}
});
}
arr = arr.map(x => {
// delete x.children;
return x;
});
return arr;
};
树形数据转换平铺数据的例子写到这里我们就不写了,树形转平铺的方式有很多很多,这就不一一列举了,创造不易,点关注不迷路,我是小小 前端 ;不要问小小中间为啥还有个空格呢?大家修改小小前端用户名,点击确定就知道啦,快乐的时光总是短暂的,这期我们就到这里啦,点关注不迷路 ,我就是小小 前端, 下条内容我们江湖再见!
在前端树形的转换方式有很多很多,上述的平铺数据对树形的转换方式限于两个字段的树形转换,大家可以根据工作需求安排合理的转换方式,这里可以@博主哦,我们一起探讨,革命尚未成功,同志仍需努力!在前端的知识海洋里翱翔,说到这里博主祝大家都工作顺利、升职加薪、心想事成。