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);