react可拖動的好用的樹結構插件

react tree 可拖動樹結構：

github地址：

github地址：react-sortable-tree

安裝：

NPM

npm install react-sortable-tree –save

YARN

yarn add react-sortable-tree

引用

import SortableTree from ‘react-sortable-tree’;
import ‘react-sortable-tree/style.css’;

使用

此處我是做成可公共組件props可傳data數據調用的公用組件.

export default class SortableTrees extends React.PureComponent {
  // 定義propTypes傳輸類型：
  static propTypes = {
    isDrop: PropTypes.bool, // 是否可以拖動
    treeData: PropTypes.array, // 樹結構數據
    onChangeVal: PropTypes.func, // 值改變觸發事件
    haveChildren: PropTypes.bool, // 是否有子級
  };
  
  // 設置默認值
  static defaultProps = {
    isDrop: true,
    haveChildren: true,
    treeData: [{
      title: 'Workflow test',
      expanded: true,
      children: [{
        title: 'taskflow test',
      }, {
        title: 'taskflow test1',
        expanded: true,
        children: [{
          title: 'taskflow2-1',
        }, {
          title: 'taskflow2-2',
        }],
      }],
    }],
    onChangeVal: () => {},
  };
  
  //調用組件時，值發生改變接收新的數據
  onChangeValue = (treeData) => {
    this.props.onChangeVal(JSON.stringify(treeData));
  }
  
  //是否可以拖動（默認可以不添加, 根據需求而定）
  stopParentNode = (node) => {
    if (!node.nextParent) {
      return false;
    }
    return true;
  }
  
  //是否有子級（默認可以不添加, 根據需求而定）
  toHaveChildren = (node) => {
    if (node.type === 'streaming') {
      return false;
    }
    return true;
  }
  
  // render
  render() {
    const {
      isDrop,
      treeData,
      haveChildren,
    } = this.props;
    return (
      <SortableTree
        treeData={treeData}
        onChange={(e) => { this.onChangeValue(e); }}
        canDrop={isDrop ? this.stopParentNode : () => { return false; }}
        canNodeHaveChildren={haveChildren ? this.toHaveChildren : () => { return false; }}
      />
    );
  }
}

　　

外部調用此組件

<SortableTrees
  treeData={treeData} // treeData是你自己的數據
  onChangeVal={(treeDatas) => { this.setTreeData(treeDatas); }}
/>

　　

Props 參數

treeData (object): 樹結構數據

onChange (func): 數據發生改變時觸發（例如：拖動）

getNodeKey (func): 數據更改時，得到node節點

generateNodeProps (func): 添加自定義結構

onMoveNode (func): 移動node觸發

onVisibilityToggle (func): 子節點收起或展開時觸發

onDragStateChanged (func): 拖動開始或結束時調用

maxDepth (number): 可以插入最大深度節點。 默認為無限

rowDirection (string): 行方向

canDrag (func or bool): 是否禁止拖動

canDrop: (func): 返回false以防止節點掉入給定位置

canNodeHaveChildren: (func): 是否有自己功能

theme (object): 主題風格

searchMethod (func): 搜索功能

className (string): class

rowHeight (number or func): 行高

---- 感謝觀看 :thank you: ----