react可拖动的好用的树结构插件
Posted a-cat
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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): 行高
以上是关于react可拖动的好用的树结构插件的主要内容,如果未能解决你的问题,请参考以下文章
React-draggable npm 包可防止在输入字段内单击
使用 jquery panzoom 和 jquery 可拖动