常用的UI组件为我们提供了很便捷的树形展示和操作方案,例如ant,element,Iview等Tree组件;
以此为基础,无论是友好的java同学直接给你treeList 还是平级结构下的前端组装数据的处理仍需要使用者自己来动手
为了事半功倍工具函数是不可少的
1.树形数据组装:
/**
* @Description:sourceData数据源
* @Author: ShiWei
* @Date: 2020-11-04
*/
export const createTree = function (sourceData,id,pid) {
// 转换成插件需要格式的树结构
// const id = id
// const pid = pid
// 深拷贝
const data = sourceData.map(item => {
return Object.assign({}, item)
})
const res = []
const temp = {}
for (let i = 0; i < data.length; i++) {
temp[data[i][id]] = data[i]
}
for (let k = 0; k < data.length; k++) {
if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
if (!temp[data[k][pid]].children) {
temp[data[k][pid]].children = []
}
if (!temp[data[k][pid]]._level) {
temp[data[k][pid]]._level = 1
}
data[k]._level = temp[data[k][pid]]._level + 1
temp[data[k][pid]].children.push(data[k])
} else {
res.push(data[k])
}
}
return res
}
2.获取节点所有父节点
/**
* 深度优先遍历树
* 一个递归方法
* @params id:当前节点
* @params data:原始数据
* @params deptId:当前遍历节点的父级节点id,初始为null(deptId)
**/
getFathersById(id, data, prop = 'deptId') {
var arr = []
const rev = (data, IDS) => {
for (var i = 0, length = data.length; i < length; i++) {
const node = data[i]
if (node[prop] === IDS) {
arr.unshift(node[prop])
return true
} else {
if (node.children && node.children.length) {
if (rev(node.children, IDS)) {
arr.unshift(node[prop])
return true
}
}
}
}
return false
}
rev(data, id)
return arr
},
3.获取指定节点所有父节点
tree: [
{
"id": "71be0269ef4a4afa8c76b5e1500904b7",
"appId": "503f49ba244d4f5ab8f235d123772091",
"tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
"gmtCreate": null,
"gmtModified": null,
"deleteStatus": 0,
"name": "TAN档案管理",
"editType": "0",
"classifyType": "项目",
"sort": null,
"fileType": null,
"projectId": "d0b033e2b4614a9882fb12bbe45960c5",
"contractId": null,
"ownerId": null,
"createBy": null,
"modifiedBy": null,
"parentId": "0",
"programId": null,
"templateid": null,
"children": [{
"id": "74b24fd213df44b1a7589e3f88694391",
"appId": "503f49ba244d4f5ab8f235d123772091",
"tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
"gmtCreate": null,
"gmtModified": null,
"deleteStatus": 0,
"name": "施工单位",
"editType": "0",
"classifyType": "施工单位",
"sort": 3,
"fileType": null,
"projectId": "d0b033e2b4614a9882fb12bbe45960c5",
"contractId": null,
"ownerId": null,
"createBy": null,
"modifiedBy": null,
"parentId": "71be0269ef4a4afa8c76b5e1500904b7",
"programId": null,
"templateid": null,
"children": [{
"id": "b0e3c550761049c09ba35b08a55c4d48",
"appId": "503f49ba244d4f5ab8f235d123772091",
"tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
"gmtCreate": null,
"gmtModified": null,
"deleteStatus": 0,
"name": "深圳01施工合同段",
"editType": "0",
"classifyType": "施工合同段",
"sort": 1,
"fileType": null,
"projectId": "d0b033e2b4614a9882fb12bbe45960c5",
"contractId": "bd0ebe78f54e401d88e62f8747a057a1",
"ownerId": null,
"createBy": null,
"modifiedBy": null,
"parentId": "74b24fd213df44b1a7589e3f88694391",
"programId": null,
"templateid": null,
"children": [{
"id": "154b6175ccad40f486f0264f404e2c9c",
"appId": "503f49ba244d4f5ab8f235d123772091",
"tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
"gmtCreate": null,
"gmtModified": null,
"deleteStatus": 0,
"name": "1",
"editType": "0",
"classifyType": "案卷分类",
"sort": 133,
"fileType": null,
"projectId": "d0b033e2b4614a9882fb12bbe45960c5",
"contractId": null,
"ownerId": "f8c4a36f9ce44083bf350e5fb16814ba",
"createBy": null,
"modifiedBy": null,
"parentId": "b0e3c550761049c09ba35b08a55c4d48",
"programId": null,
"templateid": null,
"children": null,
"operable": "1"
}, {
"id": "58805d3b7d7447199f620eed384f74d0",
"appId": "503f49ba244d4f5ab8f235d123772091",
"tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
"gmtCreate": null,
"gmtModified": null,
"deleteStatus": 0,
"name": "新增案卷分类112",
"editType": "0",
"classifyType": "案卷分类",
"sort": 134,
"fileType": null,
"projectId": "d0b033e2b4614a9882fb12bbe45960c5",
"contractId": null,
"ownerId": "f8c4a36f9ce44083bf350e5fb16814ba",
"createBy": null,
"modifiedBy": null,
"parentId": "b0e3c550761049c09ba35b08a55c4d48",
"programId": null,
"templateid": null,
"children": null,
"operable": "1"
}, {
"id": "59b41972221f4aa09d0f34c153db25da",
"appId": "503f49ba244d4f5ab8f235d123772091",
"tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
"gmtCreate": null,
"gmtModified": null,
"deleteStatus": 0,
"name": "子节点1",
"editType": "0",
"classifyType": "案卷分类",
"sort": 135,
"fileType": null,
"projectId": "d0b033e2b4614a9882fb12bbe45960c5",
"contractId": null,
"ownerId": "f8c4a36f9ce44083bf350e5fb16814ba",
"createBy": null,
"modifiedBy": null,
"parentId": "b0e3c550761049c09ba35b08a55c4d48",
"programId": null,
"templateid": null,
"children": null,
"operable": "1"
}, {
"id": "fb5b90951f13487ebf096c752546a56e",
"appId": "503f49ba244d4f5ab8f235d123772091",
"tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
"gmtCreate": null,
"gmtModified": null,
"deleteStatus": 0,
"name": "文件011",
"editType": "0",
"classifyType": "案卷分类",
"sort": 136,
"fileType": null,
"projectId": "d0b033e2b4614a9882fb12bbe45960c5",
"contractId": null,
"ownerId": "f8c4a36f9ce44083bf350e5fb16814ba",
"createBy": null,
"modifiedBy": null,
"parentId": "b0e3c550761049c09ba35b08a55c4d48",
"programId": null,
"templateid": null,
"children": null,
"operable": "1"
}, {
"id": "f0ba629b163d426fb6a5a5ab50d9ae6c",
"appId": "503f49ba244d4f5ab8f235d123772091",
"tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
"gmtCreate": null,
"gmtModified": null,
"deleteStatus": 0,
"name": "测试导出专用案卷节点",
"editType": "1",
"classifyType": "案卷分类",
"sort": 164,
"fileType": null,
"projectId": "d0b033e2b4614a9882fb12bbe45960c5",
"contractId": null,
"ownerId": null,
"createBy": null,
"modifiedBy": null,
"parentId": "b0e3c550761049c09ba35b08a55c4d48",
"programId": null,
"templateid": null,
"children": null,
"operable": "1"
}, {
"id": "d962ac1f4d164169a022292872f6951c",
"appId": "503f49ba244d4f5ab8f235d123772091",
"tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
"gmtCreate": null,
"gmtModified": null,
"deleteStatus": 0,
"name": "测试案卷移动",
"editType": "1",
"classifyType": "案卷分类",
"sort": 166,
"fileType": null,
"projectId": "d0b033e2b4614a9882fb12bbe45960c5",
"contractId": null,
"ownerId": null,
"createBy": null,
"modifiedBy": null,
"parentId": "b0e3c550761049c09ba35b08a55c4d48",
"programId": null,
"templateid": null,
"children": null,
"operable": "1"
}
],
"operable": "1"
}, {
"id": "ca953f2d8b604d1d97b14495363441e4",
"appId": "503f49ba244d4f5ab8f235d123772091",
"tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
"gmtCreate": null,
"gmtModified": null,
"deleteStatus": 0,
"name": "深圳02施工合同段",
"editType": "0",
"classifyType": "施工合同段",
"sort": 2,
"fileType": null,
"projectId": "d0b033e2b4614a9882fb12bbe45960c5",
"contractId": "fe465ae6e5444dd684196f127f07dd1d",
"ownerId": null,
"createBy": null,
"modifiedBy": null,
"parentId": "74b24fd213df44b1a7589e3f88694391",
"programId": null,
"templateid": null,
"children": null,
"operable": "1"
}
],
"operable": "1"
}
],
"operable": null
}
]
Farthloops(data)
/**
* @Description:获取指定节点下下的所有子节点
* @Author: ShiWei
* @Date: 2020-11-04
*/
const targetData = {};
Farthloops(data, parent) {
return data.map(({ children, title: value }) => {
const node = {
value,
parent
}
targetData[value] = node;
node.children = Farthloops(children, node);
return
})
}
//获取数据节点
getFarthNode(value) {
let node = [];
let currentNode = targetData[value];
node.push(currentNode.value);
if (currentNode.parent) {
node = [...getFarthNode(currentNode.parent.value), ...node];
}
return node
}
//获取父节点
console.log(const target = getNode('id'))
4.指定节点获取所有子节点
/**
* @Description:获取指定节点下下的所有子节点
* @Author: ShiWei
* @Date: 2020-11-04
*/
getChildNode(nodes, item, arr) {
for (let el of nodes) {
if (el.parentId === item) {
arr.push(el.id);
if (el.children) {
this.childsNodeDeepWay(el.children, arr);
}
} else if (el.children) {
this.getChildNode(el.children, item, arr);
}
}
return arr;
},
childsNodeDeepWay(nodes, arr) {
if (nodes)
nodes.forEach((ele) => {
arr.push(ele.id);
if (ele.children) {
this.childsNodeDeepWay(ele.children, arr);
}
});
},
//调用
console.log( this.getChildNode(this.tree,this.tree[0].id,[]))