antd+js 目录树实现

antd 目录树实现

话不说多 先看图
avatar
首先我们这里是要在项目内做一个编辑器功能。做编辑器目录树就必不可少。如何根据多维数组作出自己想要的目录结构,请看下面代码

const data = [
    {
        catalog:'目录一',
        isDirectory:true
          child:[
              {
                  childCatalog:'子目录一',
                  isDirectory:true
                  childChild:[...里面可能还有很多]
              },
              {
                  childCatalog:'子目录二',
                  isDirectory:trueÏ
              },
          ]  
    },
    
    {
        catalog:'目录二',
        isDirectory:false
    }
]
//大致数据结构如上
    function forList(data) {
        let showView = []
        for (let i in data) {
            if (data[i].isDirectory && data[i].childs) {
                //是目录 并且有子目录
                let obj =
                    <SubMenu key={'one' + data[i].name} title={data[i].name} 
                    draggable="true"
                    onContextMenu={() => {
                        onContextMenuClick(data[i])
                    }}>
                        {forList(data[i].childs)}
                    </SubMenu>
                showView.push(obj)

            } else if (!data[i].isDirectory) {
                //是文件

                let obj = <Menu.Item key={'file' + data[i].name} onClick={() => { onMenuClick(data[i]) }}>{data[i].name}</Menu.Item>
                showView.push(obj)
            } else {
                //是目录,但是没子目录

                let obj = <SubMenu key={'fileno' + data[i].name} title={data[i].name}>
                </SubMenu>
                showView.push(obj)
            }
        }
        return showView
    }

您的支持是对我最大的鼓励!

发表于: 作者:Yamss

阅读此作者的 更多文章

Github 新浪微博 SegmentFault 掘金专栏