2. 程式人生 > >React中使用Ant Design 以Menu導航選單形式展示Tree樹形結構

React中使用Ant Design 以Menu導航選單形式展示Tree樹形結構

阿新 • • 發佈：2019-01-11
<SubMenu key={item.nodeId} data-id={item.nodeId} data-privilege={item.privilege} onTitleClick={this.handleTitleClick(item)} title={title} > {this.loop(item.children)} </SubMenu
> ); } return ( <Menu.Item key={item.nodeId} data-id={item.nodeId} data-privilege={item.privilege}> {title} </Menu.Item> ); }); handleChange = (e) => { const value = e.target.value; let {treeData} = this.props.rootStore.treeStore; /* 獲取包含搜尋內容的所有節點key */ let openKeys = dataList.map((item) => { if (item.name.indexOf(value) > -1) { return getParentKey(item.nodeId, treeData); } return null; }).filter((item, i, self) => item && self.indexOf(item) === i); /* 重置需要展開的父節點id */ parentList = []; /* 將所選中的內容的節點id的全部父節點id寫入parentList中 */ getAllParentKey(openKeys); openKeys = parentList; this.setState({ openKeys, searchValue: value, }); }; handleClick = e => { /* 每個menuItem繫結點選事件 */ console.log("click ", e); }; handleOpenChange = (openKeys) => { /* 可獲取當前所有已經打開面板的key列表 */ // console.log(openKeys); this.setState({ openKeys }); }; handleAsyncLoadData = (treeNode) => { let nodeTypeTemp = treeNode.nodeType; treeNode.nodeType = 'LOADING'; return new Promise((resolve) => { if (treeNode.children.length > 0) { treeNode.nodeType = nodeTypeTemp; resolve(); return; } setTimeout(() => { treeNode.nodeType = nodeTypeTemp; treeNode.children = [ { name: 'Child' + count, nodeId: (count++ + ''), parentNodeId: treeNode.nodeId, nodeType: 'GROUP', children: [], canDeploy: true, privilege: 7 }, { name: 'Child' + count, nodeId: (count++ + ''), parentNodeId: treeNode.nodeId, nodeType: 'GROUP', children: [], canDeploy: false, privilege: 7 }, ]; resolve(); }, 2000); }); }; handleTitleClick = (treeNode) => ({key, domEvent}) => { // console.log(key); addSubmenuSelected(domEvent); this.setState({ selectedKeys: [] }); this.handleAsyncLoadData(treeNode); }; handleSelect = ({ item, key, selectedKeys }) => { /* 只有menuItem才能選中，選中會執行該函式 */ console.log(item, key, selectedKeys); removeSubmenuSelected(); this.setState({ selectedKeys }); }; loopAdd = (node, data) => { data.forEach((item) => { if (node.parentNodeId === item.nodeId) { console.log(item); item.canDeploy = true; item.children.push(node); /* this.setState({ openKeys: this.state.openKeys.concat(item.nodeId) }); */ return 1; } else { if (item.children.length > 0) { return this.loopAdd(node, item.children); } } }); }; loopEdit = (node, data) => { data.forEach((item) => { if (node.nodeId === item.nodeId) { Object.keys(node).forEach(key => { if (key !== 'children') { item[key] = node[key]; } }); return 1; } else { if (item.children.length > 0) { return this.loopEdit(node, item.children); } } }); }; loopDelete = (parentId, nodeId, data) => { console.log(parentId, nodeId); data.forEach((item) => { if (parentId === item.nodeId) { let index = 0; item.children.forEach((child, key) => { if (child.nodeId === nodeId) { index = key; } }); // this.props.rootStore.accountStore.updateSelectedNode(item); item.children.splice(index, 1); return 1; } else { if (item.children.length > 0) { return this.loopDelete(parentId, nodeId, item.children); } } }); }; /* 右鍵點選處理 */ handleMenuItemClick = (e, data) => { e.preventDefault(); let {treeData} = this.props.rootStore.treeStore; console.log(data); switch (data.status) { case 0: /* 新增節點 */ this.loopAdd({ name: 'Child' + count, nodeId: (count++ + ''), parentNodeId: data.nodeId, nodeType: 'GROUP', children: [], privilege: '1', canDeploy: true }, treeData); break; case 1: this.loopEdit({ name: 'edit' + count, nodeId: data.nodeId, parentNodeId: data.nodeId, nodeType: 'GROUP', children: [], privilege: '1', canDeploy: true }, treeData); break; case 2: this.loopDelete('2', data.nodeId, treeData); break; default: return; } // 右鍵處理完畢後，重置右擊節點資料 this.setState({ rightClickNode: null }); }; handleRightClick = (event) => { // console.log(event.target); let dataNode = getDatasetNode(event.target); this.setState({ rightClickNode: dataNode.dataset }); // console.log(dataNode.dataset); }; render() { let { treeData } = this.props.rootStore.treeStore; let {selectedKeys, searchValue, openKeys, rightClickNode} = this.state; /* 節點扁平化處理 */ dataList = []; generateList(treeData); return ( <div
className="tree"> <Input style={{marginBottom: '50px'}} placeholder="search value" value={searchValue} onChange={this.handleChange} /> <ContextMenuTrigger id="context-menu" holdToDisplay={1000}> <Menu onClick={this.handleClick}
style={{ width: "100%" }} onOpenChange={this.handleOpenChange} mode="inline" theme="dark" openKeys={openKeys} selectedKeys={selectedKeys} onSelect={this.handleSelect} > {this.loop(treeData)} </Menu> </ContextMenuTrigger> <ContextMenu id="context-menu"> <MenuItem onClick={this.handleMenuItemClick} disabled={rightClickNode? (['0', '1'].includes(rightClickNode.privilege)) : false} data={{nodeId: rightClickNode? rightClickNode.id : '', status: 0}} > 新增 </MenuItem> <MenuItem onClick={this.handleMenuItemClick} disabled={rightClickNode? (['0', '1'].includes(rightClickNode.privilege)) : false} data={{nodeId: rightClickNode? rightClickNode.id : '', status: 1}} > 編輯 </MenuItem> <MenuItem divider /> <MenuItem onClick={this.handleMenuItemClick} disabled={rightClickNode? (['0', '1'].includes(rightClickNode.privilege)) : false} data={{nodeId: rightClickNode? rightClickNode.id : '', status: 2}} > 刪除 </MenuItem> </ContextMenu> </div> ); } } export default Tree;

