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
  }
});

 

var url=""+globalData+"...."
var MyToken=globalData.MyToken
$.post(url,{

token:MyToken
},function(result){
transfer.render({
elem:"---"
data:result//需要解析


})




})

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