igroot-search-tree v0.0.1

SearchTree 搜索树组件

何时使用

文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

当子节点内容较多需要搜索并高亮展示时，使用搜索树可快速找到目标节点。

安装

sl add -c igroot-search-tree

在代码中使用

import React from "react";
import SearchTree from "igroot-search-tree";

const App = () => {
  return (
    <SearchTree
      placeholder="输入节点名称"
      checkable={true}
      dataSource={mock()}
      onCheck={(keys, key, checked) => console.log(keys, key, checked)}
    />
  );
};

function mock() {
  return [
    {
      key: "global",
      title: "global",
      children: []
    },
    {
      key: "dx",
      title: "电信",
      children: [
        {
          key: "dx-huadong",
          title: "电信-华东"
        },
        {
          key: "dx-xian",
          title: "电信-西安"
        },
        {
          key: "dx-huanan",
          title: "电信-华南"
        },
        {
          key: "dx-huazhong",
          title: "电信-华中"
        },
        {
          key: "dx-xibei",
          title: "电信-西北"
        },
        {
          key: "dx-dongbei",
          title: "电信-东北"
        }
      ]
    },
    {
      key: "lt",
      title: "联通",
      children: [
        {
          key: "lt-xibu",
          title: "联通-西部"
        },
        {
          key: "lt-dongbei",
          title: "联通-东北"
        },
        {
          key: "lt-huanan",
          title: "联通-华南"
        },
        {
          key: "lt-huadong",
          title: "联通-华东"
        },
        {
          key: "lt-huazhong",
          title: "联通-华中"
        },
        {
          key: "lt-huabei",
          title: "联通-华北"
        },
      ]
    },
    {
      key: "yd",
      title: "移动",
      children: [
        {
          key: "yd-xibu",
          title: "移动-西部"
        },
        {
          key: "yd-dongbei",
          title: "移动-东北"
        },
        {
          key: "yd-huanan",
          title: "移动-华南"
        },
        {
          key: "yd-huadong",
          title: "移动-华东"
        },
        {
          key: "yd-huazhong",
          title: "移动-华中"
        },
        {
          key: "yd-huabei",
          title: "移动-华北"
        },
      ]
    }
  ];
}

ReactDOM.render(<App />, mountNode);

API

数据源dataSource格式

// 每个节点key值必须唯一
[
  {
    key:"1",
    title:"1",
    children:[
      {
        key:"1-1",
        title:"1-1"
      }
    ]
  }
]

注意

1. react版本尽量在16.8.0之后，否则可能出现未知的问题。

2. onCheck事件与Tree组件返回的结果不同，返回的参数为：

   参数	说明
   keys	已选择的全部树节点
   key	选择的树节点key
   checked	选中或取消选中