react+antd 遞迴實現樹狀目錄操作
1.寫在前面
作為前端小白的我一直對演算法和資料結構淺嘗輒止,噥,吃虧了。使用多次遞迴實現資料格式化後將資料進行樹狀展示的目的,分享一下我這次撓頭的經歷~
2.資料
後臺傳過來的資料大概是這樣的
{ "data":[ { "id":1,"name":"一級節點","parentId":0,"isValid":true,"canAddChild":true,"parent":null,"children":[] },{ "id":3,"name":"二級節點","parentId":1,"children":[] } ],"status":1 }
3.資料格式
data裡面每個元素的parentId指向是父級元素的id,parentId為0的是結構樹的頂級元素,但現在是個平面的陣列不好處理,而我們要做的是樹狀的結構,所以首先要對資料進行格式化,將一個元素的所有子元素放到該元素的children屬性中去。那麼,遞迴就來了。
createTree = data => { let treeArr = []; //獲取頂級父元素集合 let roots = data.filter(elemt => elemt.parentId === 0); treeArr.push(...roots); //從頂級元素開始,獲取每個元素的子元素放到該元素的children屬性中 const getChildren = (resultarr,data) => { resultarr.forEach((elemt,index) => { elemt.children = data.filter((item,index) => item.parentId === elemt.id); //判斷當前元素是不是有子元素被新增,如果有,再在子元素這一層迴圈 if(elemt.children.length > 0){ getChildren(elemt.children,data); } }); } getChildren(treeArr,data); //最後更新一下資料 this.setState({ treeArr })
4.元件格式
因為UI元件用的是antd,使用Tree和TreeNode做樹結構。因為資料已經是樹狀的了,而且深度我們不確定,想要按層級輸出UI控制元件,那麼,遞迴又來了。
renderTree = jsonTree => jsonTree.map( value => { //遍歷樹狀陣列,如果發現他有children則先套上<TreeNode>,再對他children中的元素做相同的操縱,直到children為空的元素停止,說明他們已經是最深的那一層了。 if(value.children){ return( <TreeNode title={ <span> {value.name} <Icon type="plus" onClick={this.showModal.bind(this,2,value.id)} /> <Icon type="edit" onClick={this.showModal.bind(this,1,value.id)} /> <Icon type="delete" onClick={this.showModal.bind(this,value.id)} /> </span> } key={value.id}> //對children中的每個元素進行遞迴 {this.renderTree(value.children)} </TreeNode> ) } })
至此,就基本完成對資料的格式和對UI樹的格式啦,最後在樹控制元件中呼叫它,OK~
5.瘋狂輸出
render(){ return( <Tree showLine={true}> {this.renderTree(this.state.treeArr)} </Tree> ) }
執行,Bingo~
tips
因為目錄樹的每一項都是可編輯的,而原始的UI元件也沒有可用配置,後來查閱文件竟然應該在TreeNode的title樹形中新增樹的自定義元素,可以,很強勢,官方文件,看就完了,哈哈。
補充知識:antd的tree樹形元件非同步載入資料小案例
前不久,做業務需求時遇到一個樹形選擇的 問題 , 子節點的資料要通過點選展開才去載入,在antd給出的官方文件中也有關於動態載入資料的demo,然而不夠詳細,自己研究之後,整理出來共享給大家借鑑下。
view.jsx(純函式式宣告)
// 渲染樹的方法 const loop = data => data.map((item) => { const index = item.regionName.indexOf(modelObj.searchValue); const beforeStr = item.regionName.substr(0,index); const afterStr = item.regionName.substr(index + modelObj.searchValue.length); const title = index > -1 ? ( <span> {beforeStr} <span style={{ color: '#f50' }}>{modelObj.searchValue}</span> {afterStr} </span> ) : <span>{item.regionName}</span>; if (item.children && item.children.length > 0) { return ( <TreeNode key={item.regionCode} parentId={item.parentId} title={getTreeTitle(title,item)}> {loop(item.children)} </TreeNode> ); } return <TreeNode key={item.regionCode} parentId={item.parentId} title={getTreeTitle(title,item)} isGetDealer={item.isGetDealer} isLeaf={item.isLeaf}/>; });
//樹結構展開觸發的方法
const onExpand = (expandedKeys) => { console.log('onExpand-->',expandedKeys); dispatch({ type: `${namespace}/onExpand`,payload: { expandedKeys,autoExpandParent: false,} }); }
//非同步載入樹形結構子節點的方法
const onLoadData = (treeNode) => { return new Promise((resolve) => { resolve(); if(treeNode.props.isGetDealer===1){ let cityIds =treeNode.props.eventKey; dispatch({ type: `${namespace}/queryDealers`,payload: { checkedKeys:cityIds,} }); } }) }
//節點被選中時觸發的方法
const onCheck = (checkedKeys,e) => { console.log('checkedKeys',checkedKeys); if(checkedKeys.length > 0) { updateModel(checkedKeys,'checkedKeys'); } else { updateModel([],'sellers'); updateModel([],'checkedKeys'); } }
//dom渲染
return ( {/* 經銷商省市選擇 */} { modelObj.designatSeller === 1 && <div style={{marginBottom:20}}> <div className = {styles.treeStyle} style={{ backgroundColor: '#FBFBFB',width: 343,paddingLeft: 8,height: 200,overflow: 'auto' }}> <Tree checkable onExpand={onExpand} expandedKeys={modelObj.expandedKeys} checkedKeys={modelObj.checkedKeys} //checkStrictly={true} autoExpandParent={modelObj.autoExpandParent} onCheck={onCheck} loadData={onLoadData} > {loop(modelObj.countryList)} </Tree> </div> </div> } )
mod.js
//初始預設狀態 const defaultState = { countryList:[],//省市樹 expandedKeys: [],//樹資料 autoExpandParent: true,checkedKeys:[],//當前選中的節點 }
// 方法列表
effects: { //根據城市獲取經銷商 *queryDealers({payload},{ call,put,select }) { let {countryList} = yield select(e => e[tmpModule.namespace]); let {data,resultCode } = yield call(queryDealers,{cityCodes:payload.checkedKeys}); if(resultCode === 0 && data.length > 0) { let sellers = data.map(x=>x.dealerId); yield put({ type: 'store',payload: { sellers } }); let gdata = groupBy(data,'cityCode'); setgData(countryList); yield put({ type: 'store',payload: {countryList } }); function setgData(arr) { if(arr&&arr.length>0){ arr.forEach(x=>{ if(x.regionCode.split(',')[1] in gdata) { x.children = gdata[x.regionCode.split(',')[1]].map(x=>{ return { children:[],regionName:x.dealerName,regionCode:x.provinceCode+','+x.cityCode+','+x.dealerId,regionId:x.dealerId,isLeaf:true }; }) } else { setgData(x.children); } }) } } } },
//獲取省市樹
*queryCountry({ },select }) { let { countryList,biz} = yield select(e => e[tmpModule.namespace]); let resp = yield call(queryCountry); // console.log('resp_country-->',resp) if(resp.resultCode === 0){ let dataList = cloneDeep(countryList); dataList = [{ children: resp.data,regionName:'全國',regionId:'100000',regionCode:'100000'}]; dataList.map((one,first)=> { one.children.map((two,second)=> { two.children.map((three,third)=> { three.children.map((four,fouth)=>{ four.regionCode = three.regionCode+','+four.regionCode; //是否為最後的子節點去獲取經銷商 four.isGetDealer=1; four.children = []; }) }) }) }) yield put({ type: 'store',payload: {countryList: dataList } }); } },//展開節點觸發 *onExpand({ payload },select }){ yield put({ type: 'store',payload: { expandedKeys:payload.expandedKeys,autoExpandParent:payload.autoExpandParent } }); },}
回顯時後端需要返回的資料格式如下:
checkedKeys:[0:"500000,500100,2010093000863693"
1:"500000,2010093000863790"]
說明: 這個例子只是貼出了一部分重要程式碼,具體使用時需要補充完整。
以上這篇react+antd 遞迴實現樹狀目錄操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。