uxcore-fis-cascade-multi-select

TL;DR

uxcore-fis-cascade-multi-select ui component for react

setup develop environment

$ git clone https://github.com/uxcore/uxcore-fis-cascade-multi-select
$ cd uxcore-fis-cascade-multi-select
$ npm install
$ gulp server

Usage

<FisCascadeMultiSelect height={280} cols={[{
        title: 'test',
        width: 200,
        url: 'https://cg.alibabacorp.com/ceres/comm/category/pub/firstLevel.jsonp'
    },{
        title: 'test1',
        width: 200,
        url: 'https://cg.alibabacorp.com/ceres/comm/category/pub/child.jsonp'
    },{
        title: 'test2',
        width: 200,
        url: 'https://cg.alibabacorp.com/ceres/comm/category/pub/child.jsonp'
    },{
        width: 200,
        title: '已选择'
    }]} />

demo

http://uxcore.github.io/

API

Props

| 配置项 | 类型 | 必填 | 默认值 | 功能/备注 | |---|---|---|---|---| |cols|array|required|(注1)|每一列的配置| |beforeSearch|function|optional|(注2)|用于请求数据前构造请求url| |onConfirm|function|optional|noop|点击确认按钮的回调(注3)| |onCancel|function|optional|noop|点击确定按钮的回调| |className|string|optional|-|| |placeholder|string|optional|请选择|| |height|number|optional|200|列表浮层的高| |confirmText|string|optional|确定|确认按钮的文本| |cancelText|string|optional|取消|取消按钮的文本|

注1：

[{width: 200, title: '已选择'}]

注2：

function (url, level,  key) {
    return url + '?key=' + key
}

注3： 传给onConfirm的是一个数组，包含当前选中节点的key。如果所有子节点都选中，那么只会返回父节点的key。如果只是部分子节点选中，那么只返回选中的子节点的key不返回他们的父节点的key。

cols的每一项

| 配置项 | 类型 | 必填 | 默认值 | 功能/备注 | |---|---|---|---|---| |width|number|optional|200|当前列的宽| |url|string|required|-|当前列的数据请求url(注：最后一列不需要)| |title|string|required|-|当前列的标题|

请求数据返回格式

{
  "content": [
    {
      "value": "行政综合服务",
      "key": "AD"
    },
    {
      "value": "阿里自研产品",
      "key": "AL"
    }
  ],
  "hasError": false
}