穿梭框 Transfer
1.说明
双栏穿梭选择框。
何时使用
用直观的方式在两栏中移动元素，完成选择行为。
选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。 其中，左边一栏为source，右边一栏为target，API 的设计也反应了这两个概念。
2.API
| 属性名称 | 数据类型 | 是否必填 | 默认值 | 回传参数 | 说明 |
|---|---|---|---|---|---|
| name | string | 是 | null | 空 | 表单字段名称 |
| valueField | string | 否 | value | 空 | 数据字段值名称 |
| textField | string | 否 | text | 空 | 数据字段文本名称 |
| url | string | 否 | null | 空 | ajax的后台地址,暂时不支持子节点异步功能，等待开放 |
| params | string | 否 | null | 空 | 查询参数 |
| dataSource | string | 否 | data | 空 | ajax的返回的数据源中哪个属性作为数据源,为null时直接后台返回的数据作为数据源 |
| data | array | 否 | [] | 空 | 节点数据 |
| selectData | array | 否 | [] | 空 | 选中的数据 |
| onSelect | string | 否 | 关闭 | data,selectData | 确定后的事件 |
3.代码演示
/**
* Created by ALOG on 17/6/5.
*/
let React =require( "react");
let ReactDOM=require("react-dom");
let wasabi=require("wasabiD");
let Transfer=wasabi.Transfer;
class Demo extends React.Component {
render(){
return (
<Transfer data={[{text:"data1",value:1},{text:"data2",value:2},{text:"data3",value:3},{text:"data4",value:4}]}
selectData={[{text:"selectData1",value:"slect1"}]}/>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById("root"));