其他分享
首页 > 其他分享> > layui tansfer(穿梭框组件)

layui tansfer(穿梭框组件)

作者：互联网

穿梭框自我了解全部

实现代码如下
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
  }
});

 

 

transfer基础参数
参数选项 说明 类型 默认值
elem 指向容器选择器 String/Object -
title 穿梭框上方标题 Array ['列表一','列表二']
data 数据源 Array [{'key','value'},{},{}]
parseData 用于对数据源进行格式解析 Function（回调函数）

 

,parseData: function(res){
    return {
      "value": res.id //数据值
      ,"title": res.name //数据标题
      ,"disabled": res.disabled  //是否禁用
      ,"checked": res.checked //是否选中
    }
  }

 
value 初始选中的数据(右侧列表) Array -
id 设定实例唯一索引，传参使用 String String
showSearch 是否开启搜索 Boolean fasle
width 定义左右穿梭框的宽度 Number 200
height 定义左右穿梭框的高度 Number 340
text

 自定义文本，如空数据时的异常提示等。



text: {
  none: '无数据' //没有数据时的文案
  ,searchNone: '无匹配数据' //搜索无匹配数据时的文案
}

 

 Object -
onchange 左右数据穿梭时的回调 Function  

 

标签：checked,title,layui,value,disabled,组件,穿梭,transfer,tansfer
来源： https://blog.csdn.net/dreamMRs/article/details/100361190