tf-drag-tree

脚手架

能拖动的树或列组件

1. API文档

| 字段名称 | 字段含义 | 默认值 | | -------- | -------- | ---- | | loading | 是否正在加载 | true | | data | 数据 | [] | | selectedKey | 选中项的key | '' | | treeProps | Tree组件的属性, 请参考antd文档 | {} | | treeNodeProps | TreeNode组件的属性, 请参考antd文档 | {} | | wrapperClassName | 外层的class | '' | | fields | 后端字段名称 | { key: 'key', label: 'label', children: 'children', icon: 'icon' } | | onDrag | 拖动后的回调, 与fields中的icon字段一起决定是否显示拖动图标 | null | | onDelete | 删除的回调, 与fields中的icon字段一起决定是否显示删除图标 | null | | onEdit | 编辑的回调 , 与fields中的icon字段一起决定是否显示编辑图标 | null | | onAdd | 添加的回调, 与fields中的icon字段一起决定是否显示添加图标 | null | | onSelect | 选中的回调 | () => {} |

fields.icon说明

这个字段标识要渲染的树数据中的字段名称, 默认值为'icon'.

举个例子: fields我设置为: { key: 'tagId', label: 'tagName', children: 'children', icon: 'iconShow' },

假设需要渲染的数据:

{"code":0, "data":[
  {"tagName":"丁娜","tagId":"620000198009115173", "iconShow": "all"}, // 该项显示所有(添加/删除/拖动/编辑)图标
  {"tagName":"吴秀兰","tagId":"450000199002034576", "iconShow": ["delete", "add"]}, // 该项显示删除和添加图标
  {"tagName":"陈明","tagId":"610000198204304947", "iconShow": "none"}, // 该项所有的图标都不显示
  {"tagName":"廖秀兰","tagId":"640000197312062907", "iconShow": "drag"}, // 该项只显示拖动图标
  {"tagName":"曾芳","tagId":"130000201412311236", "iconShow": (item) => {}}, // 还支持方法, 你要返回类似前面的数据
  {"tagName":"崔秀英","tagId":"540000198307098738"},
  {"tagName":"沈娜","tagId":"540000197905138766"},
  {"tagName":"文敏","tagId":"110000201501251198"}
]}

说明: 添加: 'add'; 删除: 'delete', 拖动: 'drag'; 编辑: 'edit'; 所有都显示: 'all'; 所有都不显示: 'none'

ps: 并不是说, 比如你配置了'add', 那么添加图标就会显示, 有一个前提是配置了onAdd回调方法

2. 使用示例

import React, { useState } from "react";
import { Button } from 'antd'

import TfDragTree from 'tf-drag-tree'

// 模拟的数据
let data1 = {"code":0,"data":[{"orgName":"王明","orgTreeId":"0-0","children":[{"orgName":"韩杰","orgTreeId":"0-0-0","children":[{"orgName":"杜强","orgTreeId":"0-0-0-0"},{"orgName":"常刚","orgTreeId":"0-0-0-1"},{"orgName":"金洋","orgTreeId":"0-0-0-2"}]},{"orgName":"丁芳","orgTreeId":"0-0-1","children":[{"orgName":"潘秀兰","orgTreeId":"0-0-1-0"},{"orgName":"夏伟","orgTreeId":"0-0-1-1"},{"orgName":"戴明","orgTreeId":"0-0-1-2"}]},{"orgName":"龙磊","orgTreeId":"0-0-2"}]},{"orgName":"廖刚","orgTreeId":"0-1","children":[{"orgName":"廖秀英","orgTreeId":"0-1-0","children":[{"orgName":"侯军","orgTreeId":"0-1-0-0"},{"orgName":"戴桂英","orgTreeId":"0-1-0-1"},{"orgName":"傅强","orgTreeId":"0-1-0-2"}]},{"orgName":"胡明","orgTreeId":"0-1-1","children":[{"orgName":"康秀英","orgTreeId":"0-1-1-0"},{"orgName":"曾杰","orgTreeId":"0-1-1-1"},{"orgName":"锺芳","orgTreeId":"0-1-1-2"}]},{"orgName":"康军","orgTreeId":"0-1-2"}]},{"orgName":"彭刚","orgTreeId":"0-2"}]}

export default function App() {
  let [data, updateData] = useState([])
  let [loading, updateLoading] = useState(false)

  function handleAdd() {
    updateLoading(true);

    setTimeout(() => {
      updateLoading(false);
      updateData(data1.data)
    }, 1000)
  }

  let dragProps = {
    data,
    loading,
    fields: { key: 'orgTreeId', label: 'orgName' },

    onAdd(item) {
      console.log('onAdd', item)
    },
    onDrag(dragObj, data) {
      console.log('onDrag', dragObj, data)
    },
    onSelect(item) {
      console.log('onSelect', item)
    },
    onDelete(item) {
      console.log('onDelete', item)
    },
    onEdit(item) {
      console.log('onEdit', item)
    }
  }
  
  return (
    <div style={{margin: '100px', padding: '20px'}}>
      <div style={{width: '300px',height: '400px',border: '1px solid red'}}>
        <TfDragTree {...dragProps}/>
      </div>
      <Button onClick={handleAdd}>加载数据</Button>
    </div>
  )
}

3. 命令

npm start // 运行测试
npm run build // 构建生产
npm run pub // 发布

4. 版本更新说明

  0.1.9, 0.1.10:
    添加图标配置支持, 更新readme

  0.1.8:
    antd不同版本适配问题
    
  0.1.3, 0.1.4, 0.1.5, 0.1.6, 0.1.7:
    发到外网

  0.1.0:
    初始版本