layui-穿梭框
基本功能源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>穿梭框组件</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<button type="button" class="layui-btn"id="a">重载</button>
<button type="button" class="layui-btn"id="b">获取</button>
<script src="layui/layui.js"></script>
<script>
layui.use(['layer','transfer'],function(){
$=layui.$;
$('#b').click(function(){
var getData = transfer.getData('demol1');
layer.msg(JSON.stringify(getData));
})
$('#a').click(function(){
transfer.reload('demol1', {
title: ['新列表1', '新列表2']
,elem: '#test1'
,data:[
{"id":"1","name":"李白1"},
{"id":"2","name":"杜甫1"},
{"id":"3","name":"贤心1"}
]
});
})
var transfer=layui.transfer;
transfer.render({
elem:'#test1'
// ,data:[
// {"value":"1","title":"李白","disbled":"","checked":""},
// {"value":"2","title":"杜甫","disbled":"","checked":""},
// {"value":"3","title":"贤心","disbled":"","checked":""}
// ]
,title:['浪漫派','现实派']
,data:[
{"id":"1","name":"李白1"},
{"id":"2","name":"杜甫1"},
{"id":"3","name":"贤心1"}
]
,parseData: function(res){
return{
"value":res.id
,"title":res.name
,"disbled":res.disbled
,"checked":res.checked
}
}
,"value":['2','3']
,id:'demol1'
,"showSearch":true
,"width":300
,"height":300
,text:{
none:'呀唏勒',
searchNone:'what are you 弄啥嘞?'
}
,onchange:function(data,index){
console.log(data);
console.log(index);
}
});
transfer.render({
elem: '#test2' //绑定元素
,data: [
{"value": "1", "title": "李白", "disabled": "", "checked": ""}
,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
]
,id: 'demol2' //定义索引
});
transfer.set(options);
});
</script>
</body>
</html>
基础功能
title:['','',''.......]
穿梭框上方标题data:[{'':'','':''....},{'':'','':''....},{'':'','':''....}...]
数据源,用来存数据- parseData–用于对数据源进行格式解析
transfer.render({
elem: '#text1'
,data: [
{"id": "1", "name": "李白"}
,{"id": "2", "name": "杜甫"}
,{"id": "3", "name": "贤心"}
]
,parseData: function(res){
return {
"value": res.id //数据值
,"title": res.name //数据标题
,"disabled": res.disabled //是否禁用
,"checked": res.checked //是否选中
}
}
});
"value":['','',''.....]
初始选中的数据(右侧列表)id:''
设定实例唯一索引,用于基础方法传参使用。"showSearch":trun/flase
是否开启搜索"width":
定义左右穿梭框宽度,默认200"height":
定义左右穿梭框高度,默认340- text–自定义文本,如空数据时的异常提示等。
text: {
none: '无数据' //没有数据时的文案
,searchNone: '无匹配数据' //搜索无匹配数据时的文案
}
- onchange–左右数据穿梭时的回调
transfer.render({
elem: '#text'
,data: [] //数据源
,onchange: function(data, index){
console.log(data); //得到当前被穿梭的数据
console.log(index); //如果数据来自左边,index 为 0,否则为 1
}
});
- 获取右侧数据
$=layui.$;
$('#b').click(function(){
var getData = transfer.getData('demol1');
layer.msg(JSON.stringify(getData));//强转为json`
})
- 重载一个已经创建的组件实例,被覆盖新的基础属性
$=layui.$;
$('#a').click(function(){
transfer.reload('demol1', {
title: ['新列表1', '新列表2']
,elem: '#test1'
,data:[
{"id":"1","name":"李白1"},
{"id":"2","name":"杜甫1"},
{"id":"3","name":"贤心1"}
]
});
})