uxcore-fis-cascade-multi-select

---

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
}