Layui transfer

最新推荐文章于 2025-09-11 02:25:43 发布

原创最新推荐文章于 2025-09-11 02:25:43 发布 · 4.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍layui框架中的穿梭框组件，包括基本功能的源代码、配置选项及如何重载和获取数据。通过具体示例，展示了穿梭框的初始化、数据解析、自定义文本及回调函数的使用。

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