uxcore-fis-cascade-multi-select

0.0.2 • Public • Published

uxcore-fis-cascade-multi-select Dependency Status devDependency Status

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
}

Package Sidebar

Install

npm i uxcore-fis-cascade-multi-select

Weekly Downloads

2

Version

0.0.2

License

MIT

Last publish

Collaborators

  • minjie.lmj