ref-tree-transfer
## 何时使用
Last updated a year ago by npm_yx .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ref-tree-transfer 
SYNC missed versions from official npm registry.

树穿梭参照 RefTreeTransfer

何时使用

树穿梭参照

如何使用

$ ynpm install ref-tree-transfer --save

引入

import RefTreeTransferBaseUI from 'ref-tree-transfer';
或者
import { RefTreeTransferWithInput } from 'ref-tree-transfe

样式

import 'ref-tree-transfer/lib/index.css';

代码演示

分类

RefTreeTransferBaseUI(默认)

树穿梭参照通用ui

RefTreeTransferWithInput

带文本框的参照弹出窗

API

RefTreeTransferBaseUI接收的参数部分用于左树,部分用于右穿梭框。

参数 类型 默认值 说明 必选
title string 打开上传的模态框显示的标题文字
className string 参照class样式,作用于弹出层和 RefTreeTransferWithInput 输入框的样式,默认为空。
backdrop bool true 弹出层是否有模态层,true 显示,false 不显示
buttons object - {buttons:{cancelText:'取消',clearText:'清空已选',okText:'确认'}} 按钮文字展示
textOption object -- 左边树和右边处穿梭框的标题
如:
{
leftTitle:'树',
rightTitle:'穿梭框',
leftTransferText:'左侧穿梭框上标题',
rightTransferText:'右侧穿梭框上标题'}
theme String 'ref-red' 启用参照内部默认样式。theme='',不使用参照默认样式。
lang string zh_CN 多语配置。取值范围[en_US,zh_TW,fr_FR,de_DE,ja_JP,zh_CN]
displayField string 或 function '{refname}' 右穿梭框显示的内容的格式。
当为字符串时则会根据{}包裹的增则匹配替换。
如:'人员姓名:{refname},编号:{refcode}'
当为函数时则需自定义返回内容,参数为迭代已选择的记录。
如:
displayField: (record)=> ${record.refname}-${record.refname},是input展示value
valueField string 'refpk' 待提交的value的键。或者说指定真实数据的键。要求具有唯一性
showModal Bool -- 参照展开状态
onSave function( record:object ) -- 保存回调函数,返回已选择的记录详细数据。
onCancel function( ) -- 关闭弹出层
modalProps object {} modal上其他属性,具体接收的参数参照bee-modal
transferProps object {} modal上其他属性,具体接收的参数参照bee-transfer

tree专用

参数 类型 默认值 说明 必选
handleTreeSelect function(selectNode) -- 左树选择节点回调
treeData Array [] 左树的数据
nodeDisplay string 或 function '{refname}' 指定树节点渲染内容,这里为了提供根据数据渲染节点图标使用。
当为字符串时则会根据{}包裹的正则匹配替换。
如: nodeDisplay:'{refname}'
当为函数时则需自定义返回内容,参数为迭代已选择的记录。
如:
displayField: (record)=> ${record.refname}-${record.refname}。是树节点展示的内容
defaultExpandAll bool false 展开所有节点,true 展开,false 不展开

左树tree默认checkStrictly={true}、multiple={false}

transfer专用

参数 类型 默认值 说明 必选
searchPlaceholder String '搜索' 穿梭框中搜索框的默认显示文字,bee-transfer使用字段
notFoundContent String或者ReactNode '
无数据
'
穿梭框中当没有相关内容的显示内容,bee-transfer使用字段
refModelUrl object {tableBodyUrlSearch:''} 右穿梭框最上方的搜索框,不是穿梭内部的搜索
onChangerightSearch|function(value) -- 右穿梭框最上方的搜索框的回调函数
transferData Array [] 右穿梭的数据
targetKeys Array [] 右穿梭右表中选中的数据对应valuefield字段的值
setTargetKeys function(targetKeys) -- 右穿梭选中数据触发,将穿梭右侧选中的数据传过去

RefTreeTransferWithInput 增量 API

RefTreeTransferWithInput可以使用RefTreeTransferBaseUI的参数(除了showModal),还可以使用以下参数。

