React中使用Ant Design 以Menu导航菜单形式展示Tree树形结构

原创 守候你的季节 随笔 JavaScript 233阅读 2018-06-22 17:32:03 举报

引言

最近要做一个组织机构树的树级菜单展示,UI框架使用的是Ant Design,这不正好可以使用Tree组件,如图示

奈何领导说太丑,指明要换成类似Menu形式的树形菜单,如图示

于是乎,有两种修改方案

  • 先考虑改造Tree控件,这其中不仅需要修改css,还要修改Tree的内部结构
  • 不使用Tree控件直接使用Menu导航菜单,在其上添加所需要的功能

这里采用第二种方案,首先确认需要在其上添加的功能,主要包括:

  1. 节点异步加载功能(打开某个部门时,异步加载该部门下的子部门及其成员)
  2. 全局检索功能(在搜索框输入内容时,对菜单执行检索、高亮显示匹配的菜单并自动打开匹配菜单的所有父级菜单),见下图
  3. 右键对本节点菜单进行编辑、子节点的添加、删除(视具体业务逻辑而定)

全局代码(未经优化)

全局状态管理使用mobx,具体可以查看相关文档
Tree.js

common.js

treeStore.js

异步节点加载

  1. 节点结构的抽离具体体现在 loop方法,其中直接修改使用了一部分Tree控件的代码,其中有一个重要字段canDeploy,代表当前节点下是否有子节点,是一个分界值。
  2. 当有子节点的话肯定是可以打开的,点击的时候调用handleTitleClick方法,该方法的调用可以直接查看Ant Design官方API文档,接着为当前点击的节点添加激活状态,见common.js,当叶子节点选中时见handleSelect方法,这个时候要修改Menu组件的selectedKeys选项,其中只有叶子节点才有selectedKeys配置。
  3. 调用接口进行异步节点的加载见handleAsyncLoadData方法,该方法在请求过程中以更换Icon的方式来显示loading效果,如果当前节点下面已有子节点列表,说明该节点被打开过,无需再次加载,没有子节点的话,打开后会默认填充假节点数据,填充后即可展示。

全局检索

  1. 关注搜索框的handleChange方法,其中dataList是将整个树形菜单的数据进行拉平处理的产物,执行遍历找到所有匹配内容的节点的父节点,因为要自动打开匹配内容节点的所有父级节点,所以使用getAllParentKey方法来获取上一步获得的父节点的所有父节点,将这写需要打开的父节点装到parentList里面,将它赋值给Menu配置项openKeys即可实现匹配内容节点的父节点实现自动打开。

右键编辑、添加、删除

这里实现右击菜单使用了react-contextmenu,使用方法可自行github查找

  1. 该右击插件并没有提供右击回调函数,导致我们无从捕获当前被右击选择的节点是谁,这里采用绑定事件的方式来进行回调处理,见componentDidMount, componentWillUnmount
  2. 右击时是需要的获取到一些节点的信息的,比如节点ID,节点权限。此时需要注意到在loop方法中,已经为其分发了一些data-*的属性值,查看控制台DOM节点可以看到这些分发的属性都作用在列表的li标签上,接下来就要获取右击选中元素,查看该标签是否为li标签,不是则继续向父级查找,直到找到第一个为止,然后获取其上的data-*的数据。li标签查找方法见getDatasetNode方法,将最后获取的数据赋值给rightClickNode
  3. 添加、编辑、删除处理方法见handleMenuItemClick,该参数接收的data即为rightClickNode中的数据
  4. 添加具体方法见loopAdd方法,这里都是测试使用数据
  5. 编辑具体方法见loopEdit方法
  6. 删除具体方法见loopDelete方法
码不动了,对比着官方Menu组件和Tree组件,应该可以理解。(有其他的方案也可以在下面进行交流优化)
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复