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({ }, { call, put, 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 }, { call, put, select }){
	      yield put({
	        type: 'store',
	        payload: {
	          expandedKeys:payload.expandedKeys,
	          autoExpandParent:payload.autoExpandParent
	        }
	      });
	    },
    }

回显时后端需要返回的数据格式如下：

checkedKeys:[0:"500000,500100,2010093000863693"
1:"500000,500100,2010093000863790"]

说明： 这个例子只是贴出了一部分重要代码，具体使用时需要补充完整。

在这个例子中，使用到了groupby方法，对于这个方法大家应该不陌生， 不熟的童鞋可以看这里
JS中的groupBy方法
sortBy()和groupBy()函数
大牛教你如何学习JS