javascript - Le composant Tree d'antd, prend-il en charge les restrictions de glisser-déposer ?
ringa_lee
ringa_lee 2017-05-19 10:32:01
0
1
945

Lorsque je fais glisser le composant Tree, je souhaite empêcher le nœud parent d'être déplacé au niveau du nœud enfant, ce qui signifie que seul le nœud enfant peut être déplacé vers le haut. Cela peut-il être pris en charge par antd ?

ringa_lee
ringa_lee

ringa_lee

répondre à tous(1)
洪涛

Le rendu final dépend uniquement de l'apparence des données. La modification des données est sous votre propre contrôle. Qu'elle soit autorisée ou non, il s'agit simplement de savoir si les données changent.

Par exemple, le code suivant, 子节点 只能放到 第三个 下面,不能放到 第一个 ci-dessous (car c'est ma logique).

import * as React from 'react';
import {BaseComponent} from '../base';
import Tree from 'antd/lib/tree';
const TreeNode = Tree.TreeNode;
import 'antd/lib/tree/style/index.css';


export interface HeaderProps { }
export interface HeaderState { data: any }

export class Header extends BaseComponent<HeaderProps, HeaderState> {
    state = {
        data: [
            {name: '第一个', key: 'a'},
            {name: '第二个', key: 'b',
                children: [
                    {name: '子节点', key: 'd'}
                ]},
            {name: '第三个', key: 'c'}
        ]
    };

    constructor(props:HeaderProps) {
        super(props);
    }

    onDragEnter(opt){
        console.log(opt, 'x');
    }

    onDrop(opt){
        const fromNode = opt.dragNode.props.eventKey;
        const toNode = opt.node.props.eventKey;
        if(toNode !== 'c'){ return }
        this.state.data[2]['children'] = this.state.data[1]['children'];
        this.state.data[1]['children'] = [];
        this.setState({});
    }

    loop(data){
        return data.map( d => {
            if(d.children && d.children.length){
                return <TreeNode key={d.key} title={d.name}>{this.loop(d.children)}</TreeNode>
            } else {
                return <TreeNode key={d.key} title={d.name}></TreeNode>
            }
        })
    }

    render() {
        return (<p>
            <Tree className="draggable-tree"
                draggable
                onDragEnter={this.onDragEnter.bind(this)}
                onDrop={this.onDrop.bind(this)}>
                {this.loop(this.state.data)}
            </Tree>
        </p>)
    }
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal