Layui_穿梭框

1:render 渲染

2:首先在hubilder里新建一个web项目，其次再建一个文件夹把相关html里的代码复制粘贴到里边，命名为transfer_stu.html;相关代码如下：
< !DOCTYPE html>
< html>
< head>
< meta charset=“utf-8”>
< title>穿梭框组件
< link rel=“stylesheet” href="…/src/css/layui.css">
< /head>
< body>
< div id=“test1”>
< script src="…/src/layui.js">
< script>
layui.use(‘transfer’, function(){
var transfer = layui.transfer;

//渲染
transfer.render({
elem: ‘#test1’ //绑定元素
,data: [
{“value”: “1”, “title”: “李白”, “disabled”: “”, “checked”: “”}
,{“value”: “2”, “title”: “杜甫”, “disabled”: “”, “checked”: “”}
,{ “value”: “3”, “title”: “贤心”, “disabled”: “”, “checked”: “”}
]
,id: ‘demo1’ //定义索引
});
});
< /script>
< /body>
< /html>

3：改路径:将 改为
将

4：根据提供的参数进行相关代码：
参数选项 说明 类型 默认值
elem 指向容器选择器 String/Object -
title 穿梭框上方标题 Array [‘标题一’, ‘标题二’]
data 数据源 Array [{}, {}, …]
parseData 用于对数据源进行格式解析 Function 详见数据源格式解析
value 初始选中的数据（右侧列表） Array -
id 设定实例唯一索引，用于基础方法传参使用。 String -
showSearch 是否开启搜索 Boolean false
width 定义左右穿梭框宽度 Number 200
height 定义左右穿梭框高度 Number 340
text 自定义文本，如空数据时的异常提示等。
code layui.code
text: {
none: ‘无数据’ //没有数据时的文案 Object -
,searchNone: ‘无匹配数据’ //搜索无匹配数据时的文案
}

onchange 左右数据穿梭时的回调 Function 详见穿梭时的回调

5：代码如下：
transfer 组件所规定的数据格式：
transfer.render({
elem: ‘#test1’ //绑定元素
,data: [
{“id”: “1”, “name”: “李白”, “disabled”: “”, “checked”: “”}
,{“id”: “2”, “name”: “杜甫”, “disabled”: “”, “checked”: “”}
,{“id”: “3”, “name”: “贤心”, “disabled”: “”, “checked”: “”}
]
,id: ‘demo1’ //定义索引
,title:[‘豪放派’,‘浪漫派’]
,value:[“2”,“3”]
,showSearch:‘true’
,width:200
,height:300
,text: {
none: ‘胖胖的’ //没有数据时的文案
,searchNone: ‘啥都没有’ //搜索无匹配数据时的文案
}
,parseData: function(res){

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

}
});
6:render:渲染

7:左右穿梭的回调
当数据在左右穿梭时触发，回调返回当前被穿梭的数据
transfer.render({
elem: ‘#text’
,data: [] //数据源
,onchange: function(data, index){
console.log(data); //得到当前被穿梭的数据
console.log(index); //如果数据来自左边，index 为 0，否则为 1
var dt =JSON.stringify( date );
if(index ==0){
layer.msg(“浪漫派移除”+dt);
}else{
layer.msg(“豪放派移除”+dt);
}
}
});
});

8:基础方法
基础用法是组件关键组成部分，目前所开放的所有方法如下：var transfer = layui.transfer;

transfer.set(options); //设定全局默认参数。options 即各项基础参数
transfer.getData(id); //获得右侧数据
transfer.reload(id, options); //重载实例
9:获得右侧数据
穿梭框的右侧数据通常被认为是选中数据，因此你需要得到它并提交到后台。
transfer.render({
elem: ‘#test’
,data: []
,id: ‘demo1’ //定义索引
});

//获得右侧数据
var getData = transfer.getData('demo1'); 

10:实例重载
重载一个已经创建的组件实例，被覆盖新的基础属性
重载
var $ = layui.$;
$(’#reload’).click(function(){
transfer.reload(‘demo1’, {
title: [‘新列表1’, ‘新列表2’]
,data: [
{“id”: “1”, “name”: “李白1”, “disabled”: “”, “checked”: “”}
,{“id”: “2”, “name”: “杜甫1”, “disabled”: “”, “checked”: “”}
,{“id”: “3”, “name”: “贤心1”, “disabled”: “”, “checked”: “”}
]
});
})

11:完整代码
< !DOCTYPE html>
< html>
< head>
< meta charset=“utf-8”>
< title>穿梭框组件< /title>
< link rel=“stylesheet” href="…/layui/css/layui.css">
< /head>
< body>
< div id=“test1”>
< button id=“reload” type=“button” class=“layui-btn”>重载
< script src="…/layui/layui.js">
< script>
layui.use(‘transfer’, function(){
var transfer = layui.transfer;
var layer = layui.layer;
var $ = layui.$;
$(’#reload’).click(function(){
transfer.reload(‘demo1’, {
title: [‘新列表1’, ‘新列表2’]
,data: [
{“id”: “1”, “name”: “李白1”, “disabled”: “”, “checked”: “”}
,{“id”: “2”, “name”: “杜甫1”, “disabled”: “”, “checked”: “”}
,{“id”: “3”, “name”: “贤心1”, “disabled”: “”, “checked”: “”}
]
});
})
//渲染
transfer.render({
elem: ‘#test1’ //绑定元素
,data: [
{“id”: “1”, “name”: “李白”, “disabled”: “true”, “checked”: “true”}
,{“id”: “2”, “name”: “杜甫”, “disabled”: “true”, “checked”: “true”}
,{“id”: “3”, “name”: “贤心”, “disabled”: “true”, “checked”: “true”}
]
,id: ‘demo1’ //定义索引
,title:[‘豪放派’,‘浪漫派’]
// ,value:[“2”,“3”]
,showSearch:‘true’
,width:200
,height:300
,text: {
none: ‘胖胖的’ //没有数据时的文案
,searchNone: ‘啥都没有’ //搜索无匹配数据时的文案
}
,parseData: function(res){

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

}
,onchange: function(date, index){
console.log(date); //得到当前被穿梭的数据
console.log(index); //如果数据来自左边，index 为 0，否则为 1

var dt =JSON.stringify( date );
if(index ==0){
	layer.msg("浪漫派移除"+dt);
}else{
    layer.msg("豪放派移除"+dt);
}
}
 });
 });

< /script>
< /body>
< /html>