From 88eb7a1c650c7ff77351a971c3a0b02170facbd2 Mon Sep 17 00:00:00 2001 From: AYELance <2463168510@qq.com> Date: Thu, 22 Apr 2021 13:03:02 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0menu-tree=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=20=E9=87=8D=E6=96=B0=E5=B0=81=E8=A3=85treeNode.js=20=E6=8F=90?= =?UTF-8?q?=E9=AB=98=E6=98=93=E7=94=A8=E6=80=A7=20=E6=9B=B4=E6=96=B0packag?= =?UTF-8?q?e=E4=B8=ADeslint=E8=AF=AD=E6=B3=95=E6=A3=80=E6=9F=A5=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=20=E5=87=8F=E5=B0=91=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 +- src/components/menu-tree/treeNode.js | 205 +++++++++++++++++++-------- src/demo/tree.vue | 120 ++++------------ 3 files changed, 173 insertions(+), 155 deletions(-) diff --git a/package.json b/package.json index 9df39d3..e4b9248 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ "env": { "browser": true, "node": true - } + }, + "parser": "babel-eslint" }, "scripts": { "dev": "node build/dev-server.js", diff --git a/src/components/menu-tree/treeNode.js b/src/components/menu-tree/treeNode.js index 9ecdf93..e9ad42a 100644 --- a/src/components/menu-tree/treeNode.js +++ b/src/components/menu-tree/treeNode.js @@ -1,5 +1,88 @@ +export function initData(treeArray, idsArray) { + // console.log("initData treeArray="+treeArray); + let initTreeData = warpNode(treeArray, true, true); + // console.log("initData initTreeData="+initTreeData); + + let treeNodeArray = []; + let high = 0; + //数据类型转换 多层转一层 + getTreeNodeArray(initTreeData, treeNodeArray, high); + // console.log(treeNodeArray, high); + treeNodeArray.sort((a, b) => { + return b.level - a.level + }); + high = treeNodeArray[0].level; + // console.log(treeNodeArray, high); + //设置一层的CheckBox + treeNodeArray = updateTreeNodeCheckBox(high, treeNodeArray, idsArray); + // console.log(treeNodeArray); + //一层映射多层 + updateTreeCheckBox(initTreeData, treeNodeArray); + // console.log(initTreeData); + return initTreeData; +} + +//拖拽后重建数据更新checkbox +export function rebuildData(treeRootArray, idsArray) { + // console.log("treeRootArray=="+JSON.stringify(treeRootArray)); + let treeNodeArray = []; + let high = 0; + //数据类型转换 多层转一层 + getTreeNodeArray(treeRootArray, treeNodeArray, high); + // console.log(treeNodeArray, high); + treeNodeArray.sort((a, b) => { + return b.level - a.level + }); + high = treeNodeArray[0].level; + // console.log(treeNodeArray, high); + //根据叶子节点状态重新获取整个树的节点状态 应用于拖拽后 + // console.log("rebuildData idsArray==" + idsArray); + idsArray = getIdsWithLeafCheckBox(treeNodeArray); + // console.log("rebuildData idsArray==" + idsArray); + // console.log("idsArray=="+this.idsArray); + //设置一层的CheckBox + treeNodeArray = updateTreeNodeCheckBox(high, treeNodeArray, idsArray); + // console.log(treeNodeArray); + //一层映射多层 + updateTreeCheckBox(treeRootArray, treeNodeArray); + // console.log(JSON.stringify(treeRootArray)); + return {treeRootArray: treeRootArray, idsArray: idsArray}; +} + +export function updateData(treeRootArray, idsArray, node) { + // console.log("updateData node==" + JSON.stringify(node)); + // console.log("updateData treeRootArray=="+JSON.stringify(treeRootArray)); + let childArray = []; + getNodeWithParentId(node.id, treeRootArray, childArray); + // console.log("updateData child::" + JSON.stringify(childArray)); + let childIdsArray = []; + getChildIds(childArray, childIdsArray); + // console.log("updateData childIdsArray::" + JSON.stringify(childIdsArray)); + // console.log("updateData idsArray==" + idsArray); + idsArray = updateIdsArray(node.id, childIdsArray, idsArray); + // console.log("updateData idsArray==" + idsArray); + let treeNodeArray = []; + let high = 0; + //数据类型转换 多层转一层 + getTreeNodeArray(treeRootArray, treeNodeArray, high); + // console.log(treeNodeArray, high); + treeNodeArray.sort((a, b) => { + return b.level - a.level + }); + high = treeNodeArray[0].level; + // console.log(treeNodeArray, high); + //设置一层的CheckBox + treeNodeArray = updateTreeNodeCheckBox(high, treeNodeArray, idsArray); + + // console.log(treeNodeArray); + //一层映射多层 + updateTreeCheckBox(treeRootArray, treeNodeArray); + return {treeRootArray: treeRootArray, idsArray: idsArray}; +} + + // 数据初始化处理 是否展开显示open 是否显示CheckBox 是否显示Btn -export function initData(arr, showCheckBox, addNodeBtn) { +function warpNode(arr, showCheckBox, addNodeBtn) { if (arr && arr.length) { for (let i = 0, len = arr.length; i < len; i++) { if (arr[i] instanceof Object) { @@ -18,30 +101,30 @@ export function initData(arr, showCheckBox, addNodeBtn) { if (!arr[i].addNodeBtn) { arr[i]["addNodeBtn"] = addNodeBtn; } - initData(arr[i].menuChild, showCheckBox, addNodeBtn); + warpNode(arr[i].menuChild, showCheckBox, addNodeBtn); } } } return arr; } - -export function updateTreeCheckBox(treeArray, treeNodeArray) { +//单个变量表示checkbox状态 转 双变量表示 用于用图片模拟的checkbox视图更新 +function updateTreeCheckBox(treeArray, treeNodeArray) { for (let n = 0; n < treeArray.length; n++) { - if ("unCheck" == getCheckBoxStatus(treeArray[n].id, treeNodeArray)) { + if ("unCheck" === getCheckBoxStatus(treeArray[n].id, treeNodeArray)) { treeArray[n] = Object.assign({}, treeArray[n], { "isCheck": false, "indeterminate": false, }); } - if ("indeterminate" == getCheckBoxStatus(treeArray[n].id, treeNodeArray)) { + if ("indeterminate" === getCheckBoxStatus(treeArray[n].id, treeNodeArray)) { treeArray[n] = Object.assign({}, treeArray[n], { "isCheck": false, "indeterminate": true, }); } - if ("isCheck" == getCheckBoxStatus(treeArray[n].id, treeNodeArray)) { + if ("isCheck" === getCheckBoxStatus(treeArray[n].id, treeNodeArray)) { treeArray[n] = Object.assign({}, treeArray[n], { "isCheck": true, "indeterminate": false, @@ -53,9 +136,9 @@ export function updateTreeCheckBox(treeArray, treeNodeArray) { } } -export function getCheckBoxStatus(id, treeNodeArray) { +function getCheckBoxStatus(id, treeNodeArray) { for (let n = 0; n < treeNodeArray.length; n++) { - if (treeNodeArray[n].id == id) { + if (treeNodeArray[n].id === id) { return treeNodeArray[n].checkbox; } } @@ -63,10 +146,9 @@ export function getCheckBoxStatus(id, treeNodeArray) { //将数据结构多层Tree转为单层obj数组 -export function getTreeNodeArray(array, treeNodeArray, high) { +function getTreeNodeArray(array, treeNodeArray, high) { if (array && array.length) { for (let i = 0; i < array.length; i++) { - let treeNode = { id: array[i].id, pid: array[i].pid, @@ -84,15 +166,15 @@ export function getTreeNodeArray(array, treeNodeArray, high) { } function getCheckBoxStatusWithOBJ(obj) { - if (obj.isCheck == false && obj.indeterminate == false) { + if (obj.isCheck === false && obj.indeterminate === false) { return "unCheck"; } - if (obj.isCheck == false && obj.indeterminate == true) { + if (obj.isCheck === false && obj.indeterminate === true) { // return "indeterminate"; // 拖动后 设置中间节点初始状态为未选中 return "unCheck";//中间节点CheckBoxStatus会在updateTreeCheckBox时由子到父重新赋值 } - if (obj.isCheck == true && obj.indeterminate == false) { + if (obj.isCheck === true && obj.indeterminate === false) { return "isCheck"; } return "unCheck"; @@ -100,7 +182,7 @@ function getCheckBoxStatusWithOBJ(obj) { //根据level反向遍历Tree 设置checkbox -export function updateTreeNodeCheckBox(high, treeNodeArray, idsArray) { +function updateTreeNodeCheckBox(high, treeNodeArray, idsArray) { let array = copyArray(treeNodeArray); for (let i = high; i >= 0; i--) { let highTreeNodeArray = getTreeNodeWithHigh(i, treeNodeArray); @@ -108,7 +190,7 @@ export function updateTreeNodeCheckBox(high, treeNodeArray, idsArray) { //从最深一层循环 比较id if (existId(highTreeNodeArray[n].id, idsArray)) { let childTreeNodeArray = getChildTreeNode(highTreeNodeArray[n].id, array); - if (childTreeNodeArray && childTreeNodeArray.length == 0) {//没有子节点 有记录 + if (childTreeNodeArray && childTreeNodeArray.length === 0) {//没有子节点 有记录 array[getIndex(treeNodeArray, highTreeNodeArray[n])] = Object.assign({}, highTreeNodeArray[n], {"checkbox": "isCheck"}); } else {//有子节点 有记录 let status = getParentCheckBoxStatus(childTreeNodeArray); @@ -116,7 +198,7 @@ export function updateTreeNodeCheckBox(high, treeNodeArray, idsArray) { } } else { let childTreeNodeArray = getChildTreeNode(highTreeNodeArray[n].id, array); - if (childTreeNodeArray && childTreeNodeArray.length == 0) {//没有子节点 无记录 + if (childTreeNodeArray && childTreeNodeArray.length === 0) {//没有子节点 无记录 array[getIndex(treeNodeArray, highTreeNodeArray[n])] = Object.assign({}, highTreeNodeArray[n], {"checkbox": "unCheck"}); } else {//有子节点 无记录 let status = getParentCheckBoxStatus(childTreeNodeArray); @@ -131,9 +213,9 @@ export function updateTreeNodeCheckBox(high, treeNodeArray, idsArray) { //判断id是否在数组中 -export function existId(id, idsArray) { +function existId(id, idsArray) { for (let n = 0; n < idsArray.length; n++) { - if (id == idsArray[n]) { + if (id === idsArray[n]) { return true } } @@ -141,7 +223,7 @@ export function existId(id, idsArray) { } //拷贝数组 -export function copyArray(treeNodeArray) { +function copyArray(treeNodeArray) { let array = []; for (let n = 0; n < treeNodeArray.length; n++) { array.push(treeNodeArray[n]); @@ -150,19 +232,19 @@ export function copyArray(treeNodeArray) { } //返回obj在数组中的位置 -export function getIndex(treeNodeArray, obj) { +function getIndex(treeNodeArray, obj) { for (let n = 0; n < treeNodeArray.length; n++) { - if (treeNodeArray[n].id == obj.id) { + if (treeNodeArray[n].id === obj.id) { return n; } } } //根据level 获取子节点数组 -export function getTreeNodeWithHigh(high, treeNodeArray) { +function getTreeNodeWithHigh(high, treeNodeArray) { let array = []; for (let n = 0; n < treeNodeArray.length; n++) { - if (treeNodeArray[n].level == high) { + if (treeNodeArray[n].level === high) { array.push(treeNodeArray[n]); } } @@ -170,10 +252,10 @@ export function getTreeNodeWithHigh(high, treeNodeArray) { } //根据Pid返回子节点的数组 -export function getChildTreeNode(pid, treeNodeArray) { +function getChildTreeNode(pid, treeNodeArray) { let array = []; for (let n = 0; n < treeNodeArray.length; n++) { - if (treeNodeArray[n].pid == pid) { + if (treeNodeArray[n].pid === pid) { array.push(treeNodeArray[n]); } } @@ -181,39 +263,39 @@ export function getChildTreeNode(pid, treeNodeArray) { } //根据子节点数组返回父节点CheckBox状态 -export function getParentCheckBoxStatus(treeNodeArray) { +function getParentCheckBoxStatus(treeNodeArray) { let countIsCheck = 0; let countUnCheck = 0; let countIndeterminate = 0; for (let n = 0; n < treeNodeArray.length; n++) { - if (treeNodeArray[n].checkbox == "unCheck") { + if (treeNodeArray[n].checkbox === "unCheck") { countUnCheck++; } - if (treeNodeArray[n].checkbox == "isCheck") { + if (treeNodeArray[n].checkbox === "isCheck") { countIsCheck++ } - if (treeNodeArray[n].checkbox == "indeterminate") { + if (treeNodeArray[n].checkbox === "indeterminate") { countIndeterminate++; } } - if (countIndeterminate != 0) { + if (countIndeterminate !== 0) { return "indeterminate"; } - if (countUnCheck == 0) { + if (countUnCheck === 0) { return "isCheck"; } - if (countIsCheck == 0) { + if (countIsCheck === 0) { return "unCheck"; } return "indeterminate"; } //id数组中有id删除 没有id新增 -export function updateIdsArray(id, childIdsArray, idsArray) { +function updateIdsArray(id, childIdsArray, idsArray) { let array = []; let flagExist = false; for (let n = 0; n < idsArray.length; n++) { - if (idsArray[n] == id) { + if (idsArray[n] === id) { flagExist = true; } else { array.push(idsArray[n]); @@ -231,7 +313,7 @@ export function updateIdsArray(id, childIdsArray, idsArray) { } //从idsArray中删除childIdsArray -export function deleteIdsFromArray(idsArray, childIdsArray) { +function deleteIdsFromArray(idsArray, childIdsArray) { let array = []; for (let n = 0; n < idsArray.length; n++) { if (!existId(idsArray[n], childIdsArray)) { @@ -243,55 +325,56 @@ export function deleteIdsFromArray(idsArray, childIdsArray) { //递归 找到Tree中id=id的节点 返回menuChild数组 -export function getParentWithId(id, treeArray, array) { +function getNodeWithParentId(id, treeArray, childArray) { for (let n = 0; n < treeArray.length; n++) { - if (treeArray[n].id == id) { - array = Object.assign(array, treeArray[n].menuChild); + if (treeArray[n].id === id) { + childArray = Object.assign(childArray, treeArray[n].menuChild); break; } - if (treeArray[n].menuChild && treeArray[n].menuChild != 0) { - getParentWithId(id, treeArray[n].menuChild, array); + if (treeArray[n].menuChild && treeArray[n].menuChild !== 0) { + getNodeWithParentId(id, treeArray[n].menuChild, childArray); } } } //递归 menuChild数组 找出所有子节点id 放入idsArray -export function getChildIds(child, idsArray) { - if (child && child.length != 0) { +function getChildIds(child, idsArray) { + if (child && child.length !== 0) { for (let n = 0; n < child.length; n++) { idsArray.push(child[n].id); - if (child[n].menuChild != 0) { + if (child[n].menuChild !== 0) { getChildIds(child[n].menuChild, idsArray) } } } } + //从一层数据结构中获取保存的节点id -export function getIdsWithCheckBox(treeNodeArray) { - // 处理选中数据 - let array = []; - for (let i = 0, len = treeNodeArray.length; i < len; i++) { - if (treeNodeArray[i].checkbox == "isCheck" || treeNodeArray[i].checkbox == "indeterminate") { - array.push(treeNodeArray[i].id) - } - } - return array; -} +// function getIdsWithCheckBox(treeNodeArray) { +// // 处理选中数据 +// let array = []; +// for (let i = 0, len = treeNodeArray.length; i < len; i++) { +// if (treeNodeArray[i].checkbox === "isCheck" || treeNodeArray[i].checkbox === "indeterminate") { +// array.push(treeNodeArray[i].id) +// } +// } +// return array; +// } //根据叶子节点CheckBox isCheck状态 从子到父获取Ids -export function getIdsWithLeafCheckBox(treeNodeArray) { +function getIdsWithLeafCheckBox(treeNodeArray) { let array = []; for (let i = 0, len = treeNodeArray.length; i < len; i++) { let id = treeNodeArray[i].id; //是否有子节点 let flag = false;//没有子节点 for (let j = 0, len = treeNodeArray.length; j < len; j++) { - if (id == treeNodeArray[j].pid) { + if (id === treeNodeArray[j].pid) { flag = true;//有子节点 } } if (!flag) {//没有子节点 - if (treeNodeArray[i].checkbox == "isCheck") { + if (treeNodeArray[i].checkbox === "isCheck") { array.push(treeNodeArray[i].id); } } @@ -301,16 +384,16 @@ export function getIdsWithLeafCheckBox(treeNodeArray) { return Array.from(new Set(array)); } -export function getParentIdWithLeaf(arrayAllIds, treeNodeArray, arrayChildrenIds) { +function getParentIdWithLeaf(arrayAllIds, treeNodeArray, arrayChildrenIds) { let array = []; for (let i = 0, len = arrayChildrenIds.length; i < len; i++) { let id = arrayChildrenIds[i];//取出一个节点id 找父节点 for (let j = 0, len = treeNodeArray.length; j < len; j++) { - if (id == treeNodeArray[j].id) {//找到节点 + if (id === treeNodeArray[j].id) {//找到节点 let pid = treeNodeArray[j].pid - if (pid != 0) {//不是根节点 + if (pid !== 0) {//不是根节点 for (let k = 0, len = treeNodeArray.length; k < len; k++) { - if (pid == treeNodeArray[k].id) {//找到父节点 + if (pid === treeNodeArray[k].id) {//找到父节点 arrayAllIds.push(treeNodeArray[k].id); array.push(treeNodeArray[k].id); } diff --git a/src/demo/tree.vue b/src/demo/tree.vue index 950b1bd..31f1f72 100644 --- a/src/demo/tree.vue +++ b/src/demo/tree.vue @@ -1,7 +1,7 @@