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