用于嵌套数据和层次结构的拖放式可排序组件_JavaScript_CSS_下载.zip

<div align="center"> <img src="https://cloud.githubusercontent.com/assets/4413963/18860410/26f64de8-84b8-11e6-9284-350308eed30a.png"/> </div> # React Sortable Tree   [](https://npmcharts.com/compare/react-sortable-tree?minimal=true) [](https://npmcharts.com/compare/react-sortable-tree?minimal=true) [](https://travis-ci.org/frontend-collective/react-sortable-tree) [](https://coveralls.io/github/frontend-collective/react-sortable-tree?branch=master) [](http://makeapullrequest.com) > A React component for Drag-and-drop sortable representation of hierarchical data. Checkout the [Storybook](https://frontend-collective.github.io/react-sortable-tree/) for a demonstration of some basic and advanced features. <div align="center"> <img src="https://cloud.githubusercontent.com/assets/4413963/19334888/2be8261c-913a-11e6-9508-4b347ae114b4.gif"/> </div> ## Table of Contents - [Getting Started](#getting-started) - [Usage](#usage) - [Props](#props) - [Data Helpers](#data-helper-functions) - [Themes](#themes) - [Browser Compatibility](#browser-compatibility) - [Troubleshooting](#troubleshooting) - [Contributing](#contributing) ## Getting started Install `react-sortable-tree` using npm. ```sh # NPM npm install react-sortable-tree --save # YARN yarn add react-sortable-tree ``` ES6 and CommonJS builds are available with each distribution. For example: ```js // This only needs to be done once; probably during your application's bootstrapping process. import 'react-sortable-tree/style.css'; // You can import the default tree with dnd context import SortableTree from 'react-sortable-tree'; // Or you can import the tree without the dnd context as a named export. eg import { SortableTreeWithoutDndContext as SortableTree } from 'react-sortable-tree'; // Importing from cjs (default) import SortableTree from 'react-sortable-tree/dist/index.cjs.js'; import SortableTree from 'react-sortable-tree'; // Importing from esm import SortableTree from 'react-sortable-tree/dist/index.esm.js'; ``` ## Usage ```jsx import React, { Component } from 'react'; import SortableTree from 'react-sortable-tree'; import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app export default class Tree extends Component { constructor(props) { super(props); this.state = { treeData: [ { title: 'Chicken', children: [{ title: 'Egg' }] }, { title: 'Fish', children: [{ title: 'fingerline' }] }, ], }; } render() { return ( <div style={{ height: 400 }}> <SortableTree treeData={this.state.treeData} onChange={treeData => this.setState({ treeData })} /> </div> ); } } ``` ## Props | Prop | Type | <div style="width: 400px;">Description</div> | | :----------------------------- | :------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | treeData<br/>_(required)_ | object[] | Tree data with the following keys: <div>`title` is the primary label for the node.</div><div>`subtitle` is a secondary label for the node.</div><div>`expanded` shows children of the node if true, or hides them if false. Defaults to false.</div><div>`children` is an array of child nodes belonging to the node.</div><div>**Example**: `[{title: 'main', subtitle: 'sub'}, { title: 'value2', expanded: true, children: [{ title: 'value3') }] }]` | | onChange<br/>_(required)_ | func | Called whenever tree data changed. Just like with React input elements, you have to update your own component's data to see the changes reflected.<div>`( treeData: object[] ): void`</div> | | getNodeKey<br/>_(recommended)_ | func | Specify the unique key used to identify each node and generate the `path` array passed in callbacks. With a setting of `getNodeKey={({ node }) => node.id}`, for example, in callbacks this will let you easily determine that the node with an `id` of `35` is (or has just become) a child of the node with an `id` of `12`, which is a child of ... and so on. It uses [`defaultGetNodeKey`](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/default-handlers.js) by default, which returns the index in the tree (omitting hidden nodes).<div>`({ node: object, treeIndex: number }): string or number`</div> | | generateNodeProps | func | Generate an object with additional props to be passed to the node renderer. Use this for adding buttons via the `buttons` key, or additional `style` / `className` settings.<div>`({ node: object, path: number[] or string[], treeIndex: number, lowerSiblingCounts: number[], isSearchMatch: bool, isSearchFocus: bool }): object`</div> | | onMoveNode | func | Called after node move operation. <div>`({ treeData: object[], node: object, nextParentNode: object, prevPath: number[] or string[], prevTreeIndex: number, nextPath: number[] or string[], nextTreeIndex: number }): void`</div>