关于javascript:前端构建树菜单的封装类

9次阅读

共计 1552 个字符,预计需要花费 4 分钟才能阅读完成。

后盾传过来的是一个列表数据,列表的数据排序可能是乱的,根父集 ID 为 0,但也有可能轻易删了其中一个,导致本条数据父集 id 基本追溯不到 0,临时就这样写,或者有更好的办法!

export const create = function (config) {

    /**
     * 革除掉追溯不到父集 ID 是 0 的数据
     * @param list 
     */
    this.clearNopid = function (list) {const ids = [];
        const arr = [];
        for (let i = 0; i < list.length; i++) {let item = list[i];
            let flag = this.hasParents(list, item, ids);
            if (flag) {ids.push(item.id);
                let obj={};
                for(let key in config.props){obj[key]=item[config.props[key]];
                }
                arr.push(obj);
            } else {list.splice(i, 1);
                i--;
            }
        }
        return this.createTree(arr, []);
    }

    /** 
     * 判断根菜单是否是 0
    */
    this.hasParents = function (list, node, ids) {
        let flag = false;
        if (node.pid === 0 || ids.indexOf(node.id) !== -1) {flag = true;} else {for (let i = 0; i < list.length; i++) {let item = list[i];
                if (item.id === node.pid) {flag = this.hasParents(list, item, ids);
                }
            }
        }
        return flag;
    }

    /**
     * 结构树菜单
     * @param list 
     */
    this.createTree = function (list, data) {for (let i = 0; i < list.length; i++) {let item = list[i];
            // 判断是否根目录
            if (item.pid == 0) {data.push(item);
                list.splice(i, 1);
                i--;
            } else {let flag = this.findChild(data, item);
                if (flag) {list.splice(i, 1);
                    i--;
                }
            }
        }
        if (list.length > 0) {data = this.createTree(list, data);
        }
        return data;
    }

    /**
     * 查找父集 ID
     * @param list 
     * @param node 
     */
    this.findChild = function (list, node) {
        let flag = false;
        for (let i = 0; i < list.length; i++) {let item = list[i];
            if (item.id === node.pid) {item.children = item.children || [];
                item.children.push(node);
                flag = true;
                break;
            } else {if (item.children) {flag = this.findChild(item.children, node);
                    if (flag) {break;}
                }
            }
        }
        return flag;
    }

    // 调用
    const data = this.clearNopid(config.list);
    return data;
};

// 调用形式
const config = {list: [],
        props: {
          id: 'id', // 必须
          pid: 'pid', // 必须
          name: 'menuName', // 可选项,名字能够改
          menuState: 'menuState' // 可选项,名字能够改
        }
      }
      this.menuNodes = createdTree.create(config);
正文完
 0