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 | 必填 | 数据源 | array | - | | placeholder | 非必填| 搜索框提示的文本 | string | "Search" | | parentCheckedAble| 非必填 | 父节点是否可选择 | bool | false | | parentNodeHide | 非必填 | 过滤节点时父节点是否隐藏 | bool | false | | childNodeHide | 非必填 | 过滤节点时子节点是否隐藏 | bool | true |

数据源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 | 选中或取消选中 |