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

后盾传过来的是一个列表数据,列表的数据排序可能是乱的,根父集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);

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理