相關推薦

React中使用Ant Design 以Menu導航選單形式展示Tree樹形結構

<SubMenu key={item.nodeId} data-id={item.nodeId} data-privilege={item.privilege}

基於React.js + ANT DESIGN 中使用非同步請求之----fetch封裝

1，閱讀宣告：關於fecth封裝基於React.js以及螞蟻金服推出的ANT DESIGN前端UI框架，語法使用ES6； 2，在專案中安裝whatwg-fetch,命令列命令-----cnpm ins

react初探索--react + react-router + ant-design 後臺管理系統配置

後臺 top key detail trees radi 嘗試 ouya img 首先確認安裝了node環境，Node >= 6。 如果對react 及 ant-design 一無所知，建議去閱讀下api文檔，react 可以在 codePen 在線練習。 react

使用Iview Menu 導航選單(非 template/render 模式)

1、首先直接參照官網Demo例子，將程式碼拷貝進專案中執行， 直接報錯： Cannot read property 'mode' of undefined. 然後檢視官網介紹，有一行注意文字，好吧。 2、然後將Menu標籤改為i-menu. 這下沒有報錯了，但是樣式顯示的根本不是想要的：

React 專案 ant design 的 CheckboxGroup 驗證

使用 ant design 提供的 getFieldDecorator 進行驗證 一般開始使用預設選中 <FormItem> {getFieldDecorator('checkProtocol', { valuePropN

ant design pro 新增一級選單和子選單

1.新建個檔案，我這個是複製其它自帶的檔案（list資料夾的TableList.js） 2.然後找到這個檔案 去配router 3.也是copy其它的，就是改一下名字和路徑檔案就好了

ant design pro 配置動態選單、許可權

import React, { Suspense } from 'react'; import { Layout } from 'antd'; import DocumentTitle from 'react-document-title'; import isEqual from 'lodash/isEq

極客react之Ant Design Pro系列快速入門（七）-- 使用新的佈局

定義一個新的佈局 loayout資料夾定義佈局的js檔案和less樣式檔案 /common/router.js中定義使用新佈局的路徑 '/data': { component: dynamicWrapper(app, [], () => import('..

極客react之Ant Design Pro系列快速入門（八）-- 使用echarts

使用echarts 安裝echarts和react的echarts模組 npm install --save echarts 匯入echarts // 引入 ECharts 主模組 import echarts from 'echarts/lib/echa

react使用ant-design組件庫

sig save install all port 引入 des rom type 新建項目並引入組件 1，全局安裝腳手架 npm install -g create-react-app 2，新建項目 create-react-app reactantd 3，安裝組件 np

react（ant-design-pro）路由-router踩坑

最近學習react，使用的是阿里推出的ant-design-pro框架，踩了一些關於react（ant-design）路由的坑，在此做一下總結。 router 我們先大致瞭解一下react和ant-design-pro中的路由。 首先我們來講一下React中原生的路由（

將分組的其他內容以字符串形式展示

sel roc str from tro span 單元格 sta list 分組後，test_item_name不屬於group by中的內容，想要以逗號隔開的方式展示在一個單元格內時，可以用一下方法實現。 SELECT a.test_item_id, a.test_i

使用react+ant design左側導航預設選中和展開

1.<Menu theme='dark' mode='inline' selectedKeys={[selectedKey]} onClick={this.menuClick} onOpenChange={this.onOpenChange} openKeys={[openKey]}<

React 專案中修改 Ant Design 的預設樣式(Input Checkbox 等等

修改樣式更符合專案的需求特別是在 Input 和 Checkbox 等等一系列 試過很的方式都有問題， 比如直接在行內新增樣式會無法傳遞到特定的層級 最好的辦法是新增 id 可行 渲染部分程式碼 <Card title = "修改預設樣式">

在Ant Design Pro（React）中使用ECharts

在之前的系列文章中，我們講解了如何快速使用Ant Design Pro解決方案來快速搭建前端框架。 而ECharts是前端最流行，功能最強大的前端圖表庫。 下面，我們將會在本文中講解如何在Ant Design Pro使用ECharts。 安裝 首先，如何在Ant Design Pro

create-react-app中按需引入Ant-Design

先來回顧一下create-react-app腳手架建立專案的方法//安裝create-react-app腳手架 npm i create-react-app -g //建立專案 create-react-app antd-demo //啟動專案 npm start 安裝Ant-Designnpm i antd

如何利用Facebook的create-react-app腳手架創建一個基於ant design mobile的項目

https dev one 解決方案 edas mdm and tro 輸入 引言： 　　create-react-app是Facebook發布的一款全局的命令行工具用來創建一個新的項目。 　　通常我們開始做一個react web或者 app 項目的時候，都會自己

2017.11.6 - ant design table等組件的使用，以及 chrome 中 network 的使用

rom sources work div gin from 表格 組件化 管理 一、今日主要任務 悉尼小程序後臺管理開發： 景點管理頁面： 獲取已有數據列表，選取部分數據呈現在表格中，根據景點名稱、分類過濾出對應的景點。 二、難點 1. 項目技術選取： 　　ant de

ant design環境搭建過程中遇到的問題--Windows-dva-cli

itl 分享圖片 nbsp 系統變量 bsp 命令行 改變 設置代理 圖片 基礎的此處略去，nodejs和npm是前提。 1.官網介紹的是腳手架工具是antd-init，但是又建議真實項目中用dva-cli，所以博主就直接裝的是dva-cli，這裏主要是簡單介紹下博主在Wi

Ant design 項目打包後報錯："Menu(or Flex) is not defined"

方式 查找 item back TP mob -m flex alt 我的項目使用了ant-design 和 ant-design-mobile，在測試環境上沒問題，但是打包發布之後控制臺報錯 Menu is not definedFlex is not defined