vj-tree

rc-tree和react-custom-scrollbars的简单二次封装

安装

$ npm i vj-tree -S

API

scrollWrap props（外层的滚动包裹）

| name | description | type | default | since | |------------|-------------|----------|-------------|-------| |scrollClass | react-custom-scrollbars的class | String | '' | 0.0.5 | |scrollStyle | react-custom-scrollbars的style | String | '' | 0.0.5 | |autoHeight | react-custom-scrollbars是否为高度自适应 | bool | false | 0.0.5 | |autoHeightMin | 当autoHeight为true时生效 | number | 0 | 0.0.5 | |autoHeightMax | 同上 | number | 120 | 0.0.5 |

Tree props（树相关）

| name | description | type | default | since | |------------|-------------|----------|-------------|-------| |treeClass | rc-tree的class | String | '' | 0.0.5 | |treeData | 树的数据源 | array | [] | 0.0.5 | |showIcon | 是否显示前面的图标 | bool | false | 0.0.5 | |multiple | 是否可以被多选(select) | bool | false | 0.0.5 | |selectable | 是否可以被select(click) | bool | true | 0.0.5 | |checkable | 是否可以被勾选 | bool | false | 0.0.5 | |defaultExpandedKeys | 默认展开的树节点的id集合 | number[] | [] | 0.0.5 | |defaultExpandAll | 是否默认展开所有树节点 | bool | false | 0.0.5 | |defaultCheckedKeys | 默认勾选的树节点的id集合 | number[] | [] | 0.0.5 | |checkedKeys | 勾选的树节点的id集合(当使用该属性时defaultCheckedKeys会失效) | number[] | [] | 0.0.7 | |selectedKeys | 选中的树节点的id集合(click) | number[] | [] | 0.0.5 | |checkStrictly | 子节点不影响父节点的勾选 | bool | false | 0.0.5 | |onCheck | 勾选或取消勾选树节点的方法 | func(ids, e:{info, checked, node}) | - | 0.0.5 | |onSelect | 选中(click)或取消选中树节点的方法 | func(ids, e:{info, selected, node}) | - | 0.0.5 | |loadData | 异步加载树节点的方法 | func(node) | - | 0.0.5 | |onMouseEnter | 鼠标进入树节点 | func({event,node}) | - | 0.0.5 | |onMouseLeave | 鼠标离开树节点 | func({event,node}) | - | 0.0.5 |

TreeNode props（树节点相关）

| name | description | type | default | since | |----------|----------------|----------|--------------|-------| |className | 节点的class | String | '' | 0.0.5 | |disabled | 节点不能被点击 | bool | false | 0.0.5 | |disableCheckbox | 节点不能被勾选 | bool | false | 0.0.5 | |title | 树节点的展示内容 | String/element | '---' | 0.0.5 | |key | 用于确定唯一的key | String | - | 0.0.5 | |isLeaf | 是否为叶子节点 | bool | false | 0.0.5 |

示例

一个简单的 异步 加载树节点的例子

// actions.js
import ajax from 'vj-ajax';
export const RECEIVE_TREENODE_SUCCESS = 'RECEIVE_TREENODE_SUCCESS';
export const RECEIVE_TREENODE_FAIL = 'RECEIVE_TREENODE_FAIL';

const fetchTreeNode = (pid = 0, loadedIds) => dispatch => {
  if (loadedIds.indexOf(pid) > -1) { // pid 为请求的节点id
    return new Promise(resolve => {
      resolve();
    });
  };
  return ajax({
    url: 'xxx',
    data: {
      pid,
    },
  }).then(data => {
    dispatch({
      type: RECEIVE_TREENODE_SUCCESS,
      text: '树节点请求成功',
      data: {
        list: data.list || [], // node的数组
        pid: pid,
      }
    });
  }).catch(error => {
    dispatch(fail(RECEIVE_TREENODE_FAIL, '树节点请求失败', error));
  });
};

export default { fetchTreeNode }


// reducers.js
import { RECEIVE_TREENODE_SUCCESS, RECEIVE_TREENODE_FAIL } from './actions.js';

const treeInitData = {
  fetching: true,
  loadedIds: [],
  treeData: [],
};

// 查找node节点
const findNode = (data, id) => {
  let parent = null
  const loop = data => {
    for (var i = 0, l = data.length ; i < l; i++) {
      if (data[i].id == id) {
        parent = data[i];
        break;
      };
      if (data[i].children) {
        loop(data[i].children);
      };
    };
  };
  loop(data);
  return parent;
};

const filterNodes = (state, nextData) => {
  let { treeData, loadedIds } = state;
  let { list, pid } = nextData;
  let parentNode = findNode(treeData, pid);
  const filter = data => {
    for (var i = 0, l = data.length; i < l; i++) {
      data[i].isLeaf = data[i].is_leaf || false;
      data[i].parentId = data[i].parent_id || 0; // 按需
      data[i].key = parentNode ? `${parentNode.key}-${data[i].id}` : `${data[i].id}`;
      data[i].fullName = parentNode ? `${parentNode.fullName}->-${data[i].name}` : `${data[i].name}`; // 按需
      data[i].sortId = data[i].sort_id || 0; // 按需
      // 在这里处理TreeNode props
    };
  };
  filter(list);
  if (parentNode) {
    parentNode.children = list;
  } else {
    treeData = list;
  };
  loadedIds.push(pid);
  return {
    treeData,
    loadedIds,
  };
};

const tree = (state = treeInitData, action) => {
  switch (action.type) {
    case RECEIVE_TREENODE_SUCCESS:
      return {
        ...filterNodes(state, action.data),
        success: true,
        fetching: false,
      };
    case RECEIVE_TREENODE_FAIL:
      return {
        ...state,
        error: action.error,
        success: false,
        fetching: false,
      };
    default:
      return state;
  };
};

export default { tree };


// VjTree.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Tree from 'vj-tree';

import actions from './actions.js';

class VjTree extends Component {
  constructor(props) {
    super(props);
  };
  handleLoadData = node => {
    const { loadedIds, fetchTreeNode } = this.props;
    fetchTreeNode(node.props.id, loadedIds);
  };
  render() {
    const { tree: { treeData } } = this.props;
    return (
      <Tree
        treeData={treeData}
        loadData={this.handleLoadData}
      />
    );
  };
};

const mapStateToProps = state => {
  const { tree } = state;
  return { tree };
};

export default connect(mapStateToProps, actions)(VjTree);