参数 类型 默认值 说明 必选
wrapClassName string 文本框的class样,默认为空。
placeholder string 文本框的 placeholder
style object {width:200} 文本框的style,默认宽度200px
filterUrl string 快捷录入接口。
filterUrlFunc function(value) ()=>{} 必须配合filterUrl使用,当filterUrl为空或者不传入,才会回调filterUrlFunc
filterData Array [] 必须配合filterUrlFunc使用,filterData是过滤列表全部数据
displayField string 或 function '{refname}' input中显示的内容的格式和过滤列表显示的内容格式。
当为字符串时则会根据{}包裹的增则匹配替换。
如:{refname}
当为函数时则需自定义返回内容,参数为迭代已的记录。
如:
displayField: (record)=> ${record.refname}-${record.refname},是input展示value
inputDisplay string 或 function '{refname}' input中显示的内容的格式。
当为字符串时则会根据{}包裹的增则匹配替换。
如:{refname}
当为函数时则需自定义返回内容,参数为迭代已的记录。
如:
displayField: (record)=> ${record.refname}-${record.refname},是input展示value
value string|array[object] 带有input框参照的input默认值,展示形式配合displayField。格式符合'{"refname":"初级-T1","refpk":"level1"}'。refname和refpk必须有,refpk表示该条数据的键,应取valueFiled指定值。或者数组格式(适合多选),[object1,object2...]
disabled bool false 禁用整个input框
onChange function(values, record) -- value改变、选中过滤数据和保存时数据回调。values是obj,格式{'refname':'','refpk':''},record是该条完整数据
canClickGoOn function() ()=>{return true} 当点击文本框右侧弹出按钮时是否打开modal
适用于级联情况下当选择不全时的处理
canInputGoOn function() ()=>{return true} 当点击文本框触发快捷录入时是否可以录入
适用于级联情况下当选择不全时的处理

注意事项

参数解析

  • 1.input框的展示值

    • 1.1 input框的初始值,只从value的refname中获取
    • 1.2 参照进行保存操作之后(点击参照确认按钮),input框展示由inputDisplay来决定
  • 2.value、inputDisplay、 displayField

    2.1 value和inputDisplay是针对input框来说。

    2.2 value格式可以是'{"refname":"初级-T1","refpk":"level1"}'或者数组[object1,object2...]。refname字段不可变,refpk是该数据键,要求具有唯一性;object中应包含数据项具体信息。

    2.3 inputDisplay确定input中显示内容的格式,displayField过滤列表显示内容的格式。inputDisplay和displayField中使用到的字段必须是filterData,matchData和treeData数据项中都含有的字段。

    inputDisplay和displayField具体使用参考demo3

    注意:value格式是'{"refname":"初级-T1","refpk":"level1"}',inputDisplay只包含refname或者refpk

  • 3.value、valueFiled

    value初始化input框值,是input需要使用的数据,要求如上。 valueFiled指定数据源的键,要求具有唯一性。 因此value中refpk指定值应与valueFiled取值一致。

    注意,在多选情况下,value是字符串'{"refname":"初级-T1","refpk":"level1"}'格式,那么valueFiled只能指定是refpk;value是数组,valueField可以是其他字段 具体使用参考demo3

  • 4.value、matchData

    value初始化input框值,matchData是指定参照中选中的节点。具体参照demo3,value与matchData并不完全相同

    • 4.1 如果value有值matchData为空,那么input有值但是参照无选中数据;
    • 4.2 反之value空值matchData有值,那么input为空但是参照有选中数据;
    • 4.3 如果value与matchData都有值,但是不匹配,树中选中数据按照matchData。

更新日志

Current Tags

  • 2.0.3-beta.1                                ...           beta (a year ago)
  • 2.0.7                                ...           latest (a year ago)

34 Versions

  • 2.0.7                                ...           a year ago
  • 2.0.6                                ...           a year ago
  • 2.0.5                                ...           a year ago
  • 2.0.4                                ...           a year ago
  • 2.0.3-beta.1                                ...           a year ago
  • 2.0.3-beta.0                                ...           a year ago
  • 2.0.3                                ...           a year ago
  • 2.0.2-beta.0                                ...           a year ago
  • 2.0.2                                ...           a year ago
  • 2.0.1                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 2.0.1-beta.0                                ...           2 years ago
  • 2.0.0-beta.0                                ...           2 years ago
  • 1.1.3-beta                                ...           2 years ago
  • 1.1.2-beta                                ...           2 years ago
  • 1.1.1-beta                                ...           2 years ago
  • 1.1.0-beta                                ...           2 years ago
  • 1.0.10-beta                                ...           2 years ago
  • 1.0.9-beta                                ...           2 years ago
  • 1.0.8-beta                                ...           2 years ago
  • 1.0.7-beta                                ...           2 years ago
  • 1.0.6-beta                                ...           2 years ago
  • 1.0.5-beta                                ...           2 years ago
  • 1.0.4-beta                                ...           2 years ago
  • 1.0.3-beta                                ...           2 years ago
  • 1.0.2-beta                                ...           2 years ago
  • 1.0.1-beta                                ...           2 years ago
  • 1.0.0-beta                                ...           2 years ago
  • 0.0.7                                ...           2 years ago
  • 0.0.6                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Downloads
Today 11
This Week 18
This Month 106
Last Day 7
Last Week 67
Last Month 478
Dependencies (6)
Dev Dependencies (75)
Dependents (2)

Copyright 2014 - 2017 © taobao.org |