穿梭框自我了解全部
实现代码如下
layui.use('transfer',funcation(){
var transfer=layui.transfer;
transfer.render({
elem:'test1',
data:[
{"value":"1","title":"李白","checked":"checked","disabled":"disabled"},
{"value":"2","title":"杜甫","checked":"checked","disabled":"disabled"},
{"value":1,"title":"毕兴宇","checked":"checked","disabled":"disabled"},
], //checked:是否选中 //disabled:是否禁选
id:'demo1'//重载是可以用到
})
})
//重载
transfer.reload('demo1',{
title:{'新列表1',‘新列表2’}})
//左右穿梭的回调
transfer.render({
elem: '#text'
,data: [] //数据源
,onchange: function(data, index){
console.log(data); //得到当前被穿梭的数据
console.log(index); //如果数据来自左边,index 为 0,否则为 1
}
});
参数选项 | 说明 | 类型 | 默认值 |
---|---|---|---|
elem | 指向容器选择器 | String/Object | - |
title | 穿梭框上方标题 | Array | ['列表一','列表二'] |
data | 数据源 | Array | [{'key','value'},{},{}] |
parseData | 用于对数据源进行格式解析 | Function(回调函数) |
|
value | 初始选中的数据(右侧列表) | Array | - |
id | 设定实例唯一索引,传参使用 | String | String |
showSearch | 是否开启搜索 | Boolean | fasle |
width | 定义左右穿梭框的宽度 | Number | 200 |
height | 定义左右穿梭框的高度 | Number | 340 |
text |
自定义文本,如空数据时的异常提示等。
|
Object | - |
onchange | 左右数据穿梭时的回调 | Function